これはカテゴリーが少なくないと無理なのでは？？？？
と思ったのだけど、URLを別にコピペして作成するので
メインになるカテゴリだけ持ってきたい時にいいですね。
●まずは、先にカテゴリを作成します。普通にカテゴリ枠に表示されます。
●それぞれのカテゴリページが表示されるURLをコピペしておきます。
●メインテンプレートの<div id="pagebody">の直前に貼り付けます。
私の場合は
<ul id="nav">
<li><a href="http://www.kirei-dokoro.com/blog/">TOP</a></li>
<li><a href="http://www.kirei-dokoro.com/blog/cat1/index.html">Diary</a></li>
<li><a href="http://www.kirei-dokoro.com/blog/gallery/index.html">Gallery</a></li>
<li><a href="http://www.kirei-dokoro.com/blog/moblog/index.html">Moblog</a></li>
<li><a href="http://www.kirei-dokoro.com/blog/movabletype/index.html">MovableType</a></li>
<li><a href="http://www.kirei-dokoro.com/blog/cat3/index.html">お気に入り</a></li>
</ul>
スタイルシートのほうは
#nav {
margin: 0px;
padding: 0px;
list-style:none;
float: left;
width: 100%;
}
#nav li{
float: left;
font-size: 12px;
text-align: center;
width : 124px;
height : 20px;
margin-top: 3px;
margin-right: 0px;
margin-left: 3px;
background: #f0f0f0 url(bijin05.jpg) no-repeat fixed left top;
border-right: 2px solid #006699;
border-bottom: 2px solid #006699;
}
#nav a: {
color: #000000;
display:block;
width : 125px;
height : 20px;
}
#nav a:hover {
color: #ffffff;
background-color:#0f314e;
text-decoration: none;
height : 20px;
}
ついでにナビの枠をちょっと変更して上と左のラインを「0」にし、
影をつけた状態にしました。
border-right: 2px solid #006699;
border-bottom: 2px solid #006699;
そして壁紙を利用したらこうなりました。
background: #f0f0f0 url(bijin05.jpg) no-repeat fixed left top;
※クリックすると画像が拡大されます。
