OpenCage: Bloggerのプロファイル表示をカスタマイズ

2005年7月5日

Bloggerのプロファイル表示をカスタマイズ

　Bloggerのプロファイル表示は，<$BlogMemberProfile$> というコードでテンプレートに登録されていますが，このタグはhtmlのソースを出力するタグなので，表記を変更することはできません。

　なので，"Name" ，"Location" の表記を消したり，"about me" や "View my complete profile" の表記を変更したいけれども，手の出しようが無くて，「あー痒いところに手が届かない」と嘆いている方もおられるのではないでしょうか？

　ちなみに，このBlogでは，<strong> 属性を非表示にしていますので，本文中で <strong> を使った強調表現ができません。

　テンプレートタグの解析を進める中で，解決策を見出しましたので紹介します。

　まず，<$BlogMemberProfile$> が出力するhtmlは以下のとおりです。

<div id="profile-container">
<h2 class="sidebar-title">About Me</h2>
<dl class="profile-datablock">

<dt class="profile-img"> <a href="[プロファイルページへのリンク]">
<img alt="My Photo" src="[ユーザの画像]" height="74" width="80">
</a> </dt>
 <dd class="profile-data"> <strong>Name:</strong>[ユーザー名] </dd>
 <dd class="profile-data"> <strong>Location:</strong>[ロケーション] </dd>
</dl>
<p class="profile-textblock"> [自己紹介文] </p>
<p class="profile-link"> <a href="[プロファイルページへのリンク]">View my complete profile</a> </p>
</div>

　[ ]で囲んでいる場所が，プロファイルから得られる情報になりますので，これを以下のように個別の代入タグに差し替えれば，内容的には同じものが表示されることになります。

<div id="profile-container">
<h2 class="sidebar-title">About Me</h2>
<dl class="profile-datablock">
 <dt class="profile-img"> <a href="<$BlogOwnerProfileUrl$>"> <img alt="My Photo" src="<$BlogOwnerPhotoUrl$>"> </a> </dt>
 <dd class="profile-data"> <strong>Name:</strong><$BlogOwnerNickname$> </dd>
 <dd class="profile-data"> <strong>Location:</strong><$BlogOwnerLocation$> </dd>
</dl>
<p class="profile-textblock"> <$BlogOwnerAboutMe$> </p>
<p class="profile-link"> <a href="<$BlogOwnerProfileUrl$>">View my complete profile</a> </p>
</div>

　このコードを編集して，要らないものを削除したり，CSSのクラスを変更し，テンプレート内の <$BlogMemberProfile$> と差し替えれば，かなりのカスタマイズを行うことが可能になります。