Movable Type 備忘録

 MovableTypeのコメント欄の色を交互に変えてみる

既にMovableType(ムーバブルタイプ)を使っているみなさんなら気づいていることと思いますが、MovableType(ムーバブルタイプ)のテンプレート一覧画面は、交互に色が変わっててすっごく見やすいですよね。

前々から、コメント一覧、トラックバック一覧でも交互に色違いできないかなぁ…なんて思ってて、思ってはいても実行に移さずいたら忘れちゃってましたはは

で、徘徊してたら偶然それを可能とするカスタマイズ見つけてしまいましたexclam

今回は、MovableType(ムーバブルタイプ)のコメント欄の色を交互に変えるカスタマイズにチャレンジしてみました。

コメント欄の色を交互に変えるには、MTStripeCommentColorプラグインを使用して行います。 このプラグインでは、コメント番号の奇数と偶数とであらかじめ色を割り当てておくことで、コメント番号に合った色に配色しているようです。

今回参考にしたサイトは、nlog(n) 様です。

▼MTStripeCommentColorプラグインの入手はこちらから▼
http://nlogn.ath.cx/plugins/stripecommentcolor/

プラグインのインストール

MTStripeCommentColorプラグインをインストールします。 上記リンクから、stripecommentcolor.zip または、stripecommentcolor.tar.gz をダウンロードします。 そして、適当なフォルダに展開して、プラグインをいつもの mt/plugins の中にアップロードします。

個別エントリ・アーカイブの修正

次に、個別エントリ・アーカイブを修正します。 <$MTCommentBody$>タグを検索して、以下のコードのようなかんじで修正します。

  1. <MTComments>
  2.     <div class="comments-body <$MTStripeCommentColor oddnumcolor="comments-content-odd" evennumcolor="comments-content-eve"$>">
  3.         <$MTCommentBody$>
  4.         <span class="comments-post" style="background-color: <$MTStripeCommentColor evennumcolor="#E0E0E0"$>">
  5.             Posted by <$MTCommentAuthorLink spam_protect="1"$> at <$MTCommentDate$>
  6.         </span>
  7.     </div>
  8. </MTComments>

青い字の部分では、あらかじめ奇数( comments-content-odd )／偶数( comments-content-eve )用に色を設定してたクラスを指定しています。 <$MTStripeCommentColor$>タグの属性として、oddnumcolor には奇数用のクラスを、evennumcolor には偶数用のクラスを指定します。

赤い字の部分では、偶数番号の色を直接指定しています。 奇数番号の指定は省いているのでデフォルト値が適用されます。 デフォルトの色は、奇数が #EEEEEE で、偶数が #FFFFFF に設定されています。

修正したら保存して再構築します。

以上で、コメント欄の色を交互に変えることができました。 このプラグインでは、コメント欄のみ色を変えることができます。 トラックバック欄は適用できません。 ですが、nlog(n)さんでは、別な MTStripeColor というプラグインも用意されています。
arrowしましまプラグイン / MTStripeColor

MTStripeColorプラグインでは、コメント欄、トラックバック欄はもちろんのこと、エントリにも適用可能となっているようです。 わたしは使っていませんが、同じようなかんじで使用できますので、コメント欄以外にも使いたいという人は、MTStripeColorプラグインの方がいいかも、です。

SEE YOUハート２

 Trackback Pings(1)

from MovableType備忘録

以前、MovableTypeのコメント欄の色を交互に変えてみるでコメント欄の背景色を交互に変えるプラグインを紹介しました。 今回は何でも( というのは大げ...

Tracked on September 29, 2007

 Comments(0)

No comments found.

 Post a Comment

 

コメント用フィード