0611
MovableTypeで現在のカテゴリをハイライト表示
MovableTypeをCMSっぽく使おうと思ったときに、現在のカテゴリをハイライト表示したくなったりするのでそのサンプル。
こんな感じ。
まずは理想系を考えてみると
<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>
という感じで子孫セレクタなんかで、適用されるスタイルをその時々のカテゴリで変更してやればいいのかも。
カテゴリ１の時は
<body class="mark-cat1">
カテゴリ２の時は
<body class="mark-cat2">
カテゴリ３の時は
<body class="mark-cat3">
カテゴリ４の時は
<body class="mark-cat4">
という感じで、現在のカテゴリを示すものが自動的に入ってくれるとうれしい。
テンプレートを作る際にマーカーの部分に<MTCategoryLabel>とか入れてあげたいけど、カテゴリ名に日本語を使っている場合は気持ち悪くなっちゃうので、<MTCategoryBasename>とか入れてあげるといいのかも。
このサンプルでは、link、visited、active、hoverも書きたかったので、ちょっと冗長なコードになったけどそれを省けばもっとシンプルにできるっぽい。
AmazonでMovableTypeを探す
