【Movable Type】リストをn個づつで並べる際、グループ単位でクラス「heightLine-group連番」をつける。

例えば、リストを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

となりますので、「本当に連番にしたい!」というなら、
もうちょっと長く書かないといけないと思います。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください