【パーツ】カテゴリーナビゲーションバー

ナビゲーションの項目は、検索エンジンにサイトリンクとして登録される可能性があるので、可能なら設置しておきたい。でも、ナビゲーションリンクはリストの管理が面倒臭い。そこで、カテゴリー項目をリストに利用した疑似的なナビゲーションバーを作ってみた。検索エンジンにサイトリンクを生成してもらうのが目的なので、これで十分かと。

HTML

<div id="ListNavi">
<ul>
<!--plugin_category-->
   <li><a href="<!--$plugin_category_link-->"><!--$plugin_category_title--></a></li>
<!--/plugin_category-->
</ul>
</div>

CSS

/**************************************************************************************
ナビゲーションバー用デザイン
**************************************************************************************/
/*ナビゲーションバー全体の設定*/
#ListNavi {
width:770px;
}
/*リスト全体の設定*/
#ListNavi ul{
list-style: none;
margin: 0;
padding: 0;
}
/*リスト個々の設定*/
#ListNavi li{
width: 152px;
height: 25px;
float: left;
margin: 0;
padding: 0;
font-size: 80%;
text-align: center;
color: #EEEEEE;
display: block;
border:outset 1px #333333;
}
/*リンクの設定*/
#ListNavi a {
text-decoration: none;
color: #EEEEEE;
display: block;
width: 100%;
padding: 5px 0;
}
/*カーソルが合っている状態のリンクの設定*/
#ListNavi a:hover {
color: #EEEEEE;
border:inset 1px #333333;
background-color:#383838;
}

幅や色は、使用しているテンプレートに合わせて設定してください。背景色とボーダーを使ってますが、画像を使ったほうが見栄えが良いと思います。