ナビゲーション追加

ヘッダの下部にナビゲーションを付けてみました。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;←---------------これと下の２行は区切り線
        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>の様に、簡単に追加できます。