MovableType.net 逆引き辞典

応用

記事一覧で3記事ごとに特定のclassを付ける

記事の一覧などで、記事ごとにスタイルを変えたい場合の方法です。
このような場合、mt:Ifopモディファイアを利用すると便利です。

使用するMTタグ

mt:Ifは条件分岐に使用するブロックタグです。
mt:Ifに、特殊な予約変数「__counter__」を使うことによって、mt:Entriesでループする毎に、1ずつ変数内の数値を増やすことができます。
その値に、opモディファイアで剰余(%)させ、Xvalue="X")で割った余りが0になるeq=0)場合に出力する、という処理を行っています。
これにより、X件ごとにクラス名をつけることができるので、CSSでの制御が可能です。

下記のサンプルでは「記事を6件取得して、3記事ごとに特定のclassを付ける」という記述をしています。

記述サンプル

記述例

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

出力結果のソース例

<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>