Movable Type(MT5)の記事リストやトップページにサムネイル画像を自動表示する方法・手順

Movable Typeとの格闘はまだまだ続きます。

デフォルトのデザインには、サムネイル画像を記事一覧やトップ画像に表示するようになっていなかったので、表示させてみました。
やhり写真の訴求力というのは非常に強いもので、フェイスブックがなぜあそこまで流行ったかってのも、結局写真すよ、写真。

フォトをみんなで共有してワイワイやるのが楽しいわけですよ、あれは。
タイムラインも思いっきり写真のインパクトが問われますしね。

というわけで、ブログ記事一覧にもサムネイルが表示されるといいな、ということで手順を説明。

おそらく一番簡単な方法だと思います。

なにかプラグインを入れたりする方法もあるでしょうけど、既存のテンプレートにちょこっとコードを追加すればできてしまうので、それでいきます。
ファイルやテンプレートは増やさないにこしたことはありません。ブログ重くなるだけなんで。

まずは、Movable Typeの管理画面（ダッシュボード）にログイン

デザイン　→　テンプレート　→　テンプレートモジュール
そして「テンプレートモジュールの作成」をクリック

↓

以下のコードを追加します。

[sourcecode language=”plain”]<MTEntryAssets type="image" lastn="1">
<img src="<$MTAssetThumbnailURL height="250"$>" align="alignleft" alt="<$MTEntryTitle$>" />
</MTEntryAssets>[/sourcecode]

追加する場所は、エントリー本文の上くらいがいいでしょう。記事一覧がサムネ＋本文概要で表示されるようになります。

僕のテンプレートでは、
[sourcecode language=”plain”] <div class="asset-content entry-content">
<mt:If tag="EntryBody">[/sourcecode]

の下に入れました。

サイズはお好みでブログに合わせて調節してください。

[sourcecode language=”plain”]<img src="<$MTAssetThumbnailURL height="250"$>[/sourcecode]

の部分のheightの数字を入れ替えれば高さを設定できます。
高さではなく、横幅で調節したい人は、heightとwidthに入れ替えてください。

これで、トップページもカテゴリ一覧も検索結果も全ての記事一覧ページでサムネイルが表示されます。

出来上がりはこんな感じです。

サムネ表示が完了したら、あとは魅力的な写真をブログにアップしていくだけです。
フォトショなどを使っていろいろ加工・補正していきましょう。