カテゴリーアーカイブのリスト内で、カレントページにあたるものを強調表示させてみました。
こちらのJavaScriptを使用させていただきました。
小粋空間 - "選択されたアーカイブリンクを強調表示する(モジュール化対応版)" »
最初はなんとかMTのIfタグでできないものかと試行錯誤を繰り返していたのですが、私の頭ではなんとも不可解でした。そこで見つけたのが有名な小粋空間さんの記事。ありがたいです。導入の流れ+カスタマイズしたものが以下です。
まず、小粋空間 - "選択されたアーカイブリンクを強調表示する(モジュール化対応版)" »から、「1.2 Categories を変更する場合」を参照。指示通りに、青色部分のタグを自分のカテゴリーテンプレートにコピー&ペーストします。
<!-- CATEGORY -->*上記のものも含め、既に自分用にカスタマイズしたものを載せています。ご了承ください。
<MTIfArchiveTypeEnabled archive_type="Category">
<div class="module-categories module">
<h2 class="module-header">Category</h2>
<div class="module-content" id="categorylist">
<MTCategories>
<ul class="module-list">
<li class="module-list-item">
<a href="<$MTCategoryArchiveLink$>">
<$MTCategoryLabel$>
</a>
<span
class="catnum">[<MTCategoryCount>]</span></li></ul>
</MTCategories>
<script type="text/javascript">
<!--
var data = "<$MTArchiveTitle$>";
var nodes = document.getElementById('categorylist').getElementsByTagName("a");
for (i = 0; i < nodes.length; i++) {
if(nodes[i].innerHTML == data){
nodes[i].setAttribute("class","selectedlink");
nodes[i].setAttribute("className","selectedlink"); // for IE
}
}
//-->
</script>
</div>
</div>
次にカレント状態時のスタイルシートを追加していきます。 上記のタグを見ればわかるとおり、私はカテゴリをリストタグで囲んで表示させています。さらに、リストマークを削除し、代わりのマーク画像を背景に置いています。(こうすることによって、画像によるマークのずれを防ぐことができます。)そして、マウスオーバー時に変化するようにaタグ、a:hoverタグにスタイルシートを盛り込んでいます。なので、カレント状態のものはマークも変更したいな、と考えてカスタマイズしてみました。
赤色部分が今回のカレントページ用に追加した部分です。
#log .module-content ul.module-list{
list-style:none;
text-align:center;
width:170px;
margin:0 auto;
padding:0;
}
.module-content li.module-list-item a{
background: url(./i/loglist_a.gif) 0 3px no-repeat;
padding-left:18px;
color:#666666;
}
.module-content li.module-list-item a:hover{
background: url(./i/loglist_ho.gif) 0 3px no-repeat;
}
.module-content li.module-list-item a.selectedlink ,
.module-content li.module-list-item a.selectedlink:hover{
font-weight: bold;
background: url(./i/loglist_thi.gif) 0 3px no-repeat;
padding-left:18px;
color:#cccccc;
cursor: default;
}
簡単なことです。ただ新しいclassを作って上書きしている状態です。
私の独断で追加したような箇所は、青色部分のカーソルのデフォルトへの変更だけです。これは完全に好みです。カレントページのリストが指マークに変わってしまうのはなんだかなぁ、と思って。
それにしても、ここまでたどりつくのが大変でした....
JavaScriptを提供していただいた小粋空間さん、ありがとうございました。いつも助かっています。


コメントする
※ユーザーアイコンを変える場合は、サインイン後に表示される自分の名前をクリックして編集してください。