2006年4/25(火)

カレントページのリストを強調


カテゴリーアーカイブのリスト内で、カレントページにあたるものを強調表示させてみました。

こちらの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を提供していただいた小粋空間さん、ありがとうございました。いつも助かっています。

トラックバック(0)

トラックバックURL: http://blog.norari.jp/mt/mt-tb.cgi/3128

コメントする

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

ブログ作成者

Yukie(田島幸枝)
http://norari.jp/

カレンダー

カテゴリ

月別アーカイブ

Blog Links

Powered by Movable Type 4.23-ja

広告

アイテム

  • 20110409.jpg
  • IMG_8434.JPG
  • 20110408_1.jpg
  • 20110408_2.jpg
  • 110408-3.jpg
  • 110408-1.jpg
  • 110408-2.jpg
  • 20110407_1.jpg

このブログ記事について

このページは、田島 幸枝が2006年4月25日 03:08に書いたブログ記事です。

ひとつ前のブログ記事は「Windows IE4~6だけに適用」です。

次のブログ記事は「W-ZERO3」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。


当ブログは携帯でもご覧いただけます。以下のQRコードをご利用いただくか、直接http://blog.norari.jp/を入力してご覧ください。