MD-Blog_Web System

Movable Typeケーススタディ： 「記事一覧を、初期状態では5件表示して、それ以降は10件ごとに <div> で囲みたい」

最初は数件だけ表示しておいて、それ以降はもっと読む、moreボタンなどをクリックで表示するパターンですね。

こういった場合では、◯件ごとにタグを差し込みたいので、いまループ処理の何回目かを知る必要があります。

ムーバブルタイプでは、あらかじめ何回目かという変数が用意されているので今回はそれを使います。
もちろん自分で値を用意して、カウントアップしても構いません。

ブロックタグに利用できる予約変数

ブロックタグにはあらかじめ用意されている変数（予約変数）があります。
以下以外の変数については「ブロックタグに利用できる予約変数 ＠Movable Typeドキュメント」を参照してください。

＿＿counter＿＿

ループの回数が格納されます。＜mt:If＞をつかって、今ループの何回目かを判断したりします。
値は1から始まります。

＿＿first＿＿

ループの最初。 ＜mt:Entries＞内であれば、＜mt:EntriesHeader＞と同意。

＿＿last＿＿

ループの最後。 ＜mt:Entries＞内であれば、＜mt:EntriesFooter＞と同意。

10記事ごとに特定の処理をしたい

まずは、10記事ごとに <div> で囲う処理を考えてみます。
カウント変数（＿＿counter＿＿）を「10」で割って、「余り」が「0」だったときというのは、ループの11回目の時になりますね。
11個目の記事を表示する前に、 <div> タグを挟み込めばいいということになります。

以下、例。

<mt:Entries lastn="0">
<mt:If name="__first__">
<div class="entryList">
</mt:If>

<mt:if name="__counter__" op="mod" value="10" eq="0">
</div>
<div class="entryList">
</mt:If>

<$mt:Include module="ブログ記事の概要"$>

<mt:If name="__last__">
</div>
</mt:If>
</mt:Entries>

コード解説

「name="＿＿counter＿＿" op="mod" value="10" eq="0"」
「＿＿counter＿＿」変数を、
「value="10"」10で、
「op=mod」 割って、
「eq="0"」余りが0だった場合
となります。

ちなみに、変数を10で割った余り（剰余）は以下のようになります。

0～15の数字　 ： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
10で割った余り： 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6

上記の数字の並びを見ていくと、余りが5の時がちょうど間隔が5、10、10...と見えてきますね。
なので、「name="＿＿counter＿＿" op="mod" value="10" eq="5"」とすれば、命題の通り5件、10件、10件と <div> で囲うことができます。

もし、5件の部分を10件とはちがうタグで囲みたいならば以下のようにすれば可能です。

<mt:Entries lastn="0">
<mt:If name="__first__">
<div class="entryList-first">
</mt:If>

<mt:if name="__counter__" eq="6">
</div>
<div class="entryList">
<mt:Else>
<mt:if name="__counter__" op="mod" value="10" eq="5">
</div>
<div class="entryList">
</mt:If>
</mt:Else>
</mt:If>

<$mt:Include module="ブログ記事の概要"$>

<mt:If name="__last__">
</div>
</mt:If>
</mt:Entries>

コード解説

まずカウント1の時に、5件用のタグが始まり、
カウントが5の時に、5件用のタグを閉じて10件用のタグを始めます。
それ以降は、「10で割って5余り」の処理を適用します。

それでは、また次回「Movable Typeケーススタディ」にて。