top

画像のあるブログ記事にワンポイントアイコンをつける

小技ですが…。MTEntryAssetsは記事に含まれる画像を表示するためのMTタグです。MTEntryAssets内では画像へのアドレス、サムネイル表示用のタグなどAssets関連のいろいろなタグが使えますが、MTタグなしで単純に文字だけを表示することもできます。この時、<MTEntryAssets>~</MTEntryAssets>内に書かれた文字列は画像を含む記事にしか表示されません。ので、MTEntryAssetsタグは画像を表示するだけでなく、「画像がある記事の識別」にも使えるわけです。

そこで以下のようなタグを書いてみます。

<ul>
<MTEntries lastn="10">
<li>
<$MTEntryTitle$>
<MTEntryAssets type="image" lastn="1">
<strong>画像あり</strong>
</MTEntryAssets>

</li>
</MTEntries>
</ul>

これを表示すると、画像がある記事だけに「画像あり」が表示されます。実際に表示させてみるとこうなります。

サンプル1

*サンプルはメインサイトのブログデータを使ってます。分かりやすいように表示件数を多くしてcssで少し色つけてます。

では<strong>画像あり</strong>の部分をカメラアイコンなどに変えてみると…。

<ul>
<MTEntries lastn="10">
<li>
<$MTEntryTitle$>
<MTEntryAssets type="image" lastn="1">
<img src="カメラのアイコン画像" alt="画像あり" />
</MTEntryAssets>

</li>
</MTEntries>
</ul>

こんなふうになります。

サンプル2

アイコン画像は1キロバイトの素材屋さん様からお借りしました。

これはMTEntriesが使われているところなら、どこでも使えます。赤字の部分をちょいと追加するだけでちょっとしたポイント付きのリストになります。アイデア次第でいろいろ使えるのではと思います。記事リストに画像のサムネイルも表示させる(MT4用)はMTEntryAssetsのこの性質を利用したものです。本当は先にこちらを書いた方が分かりやすかったかもですが、順序が逆になってしまってすみません(^^;。

<2008.2.15 追記>
サンプルコードにlastn="1"が抜けていたことに気付いたので追記しました。
(lastn="1"がないと記事に複数の画像がある場合、画像の数だけアイコンが表示されてしまう)

 

トラックバックURL

トラックバックされる際にはこの記事へのリンクをお願い致します

コメントを投稿

 


 <注意>
 ご利用のブラウザ、設定ではコメントのプレビューおよび投稿はご利用になれません。
 コメント投稿の際はお手数ですがjavascriptをオンにして下さい。
 *javascriptオフのまま投稿ボタンを押すと送信内容が消えますのでご注意下さい。