MTの記事一覧や検索に、そのページのサムネイルを表示する方法

小林です。

Movable Type 4からカスタムフィールド機能が追加され、ウェブページやエントリーにフィールドを追加することができるようになりました。

カスタムフィールドではテキストやアイテムなどのフィールドを拡張することができるようになり、今回はそのアイテムを利用したアイデアをご紹介いたします。

まずは動作を確認してください。このサイトでは導入事例にサムネイルを付与していまして、検索結果にサムネイルを表示させています。

検索サムネイル一覧のサンプル

また、検索結果以外にも、導入事例一覧にはサムネイルを表示しています。

導入事例サムネイル一覧のサンプル

一覧にサムネイルが添付されると見やすくていいですよね。

というわけでやり方を。ここではウェブページを使って、実際にスカイアークのWEBサイトでやっているものをお見せいたします。

まずカスタムフィールドで「サムネイル」というフィールドを作ります。そしてフィールドの設定は下記のように設定します。

テンプレートタグ名は任意です。ここではMTPageThumbnailとなるように記入しました。これで準備は完了です。実際にサムネイルを登録します。

ウェブページの作成画面に移動すると、サムネイルという項目が追加されていると思います。（見えない場合は右上の表示オプションをクリックしてサムネイルという項目を選択してください。）

サムネイルに任意の画像を選択します。「画像の選択」をクリックして画像をアップロードして設定すると下記のようになります。

これでページの設定は完了です。

そして今度はサムネイルを出力させるためのテンプレートを設定します。ここではdlタグで一覧を出力するやり方をご紹介いたします。

<dl>
<MTPages>
    <dt><a href="<$MTPagePermaLink$>"><$MTPageTitle$></a></dt>
    <dd>
        <p>
            <MTPageThumbnailAsset>
                <a href="<$MTPagePermaLink$>"><img src="<$MTAssetThumbnailURL width="100"$>" alt="<$MTPageTitle$>" /></a>
            </MTPageThumbnailAsset>
            <$MTPageExcerpt$>
        </p>
        <ul>
        <MTPageTags>
            <li><a href="<$MTTagSearchLink$>"><$MTTagName$></a></li>
        </MTPageTags>
        </ul>
    </dd>
</MTPages>
</dl>

ここではMTPageThumbnailAssetというタグを利用しています。「MTカスタムフィールドで指定した値Asset」とするとカスタムフィールドで指定したアセットを呼び出してくることが出来ます。あとはMTAssetThumbnailURLでサムネイルを呼び出せばOK。ここでは幅100に指定しています。このやり方だとサムネイルがない場合はタグがそもそも出ませんので、サムネイルを登録していない場合は何も出ません。ここれではサムネイルと同時に概要（MTPageExcerpt）とそのウェブページに所属しているタグの一覧も出力しています。

さて、実際にタグを入れたページを再構築するとどうなるでしょう。このタグはこのページから持ってきましたので、このページで使われているMTタグと一緒です。

イントラWEB構築事例 | スカイアークシステム

このように、カスタムフィールドをうまく活用すると、テキストばかりのウェブサイトから脱却できて、より閲覧者の方が使いやすいウェブサイトを作ることが出来ます。

これを参考にしていろいろとチャレンジしてみてください。