カテゴリーページ別タイトルバナー変更

「カテゴリーページごとにタイトルバナーを違うものにしたいんだけど、どうしたらいいんだろー？」とお悩みのあなた、そんなあなたにはこちらの猫がお勧めです！

今回はサイドバーのカテゴリー名をクリックした時に表示される、カテゴリーページ毎にバナーを変更するやり方となります。

おおまかな流れは以下のようになります。

1. Category Archivesの編集でID指定
2. カテゴリーごとのIDを確認
3. バナー画像をアップロード
4. スタイルシートを編集

１．まずCategory Archives内で以下のようなバナーイメージに関するクラスが指定されている部分を

<a id="banner-img" href="<$MTBlogURL$>"><span class="banner-alt">&nbsp;</span></a>

以下のように変更します。

<a id="banner-img<MTEntries lastn="1"><MTEntryCategories><$MTCategoryID$></MTEntryCategories></MTEntries>" href="<$MTBlogURL$>"><span class="banner-alt">&nbsp;</span></a>

このソースの変更は、スタイルシートのクラスIDをカテゴリー毎に自動で付けるためです。
ここでのポイントはMTEntryにlastn="1"をいれていることです。（決行あらわざではありますが(^_^;)）

２．次にカテゴリIDを確認するのですが上述のコードに変更後、カテゴリーアーカイブを再構築し、カテゴリーページを見ると<a id="banner-img18034"といったようなID指定がされていると思いますので、カテゴリー事にメモします。

３．ファイル・マネージャから任意の場所にそれぞれのバナーをアップロードします。

４．最後にスタイルシートの編集をします。カテゴリーページ毎にID指定がなされているので、先ほどメモしたIDを指定して画像バナーをを挿入するコードを記述します。
以下は、このウェブログでの例となります。（バナーのスペル違うじゃんとかはご愛嬌ということで(^^;)）

a#banner-img {
    display: block;
    background: #FFFFFF url("http://hayase.typepad.jp/typepad/banar4.jpg") no-repeat;
    height: 120px;
    }
a#banner-img18034 {
    display: block;
    background: #FFFFFF url("http://hayase.typepad.jp/typepad/banarupper.jpg") no-repeat;
    height: 120px;
    }
a#banner-img18033 {
    display: block;
    background: #FFFFFF url("http://hayase.typepad.jp/typepad/banarmid.jpg") no-repeat;
    height: 120px;
    }

以上のような方法で、カテゴリーページ毎にバナーを変更することができます。

やり方は多少ことなりますが、Permalinkごとのカテゴリー別サイドバーカスタマイズのように、各Permalinkページ事にも応用可能かと思います。それについては、またの機会に・・。