例えば、リストを3つづつ横に並べたグループを作成するとして、
| 画像 | 画像 | 画像 |
|タイトル|タイトル|タイトル|
| 本文 | 本文 | 本文 |
で並ぶ際に、タイトル要素の高さを揃えることで、
本文の開始位置を横に並ぶ要素間で揃えたい時に使います。
テンプレート
<MTEntries category="カテゴリー名" sort_by="title" sort_order="ascend"><MTSetVar name="count" value="1" op="+"><MTIf name="__counter__" op="%" value="3" eq="1"> <div class="threeColumnsType clearfix"> <div class="column clearfix"> <div class="image"><MTIf tag="画像カスタムフィールドのテンプレートタグ"><img src="<MT画像カスタムフィールドのテンプレートタグAsset><$MTAssetThumbnailURL regex_replace="/^.+?://.+?//","/" width="298"$></MT画像カスタムフィールドのテンプレートタグAsset>" alt=""></MTIf></div> <div class="txt"> <h3 class="heightLine-group0<MTVar name="__counter__" op="+" value="2">"><$MTEntryTitle remove_html="1"$></h3> <p><$MTEntryBody$></p> </div> </div><MTElseIf name="__counter__" op="%" value="3" eq="0"> <div class="columnEnd clearfix"> <div class="image"><MTIf tag="画像カスタムフィールドのテンプレートタグ"><img src="<MT画像カスタムフィールドのテンプレートタグAsset><$MTAssetThumbnailURL regex_replace="/^.+?://.+?//","/" width="298"$></MT画像カスタムフィールドのテンプレートタグAsset>" alt=""></MTIf></div> <div class="txt"> <h3 class="heightLine-group0<MTVar name="__counter__" op="+" value="0">"><$MTEntryTitle remove_html="1" decode_html="1"$></h3> <p><$MTEntryBody$></p><MTIf tag="EntryDataCharactorImgCaption"> <p class="caption"><MTEntryDataCharactorImgCaption></p></MTIf> </div> </div> </div><MTElse> <div class="column clearfix"> <div class="image"><MTIf tag="EntryDataCharactorImg"><img src="<MTEntryDataCharactorImgAsset><$MTAssetThumbnailURL regex_replace="/^.+?://.+?//","/" width="298"$></MTEntryDataCharactorImgAsset>" alt="" width="298"></MTIf></div> <div class="txt"> <h3 class="heightLine-group0<MTVar name="__counter__" op="+" value="1">"><$MTEntryTitle remove_html="1" decode_html="1"$></h3> <p><$MTEntryBody$></p><MTIf tag="EntryDataCharactorImgCaption"> <p class="caption"><MTEntryDataCharactorImgCaption></p></MTIf> </div> </div></MTIf> </MTEntries>
再構築結果
<div class="threeColumnsType clearfix"> <div class="column clearfix"> <div class="image"><img src="/公開パス/assets_c/2015/03/img_1-thumb-298xauto-13588.jpg" alt=""></div> <div class="txt"> <h3 class="heightLine-group03">タイトル</h3> <p>本文</p> </div> </div> <div class="column clearfix"> <div class="image"><img src="/公開パス/assets_c/2015/03/img_2-thumb-298xauto-13589.jpg" alt="" width="298"></div> <div class="txt"> <h3 class="heightLine-group03">タイトル</h3> <p>本文</p> </div> </div> <div class="columnEnd clearfix"> <div class="image"><img src="/公開パス/assets_c/2015/03/img_5-thumb-298xauto-13591.jpg" alt=""></div> <div class="txt"> <h3 class="heightLine-group03">タイトル</h3> <p>本文</p> </div> </div> </div>
heightLine-group03
heightLine-group06 …とグループごとに連番が増えていきます。
足りない分を足してるだけです。
使用しているJSはこれです↓。
ブロックレベル要素の高さを揃えるheightLine.js
解説
<MTIf name="__counter__" op="%" value="3" eq="1"> <!--ループした回数を3で割って、余り1の時--> <h3 class="heightLine-group0<MTVar name="__counter__" op="+" value="2">"> <!--2を足します。--> <MTElseIf name="__counter__" op="%" value="3" eq="0"> <!--3で割って、余り0の時--> <h3 class="heightLine-group0<MTVar name="__counter__" op="+" value="0">"> <!--0を足します。--> <MTElse> <!--3で割って、余り2の時--> <h3 class="heightLine-group0<MTVar name="__counter__" op="+" value="1">"> <!--1を足します。--> </MTIf></MTEntries>
※name=”__counter__” ループした回数を格納します。ループした回数だけ1ずつ増えていきます。つまり、何番目に呼び出された要素なのかが分かります。
上記MTIfの順番だと、「__counter__」が
1 3 2
4 6 5
と、並んでいきますので、「nを足します。」を実行すると
(1+2)=3 (3+0)=3 (2+1)=3
(4+2)=6 (6+0)=6 (5+1)=6
ただ、このままだと、
一列目はheightLine-group03
二列目はheightLine-group06
となりますので、「本当に連番にしたい!」というなら、
もうちょっと長く書かないといけないと思います。