Movable Typeのインストール方法、Movable Type用のプラグイン、Ajaxを使ったカスタマイズ例などをご紹介しています。「あんなことできないかなぁ」、「こんなことできたらいいなぁ」を形にしていきたいですの。

Movable Type 備忘録

リストの背景／文字の色を交互に変えてみる

Oct042006
Vote:
http://bizcaz.com/archives/2006/10/04-215208.php
Categories: Customize
Tags: Customize, MovableType, MTRoundRobin, Plugins
Social Bookmark

Prev Page: ベーシック・テンプレート
Next Page: 複数のブログ、テンプレートを選択して再構築する

以前、MovableTypeのコメント欄の色を交互に変えてみるでコメント欄の背景色を交互に変えるプラグインを紹介しました。

今回は何でも( というのは大げさですが… )交互に背景／文字の色を変えるカスタマイズをやってみました。

たとえば、わたしのブログのカスタマイズ・カテゴリのページをご覧ください。こんなかんじで交互に背景色を変えられます。もちろん背景色に合わせて文字の色も変更可能です。コメント一覧、トラックバック一覧、エントリなどの背景色も交互に変えられます。

これらを実現するのがMTRoundRobinプラグインです。

▼MTRoundRobinプラグインの入手はこちらから▼
http://dotclue.org/archives/000093.html

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

インストールはいつものようにmt/plugins/ディレクトリの中にアップロードするだけです。上記URLを訪問していただいて、画面下の方に"source code for RoundRobin"というリンクがあるので、そこからプラグインのコードをコピペしてRoundRobin.plというファイル名で保存します。

そして保存したRoundRobin.plをサーバにアップロードしてください。

テンプレートの変更

たとえば、"最近のエントリ一覧"の背景色を交互に変えたい場合は以下のようにします。

<ul class="module-list">
<MTRoundRobin set="#fafafa #ffffff">
<MTEntries>
<li class="module-list-item" style="background:<MTRoundRobin>;"><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li>
</MTEntries>
</ul>

青い字の部分で交互に表示する背景色を指定します。赤い字の部分で背景色を指定するためのスタイルを指定しています。
文字の色を交互に変える場合は以下のようになります。

<ul class="module-list">
<MTRoundRobin set="#fafafa #ffffff">
<MTEntries>
<li class="module-list-item" style="color:<MTRoundRobin>;"><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li>
</MTEntries>
</ul>

背景／文字の色をペアで交互に変える場合は以下の通り。

<ul class="module-list">
<MTRoundRobin set="#fafafa #666 #ddf #fff">
<MTEntries>
<li class="module-list-item" style="background-color:<MTRoundRobin>; color:<MTRoundRobin>;"><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li>
</MTEntries>
</ul>

青い字と赤い字のところで、背景／文字の色のペアを指定しています。そして緑の字の部分で背景／文字の色のスタイルを指定するわけです。

でも、ここで1つ問題がありまして、テンプレート内に色を固定してしまうと、変更したときにその都度再構築しなくてはならくなってしまいますね。そこで、スタイルシートを使って背景／文字の色を交互に変えてみました。

<ul class="module-list">
<MTRoundRobin set="roundrobin_eve roundrobin_odd">
<MTEntries>
<li class="module-list-item <MTRoundRobin>"><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li>
</MTEntries>
</ul>

スタイルシートは以下の通りです。

.roundrobin_eve {
color: #666;
background-color: #fafafa;
}
.roundrobin_odd {
color: #ddf;
background-color: #ffffff;
}

このようにすれば、背景／文字の色はもちろん、インデントを交互に変えてみたりなど自由度が増しますね時間がかかる再構築もする必要ありません。

クラス名を指定したことからお分かりになるように色にこだわる必要なくて、アイデア次第で何でも交互に変えることができそうです。

どうでしょう。今回はカンタンで、それでいて見ため的には楽しめそうなカスタマイズを紹介しました

では、SEE YOU

Edit
Permalink
4 Comments
No TrackBacks

Trackback Pings(0)

TrackBack URL for this entry:

No trackbacks found.

Comments(4)

#1: Posted by oscar @ October 5, 2006 [REPLY]

こんにちは、bzbellさん。
コメントするの、なんか久しぶり。

RoundRobin便利ですよねぇ。

「交互に」だけじゃなくて、４つおきにとか出来たりして。

#2: Posted by bzbell @ October 5, 2006 [REPLY]

>>1 oscar さん

こんにちわ^^

> 「交互に」だけじゃなくて、４つおきにとか出来たりして。

できましたΣ(￣Д￣；)
やってみるもんですね♪

#3: Posted by イケ @ July 6, 2007 [REPLY]

こんにちは、bzbllさん。
よく拝見させていただいております。

質問なんですが、
その４つおきってどうやったんですか？
よろしくです。

#4: Posted by bzbell @ July 6, 2007 [REPLY]

>>3 イケさん

こんにちわ^^

ご質問の件ですが、以下のようにすれば 4色の背景を表示することができます。

<ul>
<MTRoundRobin set="#ca8 #666 #ddf #303">
<MTEntries>
<li style="background-color:<MTRoundRobin>;"><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li>
</MTEntries>
</ul>

<MTRoundRobin set="#ca8 #666 #ddf #303"> で設定した色をすべて背景で使用すればいいわけです (￣∇￣)b
MTRoundRobin プラグインは設定した色を順番に割り当てるだけなので、前景／背景を意識してるわけではないんです。