mtde.info

Movable Type Developers Express

カテゴリ別に見た目を切り替える（カテゴリリード文へ異なる背景画像）

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

カテゴリ別に見た目を切り替える方法のひとつを説明します。この方法は、カテゴリごとにリード文（管理ページの「カテゴリの編集」ページで、「説明」部分。カテゴリの概要。MTCategoryBaseNameテンプレートタグで取得できる値。）を入力し、カテゴリごとにpブロックタグでそのリード文を表示し、pブロックへ背景画像を与えるというものです。

準備ですが、管理ページの「カテゴリの編集」ページで、「説明」部分に適切なカテゴリ説明文章を入れます。管理ページの「カテゴリの編集」ページで、カテゴリの「出力ファイル/フォルダ名」には、それぞれ010、020、030と入力しているものとします。

次にテンプレートへ追加するコードサンプルです。非常に短いです。

<MTIf name="archive_listing">
   <MTIgnore>カテゴリリード文（背景画像つき）</MTIgnore>
   <MTIfNonEmpty tag="CategoryDescription">
      <p class="catlead<MTCategoryBaseName>"><MTCategoryDescription></p>
   </MTIfNonEmpty>
</MTIf>

<p class="cat_<MTCategoryBaseName>">の記述が示すとおり、この方法ではpタグへclass=カテゴリベース名（ファイル名）という指定がなされます。CSSでこのスタイルを定義しておき、表示を切り替えます。また、MTIgnoreというテンプレートタグを記述している部分はいわゆるコメント行で、再構築時には出力されません。

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

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

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

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

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

このサンプルコードは「ブログ記事リスト」テンプレートの適切な位置へ貼り付けるとよいです。リード文というくらいですから、本文エリア先頭付近が適切かもしれません。

管理ページの「カテゴリの編集」ページで、カテゴリの「出力ファイル/フォルダ名」は、省略しても自動的に任意の名前が付けられてしまいます。

カテゴリ関連サンプル

2008 mtde.info