Post

Entry Thumbnails on MT Site 1

Posted in Web Creative.

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

Thumbnail

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

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

Entry Thumbnail

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

Entry 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を修正して、デザインを整形していきます。