MT4サイドバーのサムネイルリストはデフォルトでは直接画像へリンクが張られています。それはそれでいいのですが、ブログの内容や方針によっては、画像ではなく、画像のあるエントリー記事へリンクを張りたいと思うことはありませんか。
これが実は出来るんです。MT4には「自動でサムネイルを作って、そのサムネイルから自動で記事へリンクを張る」機能があるんです。これには<MTEntryAssets>タグを使います。MTタグだけで実現できてしまうので、すごい便利です。
■カスタマイズの前に…画像と記事の関連性について
まずはおさらい。特定のブログ記事（エントリー）にどの画像が属しているのか知るためには、画像とブログ記事（エントリー）が何らかの形で紐付けられていなければならないのですが、MT4の場合はユーザーが自分で何かしなくても画像挿入時に実はもう既にちゃんと関連付けがされているのです。MT4になってから、画像をアップした時に挿入されるタグが何だか複雑なものになりましたが、実はここがポイントだったのです。例えば・・・
<form mt:asset-id="12" class="mt-enclosure mt-enclosure-image"><img alt="hogehoge" src="http://www.example.com/photo/hogehoge.jpg" width="400" height="300" class="mt-image-left" style="float: left; margin: 0 20px 20px 0;"/></form>
この周りの<form mt:asset-id="12" class="mt-enclosure mt-enclosure-image"></form>って何よ！？と思った方、おられるのではないでしょうか（ハイ、私です）。ところが、実はここが画像とエントリーを紐付けている部分だったのですね。mt:asset-id="12"というのが画像のID番号です。そのため「何だコレ、こんな意味不明なもん要らん」などと自己判断で削除してしまうと関連付けがなくなってしまい、システムがエントリーに所属する画像を探せなくなってしまいます（具体的には<MTEntryAssets>タグが機能しなくなります）。ですので、「MTに自動でサムネイルから記事にリンクを張ってほしい」場合はこの赤字の部分、勝手に消さないようにご注意（←最初意味が分からず削除しまくっていた人は語る…）。
なお、<form mt:asset…></form> の部分は投稿された記事の中では<span></span>に置きかえられますので、実際の記事中では上のタグは以下のようになります。
<span class="mt-enclosure mt-enclosure-image"><img alt="hogehoge" src="http://www.example.com/photo/hogehoge.jpg" width="400" height="300" class="mt-image-left" style="float: left; margin: 0 20px 20px 0;"/></span>
つまり、<form>タグとasset-idが刻まれるのはあくまでもデータベースの中のみであって、表示される記事には出てきませんので、不必要に<form>を気にすることはないです。
■基本のタグ
以下が基本のタグになります。分かりやすいように余計なタグやclassは省いてます。フォトログやギャラリーブログ（カテゴリ）のように「どのエントリーにも必ず画像が存在する」場合に適してます。赤字の部分は好きな数字に。
<ul>
<MTEntries lastn="10">
<MTEntryAssets type="image">
<li><a href="<$MTEntryPermalink$>" title="<$MTEntryTitle$>">
<img src="<$MTAssetThumbnailURL height="70"$>" alt="<$MTEntryTitle$>" />
</a></li>
</MTEntryAssets>
</MTEntries>
</ul>
これにサムネイルを全部正方形にするカスタマイズを加えると以下のような感じに。
<ul>
<MTEntries lastn="10">
<MTEntryAssets type="image">
<MTSetVarBlock name="imgw"><$MTAssetProperty property="image_width"$></MTSetVarBlock>
<MTSetVarBlock name="imgh"><$MTAssetProperty property="image_height"$></MTSetVarBlock>
<li class="item">
<a class="asset-image" href="<$MTEntryPermalink$>" title="<$MTEntryTitle$>">
<MTIf name="imgw" gt="$imgh">
<img src="<$MTAssetThumbnailURL height="70"$>" class="asset-img-thumb" alt="<$MTEntryTitle$>" title="<$MTEntryTitle$>" />
<MTElse>
<img src="<$MTAssetThumbnailURL width="70"$>" class="asset-img-thumb" alt="<$MTEntryTitle$>" title="<$MTEntryTitle$>" />
</MTElse>
</MTIf>
</a></li>
</MTEntryAssets>
</MTEntries>
</ul>
.item {
display: inline;
float: left;
margin: 0pt 5px 8px;
overflow: hidden;
text-align: center;
vertical-align: middle;
width: 70px;
height: 70px;
}
１つのエントリーに複数の画像が存在し、そのうちの１つだけサムネイルにしたい場合はMTEntryAssetsにlastn="1"をつけて、<MTEntryAssets type="image" lastn="1">とすればＯＫです。別ブログにしているフォトログの画像を表示したい場合はMTEntriesに表示させたいブログのIDを付けて、<MTEntries lastn="10" blog_ids="2">などとすればＯＫです。
ちなみにリスト用サムネイルは自動で作成されるので自分で作る必要はないです。MTが自動生成したサムネイルはassets_cフォルダ以下に作られます。リスト用サムネイルは<$MTAssetThumbnailURL$><$MTAssetThumbnailLink$>タグでアクセスされた場合にのみ生成されるので、無暗に全部の画像に作られるわけではないです。
■応用編～サイドバーに記事リンク付きサムネイルリストを作る
これをMT4デフォルトのサイドバーにサムネイルリストとして組み込んで、「記事へのリンク付き最新10画像のリスト」を作ってみます。ただし普通のブログはフォトログのようにどのエントリーにも必ず画像があるわけではないので、上のタグでは必ずしも期待するような動作にはなりません。<MTEntries lastn="10">では「最新の10記事の中の画像」になってしまい、その中に画像が3個しかなかったらサムネイルも3個しか出来ないからです。どころか、最新10記事の中に画像が１枚もなかったら、最悪「サムネイル１つもなし！」状態になってしまいます(^^;。
そこでちょっと一工夫。考え方を変えて、「全エントリーから最新10個の画像を選び出して新しい順番に並べる」ことにします。具体的にはまず<MTAssets type="image" lastn="1" offset="9">で最新から10個目の画像のIDを求め、それより大きいIDを持つ画像を表示することにしてみました。赤字の部分に表示したい数より１つ少ない数を指定しておきます（例：10個並べたい場合は９にする）。なお、私の好みでサムネイルを全部正方形にするカスタマイズも入れてます。
<MTIf name="main_index">
<MTIfNonZero tag="AssetCount">
<div class="widget-assets widget">
<h3 class="widget-header">Photos</h3>
<div class="widget-content">
<ul class="widget-list">
<MTSetVarBlock name="imgid"><MTAssets type="image" lastn="1" offset="9"><$MTAssetID$></MTAssets></MTSetVarBlock>
<MTEntries lastn="0">
<MTEntryAssets type="image">
<MTSetVarBlock name="imgid2"><$MTAssetID$></MTSetVarBlock>
<MTIf name="imgid" le="$imgid2">
<MTSetVarBlock name="imgw"><$MTAssetProperty property="image_width"$></MTSetVarBlock>
<MTSetVarBlock name="imgh"><$MTAssetProperty property="image_height"$></MTSetVarBlock>
<li class="item">
<a class="asset-image" href="<$MTEntryPermalink$>" title="<$MTEntryTitle$>">
<MTIf name="imgw" gt="$imgh">
<img src="<$MTAssetThumbnailURL height="70"$>" class="asset-img-thumb" alt="<$MTEntryTitle$>" title="<$MTEntryTitle$>" />
<MTElse>
<img src="<$MTAssetThumbnailURL width="70"$>" class="asset-img-thumb" alt="<$MTEntryTitle$>" title="<$MTEntryTitle$>" />
</MTElse>
</MTIf>
</a></li>
</MTIf>
</MTEntryAssets>
</MTEntries>
</ul>
</div>
</div>
</MTIfNonZero>
</MTIf>
ここでもエントリーに複数画像がある場合、<MTEntryAssets type="image" lastn="1">として、そのうちの１つだけを代表サムネイルにすることが出来ます。ただしそれをやると設定した数字よりサムネイルの数が少なくなりますが、基本タグのように「サムネイル１つもなし状態」は避けられます。そこはお好みで。
（追記：この方法の問題点を解決した方法をこちらで公開しています。ただし4.1以上用です）
「記事数が多いので全エントリーを抽出の対象にするのはパフォーマンスが心配」という場合は、<MTEntries category="日記 OR 旅行記"><MTEntries category="NOT カスタマイズ">などのように特定のカテゴリだけ対象にしたり、サムネイルには出したくないカテゴリは除外するなどすればある程度エントリーを絞りこめます。また、<MTEntries lastn="50">のようにほどほどの数字を当てておくのもいいかもしれません。
☆ということで、実はMT4のAssets機能をフル活用してフォトログを作り直そうと目論んでいるのですが、その前に片付けておかなければならないことが山積みなので、取りかかれるのはしばらく先になりそうです(^^;。
関連するエントリー：
サムネイルリストからブログ記事（エントリー）にリンクを張る(2) MT4.1完成版
＜2007.9.23 追記＞
<form>タグに関するより詳しい説明を追加。
コメント
こんばんは、ＴＡＥＫＯさん。
私もフォームタグが気になって、速攻消していた口です。SPANに変換されて出力されるんだ。
出来れば、ここら辺はDIVにする事も出来たりすると、気持ち的に落ち着きますね。
こないだ、Twitterで野田さんも言ってたけど、
http://twitter.com/junnama/statuses/283841592
アセットを後から、追加変更出来ないのって、面倒だよね。
ここは、プラグインでも後付機能が欲しい所。
アップロード済み画像の一括再登録機能も含めてね。
こんばんは。
この<form>タグ、意味が分からないとつい消したくなりますよねえ。
＞DIVにする事も出来たりすると
私は<p>がいいな♪ ということで、<span><div><p>など好きなものに変換出来るプラグインとかあったら便利でしょうね。imgタグはインライン要素なので、それに合わせたのかなとも思うのですけど。
＞アセットを後から、追加変更出来ない
そう！ それなんです！ 名前間違えた時なんかどうしようと焦ります。後から名前や説明欄を自在に編集できたらAssetsタグも使い勝手がぐっとよくなりますよね。ここは是非とも機能アップしてほしいところですよね。
はじめまして。素晴らしいデザインと驚きと共に感心してしまいました。
さて、フォトログを始めようと目論んでいましたが、Lightbox2でoscarさんはじめ、いろいろな方のご助言を頂き何とか形になりそうだなと思った矢先に、こちらを拝見することができました。
どこからどう手を付けていいのやら、よく理解できていないのですが、本記事を参考にさせていただいてトライしてみようと思っています。
今後ともよろしくお願いいたします。
＞哲やんさん
こちらこそ初めまして。^^
MTで１カラムというのも珍しいかもですね。
フォトログの作り方はいろいろありますよね。ここでは別ブログにしているので、このエントリーで紹介している基本タグは専用のフォトログで使うことを前提に組んでます。別ブログにしないまでも写真専用のカテゴリを設けて写真カテゴリだけサムネイル表示にするという方法もありますよね。
サイト拝見させていただきましたが、こういう形でのフォトアルバムなら「ウェブページ」より「インデックステンプレート」の方が向いてるかも…と思いました。
ウェブページではMTタグが使えないので、写真をアップする度に手動で記事に追加しなくてはいけない気がします。インデックステンプレートならMTタグが使えるので写真をアップするだけで自動で更新してくれると思うので。
いろいろトライしてみて下さいね。
どうも、お久しぶりです。
先日Websig24/7 MT分科会というのに、参加しまして、その流れでいろんな方とつながりが出来ました。
mixi内の当該コミュで、「span以外に出来たら」を取り上げた所、早速Junnamaさんがプラグイン作成してくれましたよ。
「StylelessImage プラグイン v0.2」
http://junnama.alfasado.net/online/2007/10/mt4classstyle.html
ダイナミック・パブリッシングにも対応してくださってます。
＞oscarさん
うわあ、すごいお知らせありがとうございます。
本当にプラグイン作っていただけたとは！ しかもちゃんとダイナミックにも対応で！
<form>を<p>に出来るだけでなく、位置指定なしまで選べるようになるのですね。
これ、すごく欲しかったんですよ～さっそく落して試してみようと思います。
わたしも最近、自分のサイトの中のブログでMovableTypeを使っていて、MT4にアップしたら＜form＞というタグが解らず困っていましたが、このサイトでその秘密を知ってビックリ！
それまでサイドバーの写真から記事にリンクできないのが不思議で仕方がなかったのですが、納得です。
早速、愚ブログにも使わせていただきました【感謝！】
＞ひこぼしさん
こんにちは。
お役に立てたようでよかったです。^^
私も最初不思議でした、<form>タグ。説明ないとわからないですよね。
はじめまして。
なぜ画像にformが付くのか気になっておりました。
再構築するとspanに変わるということなのですが、わたしの今作っているブログではformのまま書き出されています。。。
なにか設定が誤ってるんでしょうかね。。。
＞さじさん
こちらこそ初めまして。
もしかしてIEでリッチテキストで使われていませんか？
<form class="mt-enclosure mt-enclosure-image" mt:asset-id="15">
このように、class="mt-enclosure mt-enclosure-image"がmt:asset-idの前に出てしまうとspanに変換されないようです。私が試したところ、リッチテキストでもFirefoxならmt:asset-idが前に出て出力されるのでspanに変換されました。リッチテキスト以外ならどのブラウザでも（多分）spanに変換されると思います。
これはバグのような気もするのでsixapartへそのうち報告しようと思っているのですが、現在多忙のためずっと先延ばし状態になってます(^^;。
とりあえず手動でmt:asset-idをclass="mt-enclosure mt-enclosure-image"より前に移動させるとspanになるかと思いますので、試してみて下さい。
こんにちは。
IEで、リッチテキストで書き込まれた記事でした。
そんな罠があったのですね。
mt:asset-idをclassの前に持ってくることで、spanに変換されました。
すっきりしましたー。
IE使っている人っておおいと思うんですけどねー。
修正されるといいのですが。
ありがとうございました。たすかりました。
また寄らせてもらいますー。
＞さじさん
あ、やっぱりIEでリッチテキストでしたか。
リッチテキストの場合、ブラウザによって挙動が違うところがあるのが困りものです。次バージョンで直してもらえるといいのですが。IEでも「改行を変換」ならspanになりますので、必要に応じて使ってみて下さい。
私で分かることでしたらお答えしますので、いつでもどうぞー。