MTタグ逆引き辞典

記事一覧で最初の3件は違うDOM構造にする

記事一覧で表示する記事のうち、最初の数件はサムネイル画像と記事タイトルを表示させて、他の記事は記事タイトルだけにしたいケースも多いでしょう。その場合は、MTEntriesで取得した記事にMTIFで条件分岐を追加します。

下記記述例では、記事を10件取得して、最初の3件だけ画像を表示させています。

テンプレート記述例

<mt:Entries lastn="10">
	<div class="">
		<mt:If name="__counter__" le="3">
			<mt:EntryAssets lastn="1">
				<div class=""><img src="<$mt:AssetThumbnailURL width="160"$>" /></div>
			</mt:EntryAssets>
		</mt:If>
		<h2 class=""><$mt:EntryTitle$></h2>
		<div class=""><$mt:EntryBody convert_breaks="0" remove_html="1" words="100"$>...</div>
		<div class=""><a href="<$mt:EntryLink$>">つづきを読む</a></div>
	</div>
</mt:Entries>

MTEntriesは記事一覧を取得するブロックタグです。上記例で設定している「lastn(取得する記事件数)」のほかに「category(カテゴリ)」、「categories(複数のカテゴリを設定)」「sort_order(並べる順序を指定)」「author(特定のユーザーの記事)」などのフィルタリングができます(詳しくはMTEntries参照)。

MTIfでは条件分岐に使用するブロックタグです。__counter__はループ回数を取得する変数で、leの条件を記述し3件以下の場合に、MTIf内の記述を実行するようにしています。__counter__を含め、以下の変数を設定できます。

  • __first__ ... ループ出力の最初である場合 true (1) となる。
  • __last__ ... ループ出力の最後である場合 ture (1) となる。
  • __odd__ ... ループ出力の奇数回目の場合 ture (1) となる。
  • __even__ ... ループ出力の偶数回目の場合 ture (1) となる。
  • __index__ ... ループのインデックスを格納する。
  • __counter__ ... ループした回数を格納する。

MTEntryAssetsはブログで利用しているアイテム(画像など)を一覧で表示させるためのブロックタグです。lastnで指定した分の画像を取得し、利用しているアイテムがあればMTAssetThumbnailURLでその画像のサムネイル画像URLを取得しています。widthで画像の横幅を指定しています。指定できる幅は、80,120,160,240,320,480 のいずれかです。

MTEntryTitleは記事のタイトル、MTEntryBodyは記事の本文を取得するMTタグです。記述例では、MTEntryBodyに「convert_breaks(改行の変換有無)」、「remove_html(HTMLタグを取り除くかどうか)」、「words(取得する文字数)」を設定しています。MTEntryLinkは記事のURLを取得するタグです。各タグの詳細については、MovableType.netタグマニュアルを参照ください。


出力結果は以下のようになります。

出力例

記事タイトルA

記事タイトルAの本文...

記事タイトルB

記事タイトルBの本文...

記事タイトルC

記事タイトルCの本文...

記事タイトルD

記事タイトルDの本文...

記事タイトルE

記事タイトルEの本文...

記事タイトルF

記事タイトルFの本文...

記事タイトルG

記事タイトルGの本文...

記事タイトルH

記事タイトルHの本文...

記事タイトルI

記事タイトルIの本文...

記事タイトルJ

記事タイトルJの本文...

使用したMTタグはこちら

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

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