Download
MovableType
Plugin

しましまコメントプラグイン

MovableType のコメント欄の色を交互に変えて「しましま」にするプラグインです。


背景

MovableType の編集画面では、記事やコメントなどの一覧が交互に色づけされていて見やすくなっています。 公開している記事についたコメントも、そんな風に色づけしてみたくなりました。 なお、PHP を利用している場合は、プラグインを導入しなくても、 <$MTCommentOrderNumber$> を参照して分岐すれば同様の効果が得られます。 コメントだけでなく、トラックバックやエントリもしましまにできるプラグインを公開しましたのでご利用ください(しましまプラグイン)。 Movable Type 4.1/Movable Type Open Source 以降では，このプラグインを導入しなくても同様の効果を得る実装が可能となっています (nlog(n): プラグインなしでコメント欄をしましまに)。


ダウンロード

stripecommentcolor.tar.gz または stripecommentcolor.zip のどちらかをダウンロードしてください。 内容は同じものです。中のファイルは1つだけですので、解凍後にディレクトリは作りません。ご容赦ください。


準備

プラグイン導入にあたり、Perl モジュールを追加インストールする等の準備は必要ありません。


インストール

ダウンロードしたファイルを展開し、プラグイン用フォルダに置いてください。
CGIPath/plugins/stripecommentcolor.pl


使えるようになるタグ

プラグインの導入により、次のタグが使えるようになります。

  • <$MTStripeCommentColor$>

<$MTStripeCommentColor$> で指定できる属性

<$MTStripeCommentColor$> では、属性として色などを指定することができます。 デフォルトの色は、Movable Type 2.661 の編集用トップ画面と同じにしてあります。

  • oddnumcolor: 奇数番目のコメントの色を指定します。コメントは1番から始まります。 #RRGGBB の16進形式、#RGB の16進形式、または色名が使えます。 古いバージョンの IE などでのブラウズを意識するのであれば、16進形式が無難です。 デフォルトはうすい灰色(#EEEEEE)です。
  • evennumcolor: 偶数番目のコメントの色を指定します。 デフォルトは白(#FFFFFF)です。

使い方

コメント一覧のテンプレート (Comment Listing Template) や、 個別記事のテンプレート (Individual Entry Template) のコメント欄のスタイル指定に使います。 指定の方法は色々あります。表示の例は、ウェブログをご覧ください。


背景色を追加で指定する方法

一番簡単なのは、コメント欄のクラスに背景色を追加で指定する方法です。

MovableType 2.6x のコメント一覧のテンプレートでは、コメント欄のコードは次のようになっています movabletype.org : Default Templates)。

<MTComments>
<div class="comments-body">
<$MTCommentBody$>
<span class="comments-post">
Posted by <$MTCommentAuthorLink spam_protect="1"$> at <$MTCommentDate$>
</span>
</div>
</MTComments>

これに背景色として設定を追加します。 <$MTStripeCommentColor$> に属性を指定しなければデフォルトの色設定となります。

<MTComments>
<div class="comments-body" style="background-color: <$MTStripeCommentColor$>">
<$MTCommentBody$>
<span class="comments-post" style="background-color: <$MTStripeCommentColor$>">
Posted by <$MTCommentAuthorLink spam_protect="1"$> at <$MTCommentDate$>
</span>
</div>
</MTComments>

次の色指定をすると、BlogLines 風の表示になります。

<MTComments>
<div class="comments-body" style="background-color: <$MTStripeCommentColor oddnumcolor="#EFEFEF"$>">
<$MTCommentBody$>
<span class="comments-post" style="background-color: <$MTStripeCommentColor oddnumcolor="#EFEFEF"$>">
Posted by <$MTCommentAuthorLink spam_protect="1"$> at <$MTCommentDate$>
</span>
</div>
</MTComments>

クラスを切り替える方法

コメント用にクラスを2つ作っておいて、切り替えるという方法もあります。

例えば、 コメントの本文用に comments-body-1, comments-body-2、 コメント投稿者表示用に comments-post-1, comments-post-2 という背景色の違うクラスを、スタイルシート styles-site.css に作っておきます。 奇数番目と偶数番目の属性を、色ではなくクラスとして指定します。

<MTComments>
<div class="<$MTStripeCommentColor oddnumcolor="comments-body-1" evennumcolor="comments-body-2"$>">
<$MTCommentBody$>
<span class="<$MTStripeCommentColor oddnumcolor="comments-post-1" evennumcolor="comments-post-2"$>">
Posted by <$MTCommentAuthorLink spam_protect="1"$> at <$MTCommentDate$>
</span>
</div>
</MTComments>

ご利用に関して

無料でご利用になれます。商用に利用されても構いません。

無保証

無保証です。何か問題が起きたとしても、作者は責任を持ちません。ご自身の責任の下でご利用ください。

ご意見

nlog(n): ウェブログ のコメント欄にお願いします。


更新履歴

  1. 2004年9月11日 バージョン 1.0 リリース [リリース情報]
    (stripecommentcolor-1.0.tar.gz, stripecommentcolor-1.0.zip)