CSS

カスタマイズ可能なあらゆるブログエンジンで、CSSを使ってカテゴリごとにデザインをカスタマイズする方法です。(カテゴリごとに固有の半角英数文字が出力できることが条件です。)

カテゴリごとに記事を変えたい!と常々思っていました。こうしてグローバルメニューを配置して、通常のWEBよりの構成で運営している場合はなおさらです。

いや、実はリニューアル時に、後々カテゴリデザインをカスタマイズできるようにHTMLを組んでいたんですが、画像やデザインを作成するのが面倒なのでそのままになっていました。

Mobableype専用の方法

MovableTypeに限って言うと、例えば次のような方法があります。

<MTIfIsDescendant parent="カテゴリ名1">
カテゴリ名1で表示したい内容
</MTIfIsDescendant>
<MTIfIsDescendant parent="カテゴリ名2">
カテゴリ名2で表示したい内容
</MTIfIsDescendant>
カテゴリー毎にデザインを変える:Movable Type入門

カテゴリごとに、物理的に出力する内容を変える方法です。ただしこの方法はMovableTypeにしか使えません。他のブログでこうした出力分けができるかどうかは不明です。

汎用的な方法

そこでここでは、CSSによってデザインを「上書き」する方法をご紹介します。

変更したいカテゴリーのBODYタグに、次のようにid指定を挿入します。

<body class="任意" id="categ<$MTCategoryID$>">

これによって、MobableTypeの場合”categ25″など、カテゴリーIDに応じた数値が挿入されることになります。(CSSの指定では、数字から始まるクラス・IDは使用できないので、idの前に文字が必要なことに注意。)

あとは、通常の指定がこうなっているとしたら、

div#header{ background….}

次のようにすれば、指定を上書きしてカテゴリ固有のものにすることが可能です。

#categ25 #header{ background….}

今回、朱雀式では、次の2カテゴリーに独立ヘッダーを作成しました。
・捕鯨問題
・パチンコ撲滅運動

(櫻木)