Entry Thumbnails on MT Site 1

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

Thumbnail

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

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

Entry Thumbnails on MT Site 1

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

Entry Thumbnails on MT Site 1

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

「最近のブログ記事」Widget

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

&lt;mt:If tag=&quot;BlogEntryCount&quot;&gt;<br />
&lt;mt:Entries lastn=&quot;10&quot;&gt;<br />
&lt;mt:EntriesHeader&gt;<br />
&lt;div class=&quot;widget-recent-entries widget-archives widget&quot;&gt;<br />
&lt;h3 class=&quot;widget-header&quot;&gt;最近のブログ記事&lt;/h3&gt;<br />
&lt;div class=&quot;widget-content&quot;&gt;<br />
&lt;ul&gt;<br />
&lt;/mt:EntriesHeader&gt;<br />
&lt;li&gt;&lt;a href=&quot;&lt;$mt:EntryPermalink$&gt;&quot;&gt;&lt;$mt:EntryTitle$&gt;&lt;/a&gt;&lt;/li&gt;<br />
&lt;mt:EntriesFooter&gt;<br />
&lt;/ul&gt;<br />
&lt;/div&gt;<br />
&lt;/div&gt;<br />
&lt;/mt:EntriesFooter&gt;<br />
&lt;/mt:Entries&gt;<br />
&lt;/mt:If&gt;<br />
これを以下に上書きします。</p>
<p>&lt;mt:If tag=&quot;BlogEntryCount&quot;&gt;<br />
&lt;mt:Entries lastn=&quot;10&quot;&gt;<br />
&lt;mt:EntriesHeader&gt;<br />
&lt;div class=&quot;widget-recent-entries widget-archives widget&quot;&gt;<br />
&lt;h3 class=&quot;widget-header&quot;&gt;最近のブログ記事&lt;/h3&gt;<br />
&lt;div class=&quot;widget-content&quot;&gt;<br />
&lt;dl&gt;<br />
&lt;/mt:EntriesHeader&gt;<br />
&lt;dt&gt;<br />
&lt;MTEntryAssets type=&quot;image&quot; lastn=&quot;1&quot;&gt;<br />
&lt;a href=&quot;&lt;$mt:EntryPermalink$&gt;&quot;&gt;&lt;img src=&quot;&lt;$MTAssetThumbnailURL height=&quot;30&quot; width=&quot;30&quot;$&gt;&quot; alt=&quot;&lt;$MTEntryTitle$&gt;&quot; /&gt;&lt;/a&gt;<br />
&lt;/MTEntryAssets&gt;<br />
&lt;/dt&gt;<br />
&lt;dd&gt;<br />
&lt;a href=&quot;&lt;$mt:EntryPermalink$&gt;&quot;&gt;&lt;$mt:EntryTitle$&gt;&lt;/a&gt;<br />
&lt;/dd&gt;<br />
&lt;mt:EntriesFooter&gt;<br />
&lt;/dl&gt;<br />
&lt;/div&gt;<br />
&lt;/div&gt;<br />
&lt;/mt:EntriesFooter&gt;<br />
&lt;/mt:Entries&gt;<br />
&lt;/mt:If&gt;

修正した部分は

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

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

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

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

の構造に変更しました。「」ですが、これは「エントリー画像を一個だけ取り出す」と認識してください。

そして、「<img src=”<$MTAssetThumbnailURL height=”30″ width=”30″$>” alt=”<$MTEntryTitle$>” />」で「サムネイル画像 縦横30pxを生成表示」という意味です。
サムネイル画像はブログ公開ディレクトリの「assets_c」内に自動生成されてリンクされますので、この辺は普段は気にしないで大丈夫でしょう。

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

related story