ムーバブルタイプでコメント欄の色を交互に変えるプラグイン

以前から、やりたかったコメント欄の色を交互に変えるプラグインを見つけたので、このブログにも先日導入したので、そのプラグインのご紹介と導入方法をメモ。

具体的にどういったことをしたかったのかといいますと。。。

こんな風に↑しましまにコメント欄の色を変えたかっただけ。。。でございます・・・

コメントの数が増えてくると、結構読みづらかったので、導入してみました。意外と簡単どえす。

1. プラグインをダウンロードする

このプラグインを配布されているnlog(n)さんのサイトからプラグインをダウンロードする。

2. プラグインをアップロードする。
ダウンロードしたファイルを解凍してムーバブルタイプのpluginsディレクトリにアップロードします。
ムーバブルタイプの管理画面のプラグインのところに

stripecommentcolor.gif

こんなん↑出てたらとりあえずインストール完了で。

3. テンプレートにタグを入れる
いろいろ、やり方ありますが、CSSを交互に表示するやり方が一番いい感じかと思われるので、そのやり方を。。テンプレートの<MTComments>から</MTComments>で囲まれてる部分を・・・

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

こんな風に↑テンプレート書き換えて、CSSに”comments_odd”と”comments_even”を書き加えたらええわけです。

ちなみにこのブログではCSSは

.comments_odd {
margin: 0 0 10px 0;
padding: 10px;
border: 1px solid #F2F2F2;
background: #FFF;
}

.comments_even {
margin: 0 0 10px 0;
padding: 10px;
border: 1px solid #F2F2F2;
background: #F8FFE9;
}

こんな風に↑CSSを付け足してみました。これで、偶数番目のコメントの背景は白。奇数番目のコメントは
薄いグリーンになるわけです。

デザインblogランキング

コメント No Comments »   はてなブックマーク   del.icio.us

この記事に関連する記事



No Responses to “ムーバブルタイプでコメント欄の色を交互に変えるプラグイン”

  1. さえら Says:

    こんにちは。はじめまして。
    トラックバックありがとうございました。

  2. 管理人 Says:

    さえらさん
    わざわざ、コメントいただきまして、ありがとうございます。さえらさんのブログ、非常にかわいらしいブログですねぇ。今後ともよろしくお願いいたします~。

この記事に対するコメントを残す




この記事のトラックバックURL

広告掲載のお問い合わせはこちら

検索

Google

カテゴリーアーカイブ

最近の記事

タグ・クラウド

月別アーカイブ

Agile Media Network パートナーブログ