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

Movable Type 備忘録

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

Aug122008
Vote:
http://bizcaz.com/archives/2008/08/12-162804.php
Categories: Tips
Tags: 4.2, Tips
Social Bookmark

Prev Page: 検索結果ページのページ分割をカスタマイズ
Next Page: 年別アーカイブ一覧

こんにちわ^^

訪問者さんからの質問で、リストの背景を交互に任意の背景を指定する方法についてご質問がありました。
なので、こちらのリストの背景／文字の色を交互に変えてみる for MT4でご紹介した方法を説明したのですが、2 色じゃなく 4 色で交互に設定したいとのことでしたのでご説明します。

こちらでご紹介する方法は Movable Type 4.1 later 専用です。
それ以前のバージョンで同じことを実現しようとしたら PHP を使用するか、プラグインの利用ということになります。プラグインに関しては MTRoundRobin プラグインというものがあります。 via: リストの背景／文字の色を交互に変えてみる

リストの背景を交互に表示する方法

任意の 4 色で交互に背景色を変更したいということなので、ループカウンタ( __counter__ 予約変数 )を 4 で割った余りに該当する色を設定すればいいことになります (￣∇￣)b
具体的には以下のようになります。

上記サンプルのコードは以下のようになります。

ラウンドリスト表示

<mt:SetVar name="color[0]" value="blue">
<mt:SetVar name="color[1]" value="red">
<mt:SetVar name="color[2]" value="green">
<mt:SetVar name="color[3]" value="pink">
<mt:SetVarBlock name="round"><mt:GetVar name="color" function="count"></mt:SetVarBlock>
<MTEntries lastn="11">
<MTEntriesHeader><ul id="roundlist"></MTEntriesHeader>
<mt:SetVarBlock name="n"><mt:GetVar name="__counter__" value="$round" op="%"></mt:SetVarBlock>
<li><a class="<mt:GetVar name="color[$n]">" href="<$MTEntryPermalink$>" title="<$MTEntryTitle$>"><mt:GetVar name="__counter__" zero_pad="2">. <$MTEntryTitle$></a></li>
<MTEntriesFooter></ul></MTEntriesFooter >
</MTEntries>

青字の部分で 4色分の背景クラス名称を指定した配列( color )を用意します。これは必ず [0] から始まって [4 - 1] 分の配列を作成する必要があります。
たとえば、これが 3 色分の場合には [0] から [2] の配列を用意することになります。

赤字の部分は __counter__ 予約変数の値を 4( 3 色の場合は 3 )で割った余りを取得しています。
説明するまでもないのですが 0 ～ 10 の値を 4 で割った余り確認してみてください。どんな値を割っても必ず 0 ～ 3 の余りになりますね (￣∇￣)b この余りを配列のインデックス( n )として使用します。

最後に緑字の部分で、インデックス( n )に該当する配列( color )でセットされた各背景色のクラス名称を指定しています。
ここで注意することは、__counter__ 予約変数は必ず '1' から始まりますのでお間違えのないように (￣∇￣)b

以上です。