てんぽ : FC2ブログで管理人のコメントを区別して表示するカスタマイズ

FC2ブログのコメント欄で、管理人のコメントを他のコメントと区別して表示するカスタマイズ。 コメントのトリップを表すFC2ブログ独自変数<%comment_trip>をclass属性に用い、 そのclass属性を持つ要素のスタイルをCSSで指定します。

たとえば、あるテンプレートのコメント部分は以下のようになっていますが、class属性の値に<%comment_trip>を追加します。

<!--comment-->
<dl id="comment<%comment_no>" class="comment T-<%comment_trip>">
<dt><strong><%comment_name></strong>:<%comment_title></dt>
<dd>
<p>
<%comment_body>
</p>
<ul class="info">
<li><%comment_year>年<%comment_month>月<%comment_day>日（<%comment_wayoubi>）<%comment_hour>:<%comment_minute>:<%comment_second></li>
<li><%comment_url+str></li>
<li><a href="<%comment_edit_link>" title="コメントの編集">編集</a></li>
</ul>
</dd>
</dl>
<!--/comment-->

<%comment_trip>はコメント投稿時に入力したパスワードに応じて8桁の英数字に変換されます。 この英数字をCSSのクラスセレクタとして利用します。

dl.T-yourTrip {
 background: #ffc; /* トリップがyourTripであるコメントの背景を#ffcにする */
}

なお、トリップの先頭が数字である場合やピリオド（.）が含まれる場合、CSSのセレクタとして直接用いることができません。 自分の使っているトリップの先頭が数字の場合は、class="T-<%comment_trip>"などと適当なアルファベットを追加したり、 ピリオドが含まれる場合はバックスラッシュ（\）でエスケープする必要があります。

と、ここまで書いておいて、このネタはどこかで紹介されていたな、と思って検索してみたら ウェビンブログの洵さんでした。あの頃のように…（raraさん）でも実践されています。

• 本人マークと専用アイコン : ウェビンブログ