[MT] カテゴリごとに記事のアイコン画像等を切り替える方法 - immovabletype


[MT] カテゴリごとに記事のアイコン画像等を切り替える方法

 twitter上で、記事毎に違うカテゴリアイコンを表示したいけどやり方がわからない旨をボヤいていると、<$MTCategoryLabel$>(カテゴリ名が英数字の場合のみ)や<$MTCategoryDescription$>を使って、カテゴリ別に違う画像を出力できるということを教えてもらいました。

 で、さっそくcssでカテゴリ別の背景画像を出力しようとしたんですが、<$MTCategory$>タグって、そのままじゃテンプレートに書けないんですね......。やり方わかんなくてウワーってなってたら、またしてもデザイナーの方たちが助け船を出してくださって、さらにあの小粋空間@yujiroさんまでもが手を貸してくださって(初めに声をかけてもらったときは思わずユーザーネームを二度見してしまったw)、二日がかりでやっと実装することができました。

 @yujiroさん、@take_it02さん、@rinatsukuさん、@mattari_pandaさん、本当にありがとうございました。

 以下、@yujiroさんに教えていただいたやり方をほぼそのまま掲載します。

 僕が今回やろうとしたのは、記事の枠上部にカテゴリアイコンを含めた下記のような画像をカテゴリ数分用意し、それを背景画像として記事のカテゴリ毎に出しわけるというやり方です。記事のマークアップは、<div class="post">で行っています。

categorisample.gif

■1.cssの設定
 まず、カテゴリ別に背景画像のセレクタを出力するためのスタイルシートを記述。

<mt:Categories>
div.post_<$MTCategoryDescription$>{
   background:url(/common/<$MTCategoryDescription$>.gif) no-repeat left top;
}
</mt:Categories>

■2.htmlテンプレートの設定
 次に、上記セレクタを利用するテンプレートの設定。「ブログ記事の概要」テンプレートモジュールを使っている場合、div.postにあたるdiv要素の開始タグを次のように記述します。

<div
<mt:if name="category_archive">
class="post_<mt:CategoryDescription />"
<mt:else>
<mt:EntryCategories>
class="post_<$MTCategoryDescription$>"
</mt:EntryCategories>
</mt:if>
>

 「ブログ記事の概要」を使ってない場合は、「メインページ」テンプレートのdiv.postにあたるdiv要素の開始タグを、次のように記述。

<div
<mt:EntryCategories>
class="post_<$MTCategoryDescription$>"
</mt:EntryCategories>
>

 さらに、カテゴリアーカイブテンプレートのdiv.postにあたるdiv要素の開始タグを、次のように書きます。

<div class="post_<mt:CategoryDescription />">

 これでメインページとカテゴリアーカイブページ用の設定は終わりです。あと、ブログ記事ページ用の設定を行います。「ブログ記事」アーカイブテンプレートのdiv.postにあたるdiv要素の開始タグを、次のように記述。

<div
<mt:EntryCategories>
class="post_<mt:CategoryDescription />"
</mt:EntryCategories>
>

 以上!

 それにしても、現役のプロのデザイナーさんたちや、MTの教則本を書いているような雲の上の人によってたかって教えてもらえるなんて、めちゃくちゃ贅沢な環境ですよね......。twitterってスゴイ!

 あとで小粋空間のほうにも今回の内容を掲載されるそうなので、記事が上がったらリンク貼ることにします。

【追記:09/10/19】
小粋空間でこちらの詳しい解説エントリーがアップされましたので、ご紹介しておきます。
Movable Type でカテゴリ別にブログ記事の背景画像を切り替える

コメントの投稿