« 前の日記次の日記 »

日記の本文

2003年11月18日

タブ風のカテゴリー表示

久しぶりにMovableTypeネタ。MTタグを使ってカテゴリーをタブ風のメニューで表示させることを思いつき、さっそく自宅に戻ってから作業してみたのですが…。

今まではそれぞれのテンプレートに、タブ風のカテゴリー表示をHTML形式で直で書いてました。なので新たにカテゴリーが増えたりすると、全てのテンプレートをイジらなければなりません。それをどうにかならないものかな、と考えました。で、出来ました。ちょうど今見えているページの上のようになります。

下のソースとCSSをお使いのテンプレートファイルとStylesheetに追加します。ちなみに私はテンプレートの
<div id="banner">
...
</div>
の中に追加しました。Stylesheetはどこに追加してもオッケーです。

あ、くれぐれも作業前のCSSやテンプレートファイルはバックアップをお忘れなく。

-----テンプレートにここから-----

<div id="tabmenu">
<p><a href="<$MTBlogURL$>">ホーム</a></p>
<MTCategories>
<p class="<$MTCategoryLabel$>"><a href="<$MTCategoryArchiveLink$>"><$MTCategoryDescription$></a>[<$MTCategoryCount$>]</p>
</MTCategories>
</div>

-----テンプレートにここまで-----


-----Stylesheetにここから-----

#tabmenu {
border-bottom: 1px solid #666;
padding: 2px 15px ;
}

#tabmenu p {
font-size: 85% ;
letter-spacing: 1px ;
display: inline ;
margin: 0px 2px ;
padding: 5px 10px 2px;
background-color: #fcc ;
border-top: 1px solid #999;
border-right: 1px solid #999;
border-left: 1px solid #999;
}

#tabmenu a:link,
#tabmenu a:visited {
color: #c30;
}

#tabmenu a:hover {
color: #f00;
}

-----Stylesheetにここまで-----

テンプレートの部分で、私はカテゴリの表示を日本語にしたかったので
<$MTCategoryDescription$>
にしてありますが、コレは『カテゴリーの説明』です。単純にカテゴリー名を表示させたい場合は
<$MTCategoryLabel$>
にします。
『カテゴリーの説明』を表示させる方法はコチラを参考に。

これでもちょっと不満があるんですよね。テンプレート側に追加する
<p class="<$MTCategoryLabel$>">
という記述なんですが、これはあるカテゴリーのページが表示されたときに、該当するカテゴリーのタブの背景色や文字色を変えようとしたなごりです。つまりこんな感じにしたかったのです。


それぞれのテンプレートに以下のCSSを直接書ければ良いのですが、
#tabmenu p.<$MTCategoryLabel$> {
color: #666 ;
background-color: #fff ;
}

これだと再構築のときにエラーが出ちゃうんですよねえ。イマイチ分からん。もうしばらく頑張ってみます。

2003年11月18日 21:52|SAITO, Kazuo

« 前の日記HOME次の日記 »

この日記へのツッコミ

ツッコミはお気軽に

名前とアドレスをクッキーに記憶させますか? 

トラックバックもお気軽に

このページのトラックバック用URL

http://saito-kazuo.pupu.jp/cgi-local/mt/mt-tb.cgi/58

この日記へのトラックバック一覧