Bloggerでプロフィールを表示して自己紹介を表示してみよう

2021年12月13日月曜日

Blogger

t f B! P L

enter image description here

Bloggerに自己紹介ガジェットを追加して、自分のプロフィールを表示する方法を解説します。

そもそも「プロフィール欄って必要?」という議論はしばしばありますが、長期的に見るとプロフィール欄は、あなたのブログのファンを増やすという意味で有効らしいです。

スポンサーリンク

プロフィール を設定しよう

まずは、ブログのプロフィール欄に載せる自己紹介と写真(アイコンなど)を登録しよう。写真(アイコン)の登録は必須ではないが、自己紹介文はしっかりと設定するようにしよう。

プロフィールは、Blogger の管理画面から、[設定] → [ユーザープロフィール] の順に選択すると、編集画面に遷移できます。

enter image description here

プライバシーの設定

まず、プライバシーの欄では「プロフィールを公開」にチェックを入れます。その他の設定については、任意で公開範囲を設定しましょう。

enter image description here

ユーザー情報

ユーザー情報には、ブログのプロフィール欄に表示する名前を設定します。
もし、メールアドレスも公開する場合は合わせて入力します。

enter image description here

プロフィール写真の登録

プロフィール写真を公開する場合は、以下からファイルをアップロードできます。今回は、かわいいラバーダックをプロフィール 写真に登録してみました!

enter image description here

※ 写真の登録は必須ではありません。

自己紹介

最後に、次の項目に自己紹介を書きます。ここで入力した内容がブログのプロフィール欄に表示されます。
ここには、HTMLタグも書けるのでリンク等も設定することが可能です。

enter image description here

スポンサーリンク

自己紹介ガジェットの追加

ブログのレイアウトに自己紹介ガジェットを追加します。

Blogger管理画面のレイアウト設定を表示し、自己紹介を表示したいエリアの「+ガジェットを追加」をクリックします。多くのブログサイトでは、自己紹介はサイドーに表示されていることが多いため、この記事でもサイドバーに追加する手順で進めていきます。

enter image description here

ガジェットの一覧から「プロフィール」を選択します。

enter image description here

次にプロフィールの設定を行います。

「タイトル」:あなたのブログのプロフィール欄表示するタイトル。
「自己紹介を表示する」:先ほど入力した自己紹介をブログに表示するか設定します。
「場所を表示する」:住んでいる場所を表示するようですが、基本必要ないので OFF にしておきましょう。

enter image description here

最後に、レイアウトの保存ボタンもクリックして、変更内容を確定します。

enter image description here

設定が終わったら表示を確認してみよう

ここまでの手順で、ブログに自己紹介(プロフィール)を表示する設定は完了です。
ブログのサイトを開いて、次のイメージのように自己紹介が表示されているか確認してみましょう。

enter image description here

スポンサーリンク

表示をカスタマイズする

ここからは、プロフィール表示をカスタマイズする方法を紹介します。 表示をカスタマイズするには、テンプレート の HTML を編集する必要があるので、編集前に必ずバックアップを取得するようにしましょう。

また、ブログのテンプレートに「QooQ」を使っている前提で話を進めますが、他のテンプレートでも基本は同じです。

「詳細プロフィールを表示」のリンクを消す

デフォルトでは、プロフィール欄の下に「詳細プロフィールを表示」というリンクが表示されます。

enter image description here

このリンクは Blogger のプロフィールページに遷移するものですが、ユーザー名のリンクや写真をクリックすることでもプロフィールページへ遷移できるため、無駄な2重リンクは消しましょう。

このリンクを消すには、テンプレートの HTML から次のようになっている行を削除します。

<a class='profile-link' expr:href='data:userUrl' rel='author'><data:viewProfileMsg/></a>

上の行を削除して保存すると、こんな感じでブログのプロフィールから「詳細プロフィールを表示」のリンクが削除されます。

enter image description here

写真を大きく表示する

デフォルトだと、写真が幅 80 px ぐらいまで縮小されます。かわいいラバーダックをもっと大きく表示してみましょう。

まず、テンプレート HTMLの中から 、プロフィール写真を表示しているタグを探します。 data:photo.url のようなキーワードで探せば見つかるでしょう。

<a expr:href='data:userUrl'><img class='profile-img' expr:alt='data:messages.myPhoto' expr:height='data:photo.height' expr:src='data:photo.url' expr:width='data:photo.width'/></a>

タグを見つけたら、expr:widthexpr:height 属性を消して、expr:src を以下のように書き換えます。

<a expr:href='data:userUrl'><img class='profile-img' expr:alt='data:messages.myPhoto' expr:src='resizeImage(data:photo.url, 400)'/></a>

resizeImage に渡す必要を変えれば画像の横幅を変えれます。

編集して HTML を保存したら、ブログを表示して確認してみましょう。

うん!いい感じに大きくなってますね!

enter image description here

スポンサーリンク
スポンサーリンク

このブログを検索

Profile

自分の写真
Webアプリエンジニア。 日々新しい技術を追い求めてブログでアウトプットしています。
プロフィール画像は、猫村ゆゆこ様に書いてもらいました。

仕事募集もしていたり、していなかったり。

QooQ