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

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

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

スポンサーリンク

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

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

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

プライバシーの設定

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

ユーザー情報

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

プロフィール写真の登録

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

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

自己紹介

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

スポンサーリンク

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

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

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

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

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

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

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

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

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

スポンサーリンク

表示をカスタマイズする

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

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

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

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

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

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

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

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

写真を大きく表示する

デフォルトだと、写真が幅 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:width と expr: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 を保存したら、ブログを表示して確認してみましょう。

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