はじめに

こんばんは。様々なニュースサイトや新聞社サイト等で見られる手法として「リスト表示された記事一覧の記事毎にアイキャッチ画像を添える」といったものがあります。

Movable Typeでは4.1から標準機能となった「カスタムフィールド」を活用することで容易にそれを実現できます。今回はMovable Type 4.25のブログ記事リスト・テンプレート（旧カテゴリアーカイブ/月別アーカイブ・テンプレート）の記事リストにサムネイルを表示させる方法を紹介します。

また、今回の記事作成には、「Movable Type 4.X クリエイターが身につけておくべき新・100の法則」の法則79を参考にして解説を進めていきます。

今回想定しているユーザは、今までMovable Typeを利用して、記事を書いていたけれど、カスタムフィールドには触ったことがない。そんなユーザです。

１、カスタムフィールドの初期設定

ブログのダッシュボード＞「設定」＞「カスタムフィールド」を選択。

フィールドが1つも作成されていません。フィールドを作成をクリックします。

カスタムフィールドの作成画面になるので以上のように設定して、保存ボタンを押します。

つぎにブログ記事の編集/作成画面に移りましょう。ここでページ右上部にある「表示オプション」をクリックして、表示項目に「アイキャッチ」を追加してください。

するとこのように、ブログ記事の編集/作成画面に、「アイキャッチ」という項目が追加されます。

２、記事へのアイキャッチ画像の設定

それでは実際に記事にアイキャッチ画像を設定（挿入）してみましょう。先ほどの「アイキャッチ」という項目の「画像を選択」というボタンを押してみましょう。すると以下のような画面になります。既存のアイテムから選択することも出来ます。今回は新規に画像をアップロードしてみます。

アップロード先は既存のフォルダ（ディレクトリ）名と重複しなければ各自の任意でかまいません。ここではimagesと名づけたフォルダにアップロードする設定にしました。

アップロードに成功すると、記事作成/編集画面に以下のように表示されます。保存ボタンを押して、変更を保存しましょう。

３、アイキャッチ画像を用意していない記事に表示する代替画像を用意する

全ての記事にアイキャッチ画像を設定するのは無理かもしれません。アイキャッチを設定していない記事では「No Image」と描かれた代替画像を表示するのが無難だと思います。そのために代替画像を用意しましょう。

こんな感じで。もし面倒くさいという方はこちらの画像をお持ち帰りください。

そして用意した画像をFTPソフトを利用して、先ほどアイキャッチ画像のアップロード先に指定したディレクトリにアップロードします。

４、テンプレートの編集

いよいよ、テンプレートの編集です。今回リスト表示された記事にアイキャッチ画像を添えることが目的なので、適しているのは「カテゴリ別ブログ記事リスト・テンプレート」、「月別ブログ記事リスト・テンプレート」などと思われます。Movable Type 4.2Xではこのような表現ですが、Movable Type 4.0X～4.1Xでは「ブログ記事リスト・テンプレート」という形でひとつにまとめられているテンプレートです。今回は「カテゴリ別ブログ記事リスト・テンプレート」を例にとって話を進めていきます。

以下はカテゴリ別ブログ記事リスト・テンプレートの42～45行目の記述です。

<mt:Entries limit="$limit">
    <mt:Ignore><!-- Use the Entry Summary module for each entry published on this page --></mt:Ignore>
    <$mt:Include module="ブログ記事の概要"$>
</mt:Entries>

ここではMTEntriesというコンテナタグで記事（Entry）に関する内容を繰り返すための記述が為されています。「ブログ記事の概要」というテンプレート・モジュールを引っ張ってきているのですがこの記述をこのように変えてみます。

<mt:Entries limit="$limit">
    <mt:Ignore><!-- Use the Entry Summary module for each entry published on this page --></mt:Ignore>
    <div id="entry-<$mt:EntryID$>" class="entry-asset asset hentry">
    <p class="eyecatch"><img src="<MTIfNonEmpty tag="EntryDataEyecatch"><MTEntryDataEyecatchAsset><$MTAssetURL$></MTEntryDataEyecatchAsset><MTElse><$MTBlogURL$>images/no_image.jpg</MTIfNonEmpty>" border="1" alt="<MTEntryTitle>のアイキャッチ画像" width="60" /></p> 
    <h2 class="asset-name entry-title"><a href="<$mt:EntryPermalink$>" rel="bookmark"><$mt:EntryTitle$></a></h2>
    <p class="entry-excerpt entry-summary"><$MTEntryExcerpt$></p>
    </div>
</mt:Entries>

img要素の参照先がこの記述のポイントです。

<MTIfNonEmpty tag="EntryDataEyecatch">
<MTEntryDataEyecatchAsset><$MTAssetURL$></MTEntryDataEyecatchAsset>
<MTElse>
<$MTBlogURL$>images/no_image.jpg
</MTIfNonEmpty>

わかりやすく改行を施すとこのようになります。サムネイルを表示させるためにAssetタグを使い画像までのパスを表示するようにしています。MTEntryDataEyecatchAssetはカスタムテンプレートの設定の際に指定したテンプレートタグの末尾に「Asset」を追加したものです。Assetをつけたテンプレートタグはコンテナタグになるのでその中で、MTAssetsタグと同様にアイテム表示用のタグが利用できます。ここではMTAssetURLタグを用いてアイキャッチ画像へのパスを出力させています。

最後にCSSでスタイルを定義します。インデックステンプレートのなかのスタイルシートテンプレートに（最低）以下の記述を追加してやればＯＫです。

.eyecatch {
border: 1px solid #aaa;
padding: 4px;
width:60px;
float: left;
margin-right:12px;
}

５、完成！

１～５までのカスタマイズを経てできた表示がこちらです。カテゴリーアーカイブを表示しています。

いかがでしたでしょうか？行程は一見複雑に見えますが、理解してしまえば仕組みはシンプルなものです。各自テンプレートタグの記述、HTMLのマークアップ、CSSの記述などにアレンジを加えてサイト作りに役立ててみてください。

Movable Type 4.x 本格的CMSサイトを構築するためのMTスーパーテクニック クリエイターが身につけておくべき新・100の法則。 加藤 善規 インプレスジャパン 2008-09-12 by G-Tools