Download
MovableType
Plugin

しましまプラグイン

MovableType のエントリや，コメント欄，トラックバック欄などの色を交互に変えて「しましま」にするプラグインです。


背景

MovableType の編集画面では，記事やコメントなどの一覧が交互に色づけされていて見やすくなっています。 公開している記事やコメントやトラックバックなども，そんな風に色づけしてみたくなりました。 姉妹品に「しましまコメントプラグイン」がありますが，この「しましまプラグイン」を導入すれば 「しましまコメントプラグイン」は不要になります。Movable Type 4.1/Movable Type Open Source 以降では，このプラグインを導入しなくても同様の効果を得る実装が可能となっています (nlog(n): プラグインなしでコメント欄をしましまに)。


ダウンロード

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


準備

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


インストール

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


使えるようになるタグ

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

  • <$MTStripeColor$>

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

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

  • target: しましまにするターゲット名を指定します。 単なる目印として働きますので，名前は何でも構いません。 半角英数字で，最初の文字は英文字にしておくのが無難です。 ハイフン(またはマイナス)「-」は使えるようです。 エントリーをしましまにしたい場合は target="blogbody" などとしておくと分かりやすいでしょう。デフォルトは target="StripeColor" です。
    実は，target で指定する文字列は，プラグインの中で変数名として扱われます。 この変数名を持った変数が 1, 2, 3,... と増えていき，奇数のときには oddcolor が使われ， 偶数のときには evencolor が使われます。
  • oddcolor: 奇数番目のコメントの色を指定します。コメントは1番から始まります。 #RRGGBB の16進形式，#RGB の16進形式，または色名が使えます。 古いバージョンの IE などでのブラウズを意識するのであれば，16進形式が無難です。 デフォルトはうすい灰色(#EEEEEE)です。
  • evencolor: 偶数番目のコメントの色を指定します。 デフォルトは白(#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>

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

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

エントリ，コメント，トラックバックをしましまにしたい場合は， それぞれ別のターゲット名をつけてください。

<MTEntries>
...
<div class="blogbody" style="background-color: <$MTStripeColor target="blogbody" oddcolor="#FFF4EA" evencolor="#FAFAFA"$>">
...
</MTEntries>
...
...
<MTPings>
<div class="trackback-body" style="background-color: <$MTStripeColor target="trackback-body" oddcolor="#E6E2D9" evencolor="#FAFAFA"$>">
<a href="<$MTPingURL$>"><$MTPingTitle$></a><br />
<$MTPingExcerpt$>
<span class="trackback-post" style="background-color: <$MTStripeColor target="trackback-post" oddcolor="#E6E2D9" evencolor="#FAFAFA"$>">
Trackbacked by: <$MTPingBlogName$> at <$MTPingDate$></span>
</div>
</MTPings>
...
<MTComments>
<div class="comments-body" style="background-color: <$MTStripeColor target="comments-body" oddcolor="#EFEFEF"$>">
<$MTCommentBody$>
<span class="comments-post" style="background-color: <$MTStripeColor target="comments-post" oddcolor="#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="<$MTStripeColor target="comments-body" oddcolor="comments-body-1" evencolor="comments-body-2"$>">
<$MTCommentBody$>
<span class="<$MTStripeColor target="comments-post" oddcolor="comments-post-1" evencolor="comments-post-2"$>">
Posted by <$MTCommentAuthorLink spam_protect="1"$> at <$MTCommentDate$></span>
</div>
</MTComments>

ご利用に関して

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

無保証

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

ご意見

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


更新履歴

  1. 2004年12月22日 バージョン 0.2 リリース [リリース情報]
    (stripecolor-0.2.tar.gz, stripecolor-0.2.zip)