Movable Type.net

MTタグ逆引き辞典

記事一覧で3記事毎に特定のclassを付けてCSSをコントロールする

記事一覧の中で、例えば3記事毎にスタイルを変える、といったケースもあります。

その場合は、opモディファイアを利用すると便利です。

テンプレート記述例

<ul>
<mt:Entries> <li class="list<mt:if name="__counter__" op="%" value="3" eq="0"> three</mt:if>"><$mt:EntryTitle encode_html="1"$></li> </mt:Entries> </ul>

mt:ifで使える特殊な予約変数「__counter__」を使うことによって、mt:Entriesでループする毎に1ずつ増えていきます。

その値に対して、opモディファイアで剰余(%)させ、3(value="3")で割ったあまりが0になる(eq=0)場合に出力する、という処理を行っています。

これにより、3件ごとにクラス名をつけることができるので、CSSで調整することができます。

出力結果のソース

<ul>
<li class="list">記事1</li>
<li class="list">記事2</li>
<li class="list three">記事3</li>
<li class="list">記事4</li>
<li class="list">記事5</li>
<li class="list three">記事6</li>
</ul>

使用したMTタグはこちら

Movable Type.net は無料トライアルが可能です。
Web制作者の方で、デモや評価利用をご希望の場合は、制作者向け評価ライセンスをご利用ください。

無料トライアル 資料ダウンロード 制作者向け評価ライセンス