前回のカテゴリー別に違う画像を表示させるに少し関連して、
Movable Typeのシステムを利用してこのサイトで指定している右ナビゲーション"Category"メニューのハートマーク表示の仕組み。
カテゴリー別ページを開いていただくとわかるのですが、blogのページを開いている時は、
右ナビゲーション"Category"メニューの「blog」にハートマークが付いてリンクテキストがピンクになっていると思います。
同じようにDiaryページを開いている時は「Diary」に、Childページを開いている時は「Child」にとういうように、現在表示されているカテゴリーにハートマークが付いて表示されます。
（※初期のバージョンのブラウザやモバイルなどでご覧いただいている方はCSSが適応していないので見えないかと思います。すみません。）
まず、前回最初に指定したようにテンプレートのカテゴリーアーカイブのbodyにカテゴリー名のidを付けるようにします。
<body id="<$MTArchiveTitle$>">
そして、テンプレートのカテゴリーアーカイブでの右ナビゲーション"Category"メニュー部分は、このサイトの場合は以下のようになっています。
<MTIfArchiveTypeEnabled archive_type="Category">
<div id="categoryArea">
<h2>Category</h2>
<div id="categoryBox">
<MTTopLevelCategories>
<MTSubCatIsFirst><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li <MTSubCatIsLast>class="catLast"</MTSubCatIsLast>>
<a class="<MTCategoryLabel>" href="<$MTCategoryArchiveLink$>"><$MTCategoryDescription$></a>
<MTElse>
<li <MTSubCatIsLast>class="catLasｔ"</MTSubCatIsLast>>
<MTCategoryLabel></MTElse></MTIfNonZero>
<MTSubCatsRecurse></li>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTTopLevelCategories></div>
</div>
</MTIfArchiveTypeEnabled>
ピンク字の部分がポイント。
aタグにカテゴリー名をclass名として指定します。
（その他の部分は参考までに。）
構築をしてページでソースを見ると以下になります。 （※bodyタグはblogページの例）
<body id="blog">
<div id="categoryArea">
<h2>Category</h2>
<div id="categoryBox">
<ul>
<li class="catLast">
<a class="blog" href="http://pastelmilk.com/blog/">blog (ブログ総合)</a>
<ul>
<li >
<a class="a_Diary" href="http://pastelmilk.com/blog/a_diary/">Diary</a>
</li>
<li >
<a class="b_Child" href="http://pastelmilk.com/blog/b_child/">Child</a>
</li>
<li class="catLast">
<a class="c_Webdesign" href="http://pastelmilk.com/blog/c_webdesign/">Web design</a>
<ul>
<li >
<a class="ca_MovableType" href="http://pastelmilk.com/blog/c_webdesign/ca_movabletype/">Movable Type</a>
</li>
<li class="catLast">
<a class="cz_Other" href="http://pastelmilk.com/blog/c_webdesign/cz_other/">Other</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
構築後、テンプレートで指定した class="<MTCategoryLabel>" がそれぞれのカテゴリー名でclass指定されたことがわかります。
次に、CSSファイルで以下を指定します。
#blog .blog,
#a_Diary .a_Diary,
#b_Child .b_Child,
#c_Webdesign .c_Webdesign,
#ca_MovableType .ca_MovableType,
#cz_Other .cz_Other {
color: #f09;
background-image: url(../img/heart.png);
background-repeat: no-repeat;
background-position: left center;
}
bodyタグに指定したidと、階層表示のaタグに指定したclassタグを親子関係で指定し、
両方の名前
が一致した時にのみハートマークが表示されるようにします。
どの結果も同じくハートマークを表示させてcolorも同じにするので「,」で区切って並べてひとまとめにできます。
これで完了。
このサイトのようにハートマークなどの画像を表示しなくても、
ブロックにしておいてbackground-colorなどを変えても良いと思います。
2007.07.22 (Sun) 17:38 |
blog総合エントリー一覧
