mtde.info

Movable Type Developers Express

カテゴリ別に見た目を切り替える（hn見出しの背景画像）

2008年3月31日 20:38 | Writer: apstar | 記事本文

カテゴリ別に見た目を切り替える方法のひとつを説明します。この方法は、カテゴリおよびエントリで、見出し（このサンプルではh2）へ、カテゴリごとに異なる背景画像を与えるというものです。

今回の場合は、カテゴリのみならず、そのカテゴリに含まれるエントリのh2見出しもすべて同じ背景画像を用いることにします。管理ページの「カテゴリの編集」ページで、カテゴリの「出力ファイル/フォルダ名」には、それぞれ010、020、030と入力しているものとします。

まず、ブログ記事の概要・ブログ記事の詳細モジュールの中で、h2見出しを使っている箇所を探します。h2見出しにはすべてエントリのタイトルが入っていると仮定します。そのh2見出しのコードを、以下のコードに差し替えます。

<$MTInclude module="h2bycategory"$>

なぜh2見出し部分のコードを、h2bycategoryモジュールをインクルードするコードに変更するのかというと、ブログ記事の概要モジュールとブログ記事の詳細モジュールとで、同じような記述で使用できるからです。

なお、このモジュール化は必須ではなく、次に示す同じコードをブログ記事の概要モジュールとブログ記事の詳細モジュール両方へベタ書きしてもいいです。

次に h2bycategory というモジュール（名前は任意に決めてください）を作成し、中へ以下のようなコードを記述します。

<MTIgnore>カテゴリのベースネームを取得する</MTIgnore>
<MTIf name="archive_listing">
   <MTSetVarBlock name="CurCatBaseName"><MTCategoryBaseName></MTSetVarBlock>
<MTElseIf name="entry_template">
   <MTSetVarBlock name="CurCatName"><MTEntryCategory></MTSetVarBlock>
   <MTCategories>
      <MTSetVarBlock name="LopCatName"><MTCategoryLabel></MTSetVarBlock>
      <MTIf name="LopCatName" eq="$CurCatName">
         <MTSetVarBlock name="CurCatBaseName"><MTCategoryBaseName></MTSetVarBlock>
      </MTIf>
   </MTCategories>
</MTIf>

<MTIgnore>h2タグへclass名をmidasi+カテゴリベースネームとして与える</MTIgnore>
<h2 class="midasi<MTGetVar name="CurCatBaseName">"><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></h2>

コードが多少複雑になっているのは、このモジュールはカテゴリ再構築時もエントリ再構築時もインクルードされるので、MTIfで処理を切り替えているためです。エントリページの再構築時には、そのエントリがどのカテゴリに属しているかを変数を用いてチェックしています。

<h2 class="midasi<MTGetVar name="CurCatBaseName">">の記述が示すとおり、この方法ではh2タグへclass=カテゴリベース名（ファイル名）という指定がなされます。CSSでこのスタイルを定義しておき、表示を切り替えます。

以下は上記の追加コードの場合でのCSSサンプルです。

.midasi010 {
background:#dedede;
background-image: url("blogimg/midasi010.gif");
border: 1px solid #cccccc;
font-size:120%;
padding:6px;
margin:0 0 6px 0;
clear: both;
}

.midasi020 {
background:#dedede;
background-image: url("blogimg/midasi020.gif");
border: 1px solid #cccccc;
font-size:100%;
padding:6px;
margin:0 0 6px 0;
clear: both;
}

.midasi030 {
background:#dedede;
background-image: url("blogimg/midasi030.gif");
border: 1px solid #cccccc;
font-size:80%;
padding:6px;
margin:0 0 6px 0;
clear: both;
}

この方法は、ブログ運用中でのカテゴリの追加がある場合には、注意が必要です。カテゴリを追加した場合には、そのカテゴリのファイル/フォルダ名に対応したスタイルをCSSへ書き加えないと、背景画像は切り替わりません。

カテゴリ関連サンプル

2008 mtde.info