nlog(n): プラグインなしでコメント欄をしましまに

Thu November 06, 2008

プラグインなしでコメント欄をしましまに

Movable Type 4/Movable Type Open Source からは，しましまプラグインを使わずに，コメント欄やトラックバック欄の背景をしましまにすることができる。

■ ■ ■

Movable Type 4/Movable Type Open Source 以前は，コメント欄やトラックバック欄の背景の色を交互に変えて「しましま」にするには，プラグイン (dotclue: MTRoundRobin や nlog(n) - しましまプラグイン) あるいは Javascript (なくなっている: はてなブックマーク - Style Diver - JavaScriptで背景色をストライプにする表現方法)を使う必要があったが，MT4/MTOS からは不要となった。

背景色を交互に変える MT4/MTOS での実装は，ネタ的には古くて，リストに関しては沢山のサイトで紹介されている。

コメント欄については見当たらなかったのでまとめておこう。

MT4/MTOS では，ブロックタグ MTFor 内で使える変数が追加された。使えるのは，__first__, __last__, __even__, __odd__, __counter__ の5つの変数である (MTFor | テンプレートタグリファレンス)。この変数は，MTFor 以外のブロックタグでも使うことができる (Movable Type 4のブロックタグ内で使える変数 - The blog of H.Fujimoto)。

コメント欄の背景色をコメント毎に変える場合は，MTComments ブロックタグ内で使うことになる。方針としては，コメントを囲む div に色づけ用のクラスを追加し，スタイルシートで色を指定する。スタイルシートは新たに作成することにする。

以下の方法が実現できるのは，Movable Type 4.1 以降，Movable Type Open Source である。動作は Movable Type Open Source 4.21-ja で行った。

「コメント」テンプレートの編集

管理画面から「デザイン」→「テンプレート」を選択し，「コメント」の編集画面を開く。「comment」のクラスを指定している div を見つけ，以下の強調部分を追加する。MT4 以降であっても，スタイルシートは頻繁に変更されているので，この通りでないかも知れないが，相当する部分を見つけることはできるだろう。

<mt:Comments>
   <mt:CommentsHeader>
   ...
   </mt:CommentsHeader>
   <div id="comment-<$mt:CommentID$>" class="comment<mt:IfCommentParent> comment-reply</mt:IfCommentParent> <mt:If name="__odd__">odd<mt:Else>even</mt:If>">
   <div class="inner">
   <div class="comment-header">
   <div class="asset-meta">
   ...

再構築すると，この部分は，普通のコメントで奇数番目なら，

返信コメントで偶数番目なら，

などとなる。

スタイルシートの追加と編集

MT4/MTOS からは，スタイルシートがモジュール化されたこともあり，どこにスタイル設定するかが悩みどころだが，ここでは新しくスタイルシートを追加して，デフォルトのスタイルシートから読み込むようにする。

スタイルシートの追加

管理画面の「デザイン」→「テンプレート」の「インデックステンプレート」セクションで，「インデックステンプレートを作成」をクリックする。

スタイルシートの内容には，コメントの背景色を指定する。

.comments-content .odd { background-color: #F5F5F5 }
.comments-content .even { background-color: #FFFFFF }

スタイルシートの名前と設定は，例えば次のように指定する。出力ファイル名にパスをつけない場合，デフォルトテンプレート styles.css と同じ，ブログのルートディレクトリに出力される。mt:StaticWebPath などの変数を指定することはできない。

テンプレート名	ユーザスタイルシート
出力ファイル名	styles-user.css
テンプレートの種類	スタイルシート (styles)
公開	スタティック(規定)

作成したスタイルシートの読み込み

管理画面の「デザイン」→「テンプレート」の「インデックステンプレート」セクションの「スタイルシート」を開き，以下の強調部分を追加する。これで，上で作ったユーザスタイルシートが読み込まれる。

@import url(<$mt:StaticWebPath$>themes-base/blog.css);
@import url(<$mt:StaticWebPath$>themes/minimalist-red/screen.css);
@import url(<$mt:BlogURL$>styles-user.css);

再構築すれば完了である。

トラックバック欄の場合

トラックバックについても，同様の手順でできる。テンプレートは次のように。

<mt:Pings>
   <mt:PingsHeader>
   ...
   </mt:PingsHeader>
   <div class="trackback <mt:If name="__odd__">odd<mt:Else>even</mt:If>" id="ping-<$mt:PingID$>">
   <div class="inner">
   <div class="trackback-header">
   <div class="asset-meta">
   ...

スタイルシートは，例えば次のように。

.comments-content .odd { background-color: #F5F5F5 }
.comments-content .even { background-color: #FFFFFF }
.trackbacks-content .odd { background-color: #E6E6FA }
.trackbacks-content .even { background-color: #FFFFFF }

補足

コメント欄のスタイルについては，デフォルトでは，コメントを分ける線とマージンは blog.css，コメントを分ける線の色は screen.css で指定されている。コメントを分ける線は，blog.css と screen.css の両方で指定されていたりして，スタイルシートの役割に関してはまだ明確な方針が定まっていないのかも知れない。いずれにしても，