上手いタイトルが思いつかない…(^^;。「最新のサムネイル画像と合わせて記事リストを表示したい。画像のない記事にはNo Imagesのような決められた画像を表示したい」というご質問をいただきました。これはプラグインやキーワード欄を利用する方法でも実装できますが、MT4ならではのMTタグのみで実装する方法を考えてみました。
ブログ記事リストにサムネイルも表示させるだけなら簡単に出来ます。以下のようにすればＯＫです。画像の大きさはお好みで。
<ul>
<MTEntries lastn="10">
<li>
<$MTEntryTitle$>
<MTEntryAssets type="image" lastn="1">
<img src="<$MTAssetThumbnailURL height="50"$>" alt="<$MTEntryTitle$>" />
</MTEntryAssets>
</li>
</MTEntries>
</ul>
トップ頁・カテゴリインデックスにはサムネイルと概要を表示したい、という場合なら↓こんな感じでもいけるかと。
<MTEntries lastn="10">
<$MTEntryTitle$>
<div>
<MTEntryAssets type="image" lastn="1">
<img src="<$MTAssetThumbnailURL height="70"$>" alt="<$MTEntryTitle$>" />
</MTEntryAssets>
<$MTEntryExcerpt$>
</div>
</MTEntries>
ただし、これでは画像がない記事には何も表示されないんですね。それでいいならこのままで問題ないんですが、画像なしエントリにNo Images画像を表示させたいならこれだけでは使えない。そのためには「記事に画像がない場合」で条件分枝させる必要があるんですが、そういう都合のいいMTタグはないようで…。
そこで画像ありエントリに目印をつけて、目印がある場合とない場合で条件分枝させる方法を考えてみました。
■記事リストに画像のサムネイルも表示する～基本編
画像サムネイルを表示させ、サムネイルからは記事へのリンクも張る。画像がないエントリーにはNo Images画像を表示させる。その最も基本的なタグを一例として組んでみました。構造が分かりやすいように装飾は何も行っていません。
赤字の部分は好きな文字列でかまいませんが、２か所とも同じ文字にして下さい（例ではaaaaaになっていますがphotoでもimageでもかまいません）。
<ul>
<MTEntries lastn="10">
<MTSetVarBlock name="img"><MTEntryAssets type="image">aaaaa</MTEntryAssets></MTSetVarBlock>
<li>
<$MTEntryTitle$>
<MTIf name="img" like="aaaaa">
<MTEntryAssets type="image" lastn="1">
<a href="<$MTEntryPermalink$>" title="<$MTEntryTitle$>">
<img src="<$MTAssetThumbnailURL height="50"$>" alt="<$MTEntryTitle$>" />
</a>
</MTEntryAssets>
<MTElse>
<a href="<$MTEntryPermalink$>" title="<$MTEntryTitle$>">
<img src="No Images画像" alt="<$MTEntryTitle$>" />
</a>
</MTElse>
</MTIf>
</li>
</MTEntries>
</ul>
【補足説明】
<MTSetVarBlock name="img">～</MTSetVarBlock>の部分で画像のある記事にaaaaaという文字列をセットして目印にしています。<MTIf>でaaaaaという文字列がセットされている記事にはサムネイルを表示させ、aaaaaがセットされてない記事には代替え画像（No Images画像）を表示させるようにしています。
■画像サムネイル付き記事リスト～応用編
上のタグは基本のみの素の状態なので、「画像サムネイルを表示し、横に記事タイトルと概要を表示する」形に成形し、もう少し実際に応用できそうなタグを一例として組んでみました。サムネイルを全部正方形にするカスタマイズも入れてますので、お好みに合わせて調整を。
<MTEntries lastn="10">
<MTSetVarBlock name="img"><MTEntryAssets type="image">aaaaa</MTEntryAssets></MTSetVarBlock>
<div class="thumlist">
<div class="thum">
<MTIf name="img" like="aaaaa">
<MTEntryAssets type="image" lastn="1" srt_order="ascend">
<MTSetVarBlock name="imgw"><$MTAssetProperty property="image_width"$></MTSetVarBlock>
<MTSetVarBlock name="imgh"><$MTAssetProperty property="image_height"$></MTSetVarBlock>
<a class="asset-image" href="<$MTEntryPermalink$>" title="<$MTEntryTitle$>">
<MTIf name="imgw" gt="$imgh">
<img src="<$MTAssetThumbnailURL height="80"$>" class="asset-img-thumb" alt="<$MTEntryTitle$>" title="<$MTEntryTitle$>" />
<MTElse>
<img src="<$MTAssetThumbnailURL width="80"$>" class="asset-img-thumb" alt="<$MTEntryTitle$>" title="<$MTEntryTitle$>" />
</MTElse>
</MTIf></a>
</MTEntryAssets>
<MTElse>
<a href="<$MTEntryPermalink$>" title="<$MTEntryTitle$>">
<img src="No Images画像" alt="<$MTEntryTitle$>" width="80" height="80"/>
</a>
</MTElse>
</MTIf>
</div>
<h2><$MTEntryTitle$></h2>
<p><$MTEntryExcerpt$></p>
</div>
</MTEntries>
.thumlist { clear: both; }
.thum {
display: inline;
float: left;
margin-right: 10px;
overflow: hidden;
vertical-align: middle;
width: 80px;
height: 80px;
}
ここでは画像の縦横を80pxにしていますが、そこは100pxにしたり、50pxにしたり、お好みで。マークアップもお使いの環境に合わせて。これはあくまでも組み方の一例ですので、それぞれのデザインに合わせてカスタマイズされるといいと思います。
MT4.0～4.2をお使いの方へ
<MTEntryAssets>をフルに活用するには、必ず画像が<form mt:asset-id="xx" class="mt-enclosure mt-enclosure-image">～</form>で囲われており、画像と記事がデータベース内でしっかり紐付けられている必要があります。それが出来て初めて画像管理のフル自動化が可能になりますので、上手く活用してみて下さい。
MT4.3以降は画像が<form>～</form>で囲われる仕様はなくなりました。
コメント
ＴＡＥＫＯ様
こんなに早く記事にしていただいて本当にありがとうございます！
早速で申し訳ありませんが･･･質問させてください。
目印にする文字列(aaaaa)ですが、ブログ記事作成時に、カスタムフィールド等で、
本文中のどこかに書き込むようにするという事でしょうか･･･
それと、form mt:asset-id="xx"の部分をどうするものか悩んでいます。
初歩的な質問ですみませんがどうぞよろしくお願いします。
この度は本当にありがとうございました。
こんにちは。^^
＞目印にする文字列
下手に中途半端な説明をつけたおかげでかえって混乱させてしまったようで申しわけありません。
目印付けはMTタグ内で行っていますので、ブログ記事作成時には何も余計なことをする必要はないですよ。もちろんカスタムフィールドも作る必要はありませんのでご安心下さい。
このままコピペするだけで目的の動きをするはずですので、お試し下さい。
記事ももう少し分かりやすくなるよう修正してみました。
＞form mt:asset-id="xx"の部分
画像挿入時にMTが書き出すタグはどこも変えないで下さいね。そのまま使って下さい。間違っても自己判断で勝手にform mt:asset-id="xx"の部分を消すなんてことはしないように！ この部分で画像と記事の関連付けが行われていますので、これを消すとこのカスタマイズは動作しなくなります。ご注意下さいね。
http://wing.w-museum.com/200709200024.html
↑こちらでform mt:asset-id="xx"の詳しい説明をしていますのでご覧下さい。
ＴＡＥＫＯ様
できました！
解りやすく説明していただき、本当にありがとうございます。
望みどおりの形になって感激しています。
それで･･･度々すみませんがもうひとつ質問させてください。
画像があるのにNoImage画像が表示されてしまっている記事がありまして、それらをよく見ると、
img class="mt-image-none" height="300" alt="unsuku080129.JPG" width="400" src="http://Mysite.com/arowana/DSC00008-thumb-400x300.jpg"
というように、img class="mt-image-none"となっていました。
なぜ、ちゃんとform mt:asset-id="xx" class="mt-enclosure mt-enclosure-image"でくくられてるものと、そうでないものが出来てしまうのでしょうか・・・。
記事に画像を挿す時の注意点のようなものがあるのでしょうか。
それから、サムネイルが表示されなかったページの画像のタグを修正したいのですが、mt:asset-id="xx"は、どこを見たら解るのでしょうか。
質問攻めで本当にすみません;;
どうかよろしくお願い致します。
ごめんなさい、↑↑意味不明な質問になってしまいました；；
よく見るとサムネイルが表示されない画像は、＜form でくくられていないようでした。
私がきっと、なにかの拍子に消しちゃったんでしょうね・・・；；すみません。
imgタグ内のclass名は画像表示には関係ないです。imgタグが<form>で囲われていることが大事なので。
＞mt:asset-id="xx"は、どこを見たら
画像を挿入し直せばmt:asset-id="xx"が入った正しいタグが出てきます。画像挿入のボタンをクリックすると過去にアップした画像が一覧になって出てきますから、入れたい画像にチェックを入れて記事に挿入し、<form>のなくなった画像タグと入れ替えて下さい。
あとはcssでお好きな形になるようにデザインを整えて下さいね。^^
画像、挿入し直しました。
ありがとうございます！
色々聞いてばかりで･･･すみません；；
アップ画像以外の、たとえば記事中の広告バナーや外部リンク画像をサムネイル表示したい場合には使えますでしょうか。
<MTEntryAssets>はMTでアップしてデータベースに登録された画像しか拾えないので、広告バナーや外部リンク画像のサムネイル化は無理だと思います。
ただ、広告バナーや外部リンク画像のサムネイル化は、著作権の面から考えると問題ある気がしますので、やらない方が無難だとは思います。そういうことでよろしくです。
そうですよね、著作権の問題がありますよネ。
色々とお世話になりました。
他の記事も参考にさせていただきまして、とても勉強になりました。
ありがとうございました！
私の記事でお役に立てたなら嬉しいです。
これからもよろしくお願いします。^^
こんにちは、以前もお世話になりましたー。その節はありがとうございました。
ちょっとずれちゃうんですけど、asset便利だなー、なんて早速使ってたんですが、記事で画像挿入ボタン押すと500エラーが出るようになってしまって、困ってます、、アイテムの一覧も同様。。。同じようなこと起こってませんか？？あ、ver4.1です。
＞さじさん
こんにちは。
うーん、うちではそういう現象はないですね…。画像アップ作業もサクサクと快適に動作しています。
サーバーはXREAでMySQL（5系）で4.1を動かしてます。
さじさんのところはロリポップですよね。ロリポップで画像をアップすると500エラーという話、助け合い掲示板で出ているようですが、サーバーと関係あるのでしょうか？
http://lolipoking.lolipop.jp/cgi/patio.cgi?mode=view&no=4877
不思議ですね。
ありがとうございますー。
私も検索でそこにたどり着きましたが解決できず...
別のレンタルサーバでも違うページで500エラーに見舞われまいってますー。。。
DBとかperlのバージョンなんでしょうかね。。
もう少し様子見てみます。
ありがとうございましたー。
＞さじさん
やっぱりサーバー環境に関係しているんでしょうかね…。
早く原因が分かって解決するといいですね。
おかげさまで画像付きリストができました。
http://illustotes.com/siteillstortoise-2-1/list-blog/
月送りカレンダーに引き続き、助かりました。
ありがとうございます。
http://illustotes.com/diary/calendar/
＞Y.bird(イエロー.バード)さん
こんにちは。
いろいろ参考にしていただけて嬉しいです。
使えるものがあればどんどん使って下さいねー。
はじめまして。。。
この記事のおかげでウチも画像リスト出来て
大変、助かってます。
そこでiPhoneからの画像付き投稿で、、、
AppはBlogPressです。
そのままBlogで画像は表示出来てるのですが
サムネールが出来てません
アップした後、手動でform mt:asset-id="xx" class="mt-enclosure mt-enclosure-image"を付けて加えても表示されてないのですが
何か良い方法ありましたら
教えて下さい。。。
＞BIG_JUNさん
こちらこそ初めまして。
ところで、MTの管理画面から画像投稿しているのではなく、iPhonから投稿された場合にサムネイルが表示されないということでしょうか？
サムネイルが表示されるには画像がMTのアイテムに登録されている必要があります。まずはiPhonからの投稿時に画像がアイテムに登録されるかご確認下さい。それとMTのバージョンはどれをお使いでしょうか。4.3以降（もちろん5.xも）はform mt:asset-id・・・はなくなり、その代り記事編集画面の右下に記事で使用中の画像が載ります。そこに画像があればサムネイルも表示されるので、4.3以降ならそれをご確認下さい。
もしiPhonからの投稿でアイテムに登録はされているならば、記事編集画面から画像を挿入し直せばサムネイルは表示されるようになると思います。4.2以前ならその時form mt:asset-id・・・が自動挿入され、4.3以降なら右下に画像が出てくると思います。
BlogPressは使ったことがないので分からないのですが、もし画像がアイテムに登録されないならば、後で画像だけMTの管理画面からアップして記事に挿入し直すか、他の登録してくれるAppを探すか…でしょうね。
おはようございます。
早速のお返事、ありがとうございます
そうです。MTの管理画面からのは、ちゃんと表示してます〜で表示しないのはiPhoneからです。
BlogPressで画像をアップしてiMTでコードを付け加えてみてもサムネイル表示しなかったので、質問でした。
MTは4.1を使ってます。
楽してPhoneから自動でサムネイル表示させる事しか考えてませんでした。少しくらいの手間も大事ですよねえ〜
実は、もう一つBlogを管理してまして
MTじゃないのですが他BlogからのRSS、Feedを使ってTAKEOさんが作ったのと同じ様な画像と記事リストを作っているのですがなかなか上手くいきません。。。
MTではなく通常の場合、TAKEOさんが作ったのを表示させる方法が分からないです。
MTFeedタグからじゃ画像表示までは無理ですよねえ？
＞BIG_JUNさん
こんにちは。なるほど、BlogPressからではアイテムに登録されないみたいですね。
"xx"の部分にはアイテムの登録ID番号が入るので、実際にはmt:asset-id="12"みたいになります。ID番号がない（アイテムに登録されてない）状態で手動で書きくわえても記事と画像に関連付けが出来ないので、サムネイルも作成されないのです。
＞MTFeedタグ
このカスタマイズはMTのアイテム機能を利用したものなので、他ブログのフィードのようにアイテムと関係がない画像はやっぱり無理でしょうね。何かいい方法がないか考えてみたいですが、そう簡単にはいかなそうです…。お役に立てなくてすみません。
PS:メールまでありがとうございます。
けっこうよく間違われる(^^;ので、どうぞお気になさらずに～。
名前、すみません。。。
気をつけます
やはりそうでしたかMTFeed使って出来たら
完璧なんでしょうねえ～
続けて質問ですが、このコメントフォームって
オリジナルっすよね？
MTのコメントフォームテンプレートがイマイチで気に入らなくてスパムも多いし、、、
TAEKOさんのコメントフォームって
公開してますか？
今まで入ったスパムらしいコメントを一括で削除する方法って、ありますかね〜？
少しづつ消してますが、どっかでエラーが出て来て
厄介なんですよ。。。
聞いてばかりで申し訳ないのですが
宜しくお願いします。。。
＞BIG_JUNさん
ここのコメントフォームはMT3時代のものをベースに色々カスタマイズしたものなので実は古いんです…（逆に言うとシンプルな古いテンプレでも最新のMTを動かすことはできるってことなんですが）。それもあってテンプレの公開はしてないですが、取り入れたカスタマイズは公開してます。
リアルタイムでコメントをプレビュー
wing.w-museum.com/200610071605.html
コメントにQuicktagsでタグ挿入ボタンを(2) ボタンを画像に
wing.w-museum.com/200610161622.html
コメントにエンコードボタンを付けてみる
wing.w-museum.com/200807261641.html
見た目はHTMLとcssで位置やレイアウトを少し変更しただけです。スペースが空いてるのがもったいないなーと思って、名前やメルアド欄は横に移動させてしまいました。
スパム対策は以下の「mt-comments.cgiのリネーム」を参照。
wing.w-museum.com/200710141428.html
これ、効きますよ。おかげでスパムは全く来なくなりました。
何かお役に立てるものがあればいいのですが。
シンプルがやっぱベストです！！！
素晴らしい～♬
分かりました。CSSイジイジしてやってみます。
スパム厄介なんですよ。。。マジで
個別記事からコメントフォーム外しちゃった位です
あんまし意味ないんですが。。。
これからも参考にさせてもらいます！！！
色々とありがとうございました。
＞BIG_JUNさん
カスタマイズ楽しんで下さい～。
スパムはフォームのあるなしに関わらずコメントcgiを直接叩いてくるものが多いと思います。困ったものですよね。当サイトが少しでも参考になれば幸いです。
これからもよろしくお願いします。
ウェブサイトの表紙へ使わせていただきました。これですっきりと表示させられます！
＞モードの世紀さん
こんにちは。
MT4時代に書いた記事ですが、お役に立てて嬉しいです。
使えるカスタマイズは遠慮なくご利用下さい。
こんにちは。色々調べていてここに来ました！
このような記事、本当に助かります☆
図々しくも質問させていただいても良いでしょうか？
今ブログのサムネール画像のみを碁盤の目のように表示するページを作りたいのですが、どうしても縦一列にしか表示できなくて困っています…仕上がりはこんなイメージなのですが、そもそも並べていくようにはできるのでしょうか？
http://www.flowers-617.com/catalog/
＞NINAさん
こんにちは。
＞サムネール画像のみを碁盤の目のように表示する
出来ますよ（基本的にそのためのカスタマイズなので）。レイアウトはcssで行います。
カスタマイズ一覧頁の画像コーナーにcssサンプルをつけた例を多数載せてますので参考にして下さい。
http://wing.w-museum.com/mtcustom/#asset00
基本はこちら。
http://wing.w-museum.com/200801311340.html
サムネイルが正方形でいいなら以下の方がMTタグが簡単になると思います。
http://wing.w-museum.com/200903252116.html
cssは他の画像頁を参考にして下さい。
サムネイルを長方形で表示させたいなら以下を。
http://wing.w-museum.com/200802261321.html
お役に立てれば幸いです。
TAKEO様
早速のお返事どうもありがとうございました！
こんなに早くご回答いただけると思わず、失礼しました！
参考サイト、熟読し、問題解決できました。
本当にありがとうございました☆
＞NINAさん
更新はなくても返事は素早い管理人です（笑。
投稿があればメールで届く仕様にしてるのですぐ分かるだけなんですが(^^;。
お役にたてて良かったです。
MT4時代のカスタマイズですが、使えるものは遠慮なくご利用下さい。
こんにちは。
MTでサムネページを作るのにチャレンジしているのですが、色々調べても説明がさっぱり分からなくてコメントさせて頂きました。
MTにもパソコン自体にも不慣れで、専門用語などもよく分からないのですが、普段はブログ記事の「新規」から記事を書いて更新しています。
その際、画像を挿入することもよくあるのですが、今回は20点の画像を挿入したいのと、画像それぞれにコメントがあるので、どうしようかと人に相談したところ「サムネページがいいよ」と言われました。
で、いろいろ調べているのですが、何をどこにどう入力したらいいのか分からず、直接コメントさせて頂きました。
色々教えていただけますか？
＞tomoさん
こんにちは。
MT4時代の記事ですが、何かお役に立つことがありましたなら。
ところですみませんが、ご質問の内容がちょっと漠然とし過ぎていてどう答えたらいいのか分からないのですが、この記事のカスタマイズに関することではないのですか？
サムネイルに関する記事は複数ありますので、tomoさんの目的に合うものを選んで使って下さればいいです。
http://wing.w-museum.com/mtcustom/#asset00
ご返信、ありがとうございます。
自分でもどう質問していいのか、悩んでおります。
したい事は以下です。
①フォトコンテストをして20作品を厳選済み
②「フォトコンテスト 人気投票」というタイトルの記事の中に20作品の画像を挿入
③それぞれの写真をクリックすると、写真が大きく表示されコメントも表示される
ブログを読む人が、20作品を見やすいようにしたいと思っています。
前回は本文に写真とコメントを挿入したので、記事がとても長くなってしまい、好きな作品を選ぶのにとても比較しにくかったと思い、今回はサムネページを利用したいです。
ネットで色々調べたのですが、「コード」とかよくわからない説明ばかりで、私には理解できませんでした。
もし意図が伝わりましたら、教えていただけますか？
よろしくお願いいたします。
＞tomoさん
もしかしてテンプレートのカスタマイズではなくて記事内のことでしょうか…。
でしたらこのエントリーとは関係のないご質問ですね(^^;。
画像専用の頁（画像とコメントのみの頁）を作ってサムネイルからその頁にリンクを張る、では駄目なのですか？
イラストサイトではそれが普通ですが…。難しく考えすぎでは？
画像頁を20個も作るのは面倒くさいということでしたら、Lightboxやhighslide.jsで検索すれば解説サイトがいっぱい出てきますので、そちらを参考にされたらどうでしょうか。
ただ、MTにこれらを導入するにはテンプレートの書き換えが必要だと思うので、これはこれでけっこう大変な気もします。私はそんなことやったことがないので説明も指南も出来ませんし。
多少手間でも画像頁を20個作って投票頁の記事内からリンクを張るのが一番簡単で分かりやすいとは思いますが。
tomoさんがやり易い方法を使って下さい。
TAEKOさん
丁寧なご説明、ありがとうございます。
やはり、見当違いの場で質問しておりましたね・・・。勉強不足ですみません。
今回は教えていただいた、画像頁を20個作ってリンクを貼ってみようと思います。
1点、また基本的な質問なのですが、画像頁はリンクを貼った画像をクリックするまではどこにも表示されないものですよね？
その場合「ブログ記事」ではなくどこで作成するのでしょうか？「ウェブページ」ですか？
これさえ分かれば、やっと記事作成に入れそうです。
＞tomoさん
画像頁をブログ記事一覧に出したくないのならウェブページで作るのがいいと思います。
ウェブページはフォルダで管理できるので、画像頁専用のフォルダを作ってその中に入れるといいでしょう。そうすれば他のウェブページと区別して使うことが出来ますしね。
そういうことでよろしくです。
TAEKOさん
返信遅くなりました。
色々試した結果、「strikingly」という無料でHPを作成するサービスを使って画像一覧ページを作り、ブログ記事にはそのリンクを貼ることにしました。
ウェブページのことも教えていただいて、ありがとうございました。
何とか思っていたページにできそうです。
色々とありがとうございました！
＞tomoさん
目的が叶ったようでよかったです。^^
HTMLでならやり方はたくさんあって、これが決まりというものでもないので、色々試されながら作っていかれるといいと思います。
トップページにMTを埋め込み、5件記事リストを表示しています。このリストの左にサムネイル画像を置き、そのすぐ右に記事を表示したいのです。サムネイル付記事リスト応用編のソースを使わせていただいているのですが、サムネイル画像の下に記事が表示されるのです。画像のすぐ右に記事を表示させるにはどうしたらいいでしょうか？
＞森 久男さん
こんにちは。
スタイルシートでサムネイルに「float: left」を指定されてますか？
応用編の例ではサムネイルを<div class="thum">で包み、.thumに float: left を指定することでサムネイルのすぐ横に記事を表示させています。
ご自分のサイトのHTMLに合わせてcssの指定をして下さいね。
スタイルシートに「float:left」ほか入れたところ、確かにサムネイル画像の右に文字が表示されましたが、右サイドバーにあるＭＴカレンダ、カテゴリ、エントリ、リストの表示がおかしくなりました。また、記事本文に飛んだ場合、本文の文字がくっつき過ぎて非常に読みにくくなりました。どうも私のサイトでは使えないようですので今回は断念することにしました。htmlやcssは元の状態に戻したのですが、表示は正常な状態に戻らず、ただいま悪戦苦闘の状態です。お手数おかけしました。
＞森 久男さん
＞どうも私のサイトでは使えないようですので
いえ、そうではなくて、森さんのサイトのHTMLに合わせてcssを指定して下さい、ということですよ。
この例文はあくまでも例文のHTMLに合わせたcssですので、使われるHTMLが違えば、cssの指定のしかたも違ってきますから。
表示崩れはHTMLとcssの問題であって、本記事の内容（MTタグの使い方）とは関係ないですので。
記事中の画像（アイテム）を表示するにはMTEntryAssetsというMTタグを使います。
ここで書いているのはMTEntryAssetsの使い方の一例です。
MTEntryAssetsについては以下に詳しく載ってますので参考にされるといいと思います。
http://www.movabletype.jp/documentation/appendices/tags/entryassets.html
MTにはいいMTタグが豊富に用意されているので、いろいろ使ってみて下さいね。