ヘッダの下部にナビゲーションを付けてみました。JavaScriptのロールオーバーではなく、CSSで疑似クラスのhoverを使ってスワップ効果を出してみた。【追記 2004/12/14】 デザイン変更のため、現在は変わっております。
メンテナンスのし易さと、validなhtmlを目指して(笑)リストタグで作り、cssで成形します。ナビゲーションに"navi"というIDを振るという前提で、スタイルシートに下記を追加します。
#navi {
height:1.4em;
background-color: #676767;
background-image: url(img/navi_bg01.gif);←ナビ全体にしく背景(幅は1px)
background-repeat: repeat-x;←---------X軸にリピート
border: solid #000000;
border-width: 1px 0;
}
#navi ul {
margin: 0;
padding-left: 15px;
list-style-type: none;
}
#navi li {
float: left;←-------------------------縦の状態のリストを横に並べる
font-family: Verdana,Sans-serif;
font-size: x-small;
font-weight: bold;
}
#navi li a{
text-decoration: none;
text-align: center;
display: block;←----------------------ブロック化させてボタンの様にする
width: 7em;
padding: 0px 10px;
color: #FFFFFF;
border: solid #666666;←---------------これと下の2行は区切り線
border-width: 0 1px 0 0;
background-color: #676767;
background-image: url(img/navi_bg01.gif);←----------------------幅1pxの画像
background-repeat: repeat-x;
}
#navi li a:hover {←-----------------------------hoverでロールオーバー効果を出す
text-decoration: none;
color: #CCFFFF;
background-color: #676767;
background-image: url(img/navi_bg.gif);←--マウスONの時の背景(1pxの画像)を指定
background-repeat: repeat-x;
}
追加したら、保存します。
次に、テンプレートのMain index(index.html)を開き、ヘッダー部分<div id="banner">の終了タグ</div>と<div id="center">の間に下記を追加します。
<div id="navi">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/archives/2004/10/post_2.html">About</a></li>
<li><a href="/archives.html">Archive</a></li>
<li><a href="http://blog.with2.net/link.php/16454">BlogLanking</a></li>
</ul>
</div>
リストで作成すると、追加したい場合にも<li>hoge</li>の様に、簡単に追加できます。
Comments