Entry Thumbnails on MT Site 1

21September2009

Movable TypeはVer4になってから、サムネイルの書き出しが自動で行われるようになりました。それに伴い、サムネイル付きの「最近のブログ記事」を掲載するMTサイトも頻繁に目撃するように。今までこの辺の領域は踏み込んだことがなかったのを、リニューアルをきっかけに調査・設置してみました。

Thumbnail

サムネイルを表示すると、内容によりますが見栄えが良くなり可視性も高くなります。サイドバーに「最近のブログ記事」の代わりに記載するのが、一番メジャーで無難ではないかと思い、早速設置テストを行いました。

通常のテンプレートだと、「最近の記事」は以下のように表示します。

これを以下のように変更していきます。

少しバランスが悪いのですが、次回エントリーで整形していきたいと思います。

「最近のブログ記事」Widget

まず、Movable Type管理画面の「デザイン」から「ウィジェット」ページに移動し、「最近のブログ記事」を修正していきます。デフォルトでは、以下のソース。

<mt:If tag="BlogEntryCount">
    <mt:Entries lastn="10">
        <mt:EntriesHeader>
<div class="widget-recent-entries widget-archives widget">
    <h3 class="widget-header">最近のブログ記事</h3>
    <div class="widget-content">
        <ul>
        </mt:EntriesHeader>
            <li><a href="<$mt:EntryPermalink$>"><$mt:EntryTitle$></a></li>
        <mt:EntriesFooter>
        </ul>
    </div>
</div>
        </mt:EntriesFooter>
    </mt:Entries>
</mt:If>

これを以下に上書きします。

<mt:If tag="BlogEntryCount">
    <mt:Entries lastn="10">
        <mt:EntriesHeader>
<div class="widget-recent-entries widget-archives widget">
    <h3 class="widget-header">最近のブログ記事</h3>
    <div class="widget-content">
        <dl>
        </mt:EntriesHeader>
            <dt>
                <MTEntryAssets type="image" lastn="1">
                    <a href="<$mt:EntryPermalink$>"><img src="<$MTAssetThumbnailURL height="30" width="30"$>" alt="<$MTEntryTitle$>" /></a>
                </MTEntryAssets>
            </dt>
            <dd>
                <a href="<$mt:EntryPermalink$>"><$mt:EntryTitle$></a>
            </dd>
        <mt:EntriesFooter>
        </dl>
    </div>
</div>
        </mt:EntriesFooter>
    </mt:Entries>
</mt:If>

修正した部分は

<li><a href="<$mt:EntryPermalink$>"><$mt:EntryTitle$></a></li>

この部分を以下に変更しました。

<dl>
</mt:EntriesHeader>
    <dt>
        <MTEntryAssets type="image" lastn="1">
            <a href="<$mt:EntryPermalink$>"><img src="<$MTAssetThumbnailURL height="30" width="30"$>" alt="<$MTEntryTitle$>" /></a>
        </MTEntryAssets>
    </dt>
    <dd>
        <a href="<$mt:EntryPermalink$>"><$mt:EntryTitle$></a>
    </dd>
<mt:EntriesFooter>
</dl>

まずは<ul>のリストタグ構造から<dl>の構造に変更しました。「<MTEntryAssets type="image" lastn="1">」ですが、これは「エントリー画像を一個だけ取り出す」と認識してください。

そして、「<img src="<$MTAssetThumbnailURL height="30" width="30"$>" alt="<$MTEntryTitle$>" />」で「サムネイル画像縦横30pxを生成表示」という意味です。

サムネイル画像はブログ公開ディレクトリの「assets_c」内に自動生成されてリンクされますので、この辺は普段は気にしないで大丈夫でしょう。

「height」と「width」を変更することにより、サムネイル画像のサイズの調整ができますので、自分のサイトにあわせたサイズに変更してみてください。

次回はCSSを修正して、デザインを整形していきます。