MovableTypeで現在のカテゴリをハイライト表示

MovableTypeをCMSっぽく使おうと思ったときに、現在のカテゴリをハイライト表示したくなったりするのでそのサンプル。

activecategory.gif

こんな感じ。

まずは理想系を考えてみると

<body class="mark-cat1">
<ul class="grvnavi">
<li><a href="category1.html" title="Category 1" class="label-cat1">Category 1</a></li>
<li><a href="category2.html" title="Category 2" class="label-cat2">Category 2</a></li>
<li><a href="category3.html" title="Category 3" class="label-cat3">Category 3</a></li>
<li><a href="category4.html" title="Category 4" class="label-cat4">Category 4</a></li>
</ul>
</body>

という感じで子孫セレクタなんかで、適用されるスタイルをその時々のカテゴリで変更してやればいいのかも。

カテゴリ1の時は

<body class="mark-cat1">

カテゴリ2の時は

<body class="mark-cat2">

カテゴリ3の時は

<body class="mark-cat3">

カテゴリ4の時は

<body class="mark-cat4">

という感じで、現在のカテゴリを示すものが自動的に入ってくれるとうれしい。

テンプレートを作る際にマーカーの部分に<MTCategoryLabel>とか入れてあげたいけど、カテゴリ名に日本語を使っている場合は気持ち悪くなっちゃうので、<MTCategoryBasename>とか入れてあげるといいのかも。

現在のカテゴリをハイライト表示のサンプル

このサンプルでは、link、visited、active、hoverも書きたかったので、ちょっと冗長なコードになったけどそれを省けばもっとシンプルにできるっぽい。

CMSとして使うMovable TypeガイドブックMovable Type 3.3 マニュアル: テンプレート・タグ リファレンス

Rlated & Feedbacks

http://www.trapon.jp/cms/mt-tb.cgi/129