mtde.info

Movable Type Developers Express

カテゴリ別に見た目を切り替える（異なる画像の差し込み）

2008年3月31日 19:40 | Writer: apstar | 記事本文

カテゴリ別に見た目を切り替える方法のひとつを説明します。この方法は、カテゴリごとに異なる画像ファイルを表示する方法です。

カテゴリ1、カテゴリ2、カテゴリ3というカテゴリがあるとします。このカテゴリページを開いた際に、異なる3種類の画像を表示するには、以下のようにする方法が一般的かもしれません。

<MTIf name="archive_listing">
   <MTIfCategory name="カテゴリ1">
      <img src="http://www.mtde.info/blogimg/category1.gif" width="500" height="100" alt="<MTCategoryLabel>" />
   </MTIfCategory>
   <MTIfCategory name="カテゴリ2">
      <img src="http://www.mtde.info/blogimg/category2.gif" width="500" height="100" alt="<MTCategoryLabel>" />
   </MTIfCategory>
   <MTIfCategory name="カテゴリ3">
      <img src="http://www.mtde.info/blogimg/category3.gif" width="500" height="100" alt="<MTCategoryLabel>" />
   </MTIfCategory>
</MTIf>

MTIfCategory テンプレートタグを用いて、カテゴリ名でカテゴリを判断するやり方です。この方法はコードは簡素ではありますが、決め打ちが発生していますし、「将来増えるかも知れないカテゴリ」には対応していません。つまり将来カテゴリが増え、そのカテゴリにも異なる画像を与えたいときは、テンプレートの修正が必要です。

改良コード

そこで、「カテゴリ名を決め打ちしない」、「将来的にカテゴリが増えたときもテンプレートの改造を行わずに対処できる」ようなコードとして、以下のようなやり方があります。

<MTIf name="archive_listing">
   <MTIgnore>カテゴリのイメージ画像を切り替える。概要に記述した画像ファイル名を取得して利用する。</MTIgnore>
   <MTIfNonEmpty tag="CategoryDescription">
      <img src="<MTBlogURL><MTCategoryDescription>" width="500" height="100" alt="<MTCategoryLabel>" />
   </MTIfNonEmpty>
</MTIf>

この方法は、管理ページの「カテゴリの編集」ページで、「説明」部分へファイル名をディレクトリ名まで含めて入力しています。イメージのパスを取得するときは、MTBlogURLテンプレートタグの出力結果+MTCategoryDescriptionテンプレートタグの出力結果としています。

samplecat_150_01.PNG

カテゴリを増やす場合は、決められた画像サイズで画像を作成し、「説明」欄へ入力したディレクトリ・ファイル名の通りに画像ファイルをアップロードすれば追加作業は完了します。決め打ちはまったく発生せず、ファイル名を記述しない（つまり「説明」欄を空白にしている）場合は単に画像が出力されないだけです。

「説明」欄を本来の使途である「概要の入力」に使用しない場合には有効な手段です。逆に、「説明」欄を本来の使途に使用したい場合にはまったく使えない方法です。（当たり前ですが）概要を入力したカテゴリでは、画像が表示されないという不具合が出ます。

このサンプルコードは「ブログ記事リスト」テンプレートの適切な位置へ貼り付けるとよいです。

カテゴリ関連サンプル

2008 mtde.info