MovableTypeのススメ

MovableType4では エントリーに画像を挿入すると、画像のimgタグが下記のようにformタグで囲まれて挿入されます。

<form mt:asset-id="10" class="mt-enclosure mt-enclosure-image">
<img alt="xxxx.gif" src="http://xxxx.xx/img/xxxx.gif" width="400" height="300" class="mt-image-left" style="float: left; margin: 0 20px 20px 0;"/>
</form>

今まで「何で？」と思いつつ削除してました。（爆）

で、下記のエントリーを拝見して「へ～！」と思ったのでご紹介。

The blog of H.Fujimoto：画像を挿入したときにformタグがつく理由

このformタグにはちゃんと理由があったわけです。

以下引用（引用元：The blog of H.Fujimoto）

Movable Type 4の新しいタグの中に、「MTEntryAssets」というタグがあります。
このタグは、ブログ記事に入っているアイテムの一覧を出力するものです。

このタグの処理を効率よく行うには、ブログ記事とアイテムの関連の情報を、どこかに保存しておくという方法が考えられます。 Movable Type 4には「MT::ObjectAsset」というクラスがあり、このクラスによってブログ記事等とアイテムとの関連付けが保存されるようになっています。

画像につけられたformタグは、この関連付けの保存の処理を行うために使われています。 ブログ記事を保存すると、その本文の中からformタグが検索され、その情報を利用して関連付けが保存されるようになっています。 したがって、画像からformタグを取ってしまうと、関連付けが保存されず、MTEntryAssetsタグが正しく動作しなくなってしまいます。

なるほど～！
勝手に取ったらダメですね（苦笑）

ちなみにこのformタグは出力時にspanタグに置換されるようです。

勉強になりました。ありがとうございます。

サブカテゴリまで表示する場合はこちらを参照下さい。
パンくずリスト（サブカテゴリまで表示）

ユーザビリティ向上のためパンくずリストを設置しました。

パンくずリストとは、トップページから現在のページまでの階層を示すリストのことです。訪問者がサイト上のどの位置にいるのか把握しやすくなるのであると便利です。

では設置方法です。

デザイン > テンプレート > アーカイブテンプレート > ブログ記事
を選択し、パンくずリストを設置する場所に下記を挿入。

<MTParentCategories glue="&gt;">
<a href="<$MTBlogURL$>">TOP</a> &gt; <a href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel$></a> &gt; <$MTEntryTitle$>
</MTParentCategories>

デザイン > テンプレート > アーカイブテンプレート > ブログ記事リスト
を選択し、パンくずリストを設置する場所に下記を挿入。

<a href="<$MTBlogURL$>">TOP</a> &gt; <$MTArchiveTitle$>

デザイン > テンプレート > インデックステンプレート > メインページ
を選択し、パンくずリストを設置する場所に下記を挿入。

<a href="<$MTBlogURL$>">TOP</a>

以上です。

ブログ内の画像をリストアップするEntryImagesプラグインを入れてみました。
当ブログでは説明用の画像がほとんどなので、あまり見栄えが良くないのが難点です。（苦笑）

同じようなプラグインにMTCollectプラグインがありますが、EntryImagesプラグインの方が簡単なようです。

手順は下記のとおりです。

１．配布元よりEntryImages_1_10.zipをダウンロード・解凍

２．EntryImages.plを「plugins」ディレクトリにアップロード

３．テンプレートのサイドバーに、以下のタグを追加・再構築

<div class="sidetitle">
Recent Images
</div>

<div class="side">
<MTEntryImages img_lastn="5">
<p><a href="<MTEntryImageEntry><$MTEntryPermalink$></MTEntryImageEntry>"><img src="<$MTEntryImageSrc$>" width="140" height="105" alt="<$MTEntryImageAlt$>" /></a></p>
</MTEntryImages>
</div>

以上です。

上記は、もっともシンプルな例です。
配布元に解説がありますので詳しくはそちらを参照して下さい。

配布元はThe blog of H.Fujimotoさまです。ありがとうございます。