【Movable Type】記事一覧で特定の記事だけHTMLの構成を変更する方法

Posted on 2021-06-08

サイトトップなどに最新の記事を何件か表示してそのうち一番新しい記事だけサムネイル画像や本文を表示するなど、他とは異なるHTML構成にしたい場合などがあるかと思いますがそんなときのメモです。

予約変数を使用する

MTEntriesなどループ処理をおこなうブロックタグ内では特殊な予約変数が使えるのでそれを利用してHTMLの構成を変更します。

以下は最新の記事5件のうち特定の記事にだけ本文を表示させる例で、mt:EntryBodyについているモディファイアの意味は以下になります。

remove_html=”1″：HTMLタグを除く
strip_linefeeds=”1″：改行コードを除く
trim_to=”30+…”：30文字以上の場合は省略して末尾に「…」をつける

最初の記事だけ構成を変える

最初の記事だけ変更するには「__first__」を使用します。

<mt:Entries lastn="5">
<mt:EntriesHeader><ul></mt:EntriesHeader>
<li>
<a href="<mt:EntryPermalink>">
<mt:EntryTitle>
<mt:if name="__first__">
<p><mt:EntryBody remove_html="1" strip_linefeeds="1" trim_to="30+..."></p>
</mt:if>
</a>
</li>
<mt:EntriesFooter></ul></mt:EntriesFooter>
</mt:Entries>

出力例

・記事1のタイトル
　　記事1の本文です。30文字以上は省略されます。
・記事2のタイトル
・記事3のタイトル
・記事4のタイトル
・記事5のタイトル

最後の記事だけ構成を変える

最後の記事だけ変更するには「__last__」を使用します。

<mt:Entries lastn="5">
<mt:EntriesHeader><ul></mt:EntriesHeader>
<li>
<a href="<mt:EntryPermalink>">
<mt:EntryTitle>
<mt:if name="__last__">
<p><mt:EntryBody remove_html="1" strip_linefeeds="1" trim_to="30+..."></p>
</mt:if>
</a>
</li>
<mt:EntriesFooter></ul></mt:EntriesFooter>
</mt:Entries>

出力例

・記事1のタイトル
・記事2のタイトル
・記事3のタイトル
・記事4のタイトル
・記事5のタイトル
　　記事5の本文です。30文字以上は省略されます。

偶数記事だけ構成を変える

偶数の記事だけ変更するには「__even__」を使用します。

<mt:Entries lastn="5">
<mt:EntriesHeader><ul></mt:EntriesHeader>
<li>
<a href="<mt:EntryPermalink>">
<mt:EntryTitle>
<mt:if name="__even__">
<p><mt:EntryBody remove_html="1" strip_linefeeds="1" trim_to="30+..."></p>
</mt:if>
</a>
</li>
<mt:EntriesFooter></ul></mt:EntriesFooter>
</mt:Entries>

出力例

・記事1のタイトル
・記事2のタイトル
　　記事2の本文です。30文字以上は省略されます。
・記事3のタイトル
・記事4のタイトル
　　記事4の本文です。30文字以上は省略されます。
・記事5のタイトル

奇数記事だけ構成を変える

奇数の記事だけ変更するには「__odd__」を使用します。

<mt:Entries lastn="5">
<mt:EntriesHeader><ul></mt:EntriesHeader>
<li>
<a href="<mt:EntryPermalink>">
<mt:EntryTitle>
<mt:if name="__odd__">
<p><mt:EntryBody remove_html="1" strip_linefeeds="1" trim_to="30+..."></p>
</mt:if>
</a>
</li>
<mt:EntriesFooter></ul></mt:EntriesFooter>
</mt:Entries>

出力例

・記事1のタイトル
　　記事1の本文です。30文字以上は省略されます。
・記事2のタイトル
・記事3のタイトル
　　記事3の本文です。30文字以上は省略されます。
・記事4のタイトル
・記事5のタイトル
　　記事5の本文です。30文字以上は省略されます。

最初の2件だけ構成を変える

最初の2件だけを変更するにはループした回数を格納する「__counter__」を使用します。
指定した値以下の場合に実行するleを以下のように合わせて指定します。

<mt:Entries lastn="5">
<mt:EntriesHeader><ul></mt:EntriesHeader>
<li>
<a href="<mt:EntryPermalink>">
<mt:EntryTitle>
<mt:if name="__counter__" le="2">
<p><mt:EntryBody remove_html="1" strip_linefeeds="1" trim_to="30+..."></p>
</mt:if>
</a>
</li>
<mt:EntriesFooter></ul></mt:EntriesFooter>
</mt:Entries>

出力例

・記事1のタイトル
　　記事1の本文です。30文字以上は省略されます。
・記事2のタイトル
　　記事2の本文です。30文字以上は省略されます。
・記事3のタイトル
・記事4のタイトル
・記事5のタイトル

最後の2件だけ構成を変える

最後の2件だけを変更するのも先程同様に「__counter__」を使用します。
指定した値以上の場合に実行するgeを以下のように合わせて指定します。

<mt:Entries lastn="5">
<mt:EntriesHeader><ul></mt:EntriesHeader>
<li>
<a href="<mt:EntryPermalink>">
<mt:EntryTitle>
<mt:if name="__counter__" ge="4">
<p><mt:EntryBody remove_html="1" strip_linefeeds="1" trim_to="30+..."></p>
</mt:if>
</a>
</li>
<mt:EntriesFooter></ul></mt:EntriesFooter>
</mt:Entries>

出力例

・記事1のタイトル
・記事2のタイトル
・記事3のタイトル
・記事4のタイトル
　　記事4の本文です。30文字以上は省略されます。
・記事5のタイトル
　　記事5の本文です。30文字以上は省略されます。

3件目だけ構成を変える

特定の記事だけを変更するのにも「__counter__」を使用します。
指定した値の場合に実行するeqを以下のように合わせて指定します。

<mt:Entries lastn="5">
<mt:EntriesHeader><ul></mt:EntriesHeader>
<li>
<a href="<mt:EntryPermalink>">
<mt:EntryTitle>
<mt:if name="__counter__" eq="3">
<p><mt:EntryBody remove_html="1" strip_linefeeds="1" trim_to="30+..."></p>
</mt:if>
</a>
</li>
<mt:EntriesFooter></ul></mt:EntriesFooter>
</mt:Entries>

出力例

・記事1のタイトル
・記事2のタイトル
・記事3のタイトル
　　記事3の本文です。30文字以上は省略されます。
・記事4のタイトル
・記事5のタイトル

3件目以外の構成を変える

特定の記事以外を変更するのにも「__counter__」を使用します。
指定した値以外の場合に実行するneを以下のように合わせて指定します。

<mt:Entries lastn="5">
<mt:EntriesHeader><ul></mt:EntriesHeader>
<li>
<a href="<mt:EntryPermalink>">
<mt:EntryTitle>
<mt:if name="__counter__" ne="3">
<p><mt:EntryBody remove_html="1" strip_linefeeds="1" trim_to="30+..."></p>
</mt:if>
</a>
</li>
<mt:EntriesFooter></ul></mt:EntriesFooter>
</mt:Entries>

出力例

・記事1のタイトル
　　記事1の本文です。30文字以上は省略されます。
・記事2のタイトル
　　記事2の本文です。30文字以上は省略されます。
・記事3のタイトル
・記事4のタイトル
　　記事4の本文です。30文字以上は省略されます。
・記事5のタイトル
　　記事5の本文です。30文字以上は省略されます。

以上、予約変数を使用して特定の記事だけHTMLの構成を変更する方法でした。

今回は本文の出し分けだけですが<li>の中身ごと出し分けたりすればもっと自由にHTMLを変更することができます。

おしまい。

Movable Type