グローバルナビできました。完成！2万円ホームページのリニューアルをCMS使ってやってたら欲しくなったので、このラボログにも付けましたw

幅は900pxにして、基本的にテキストリンクで幅・高さを設定してリンクエリアを設けてます。全部画像にしちゃうと面倒なので。修正するときはこっちが簡単です。いちいち画像作ってアップロードしなくて済む。

画像

今回のグローバルナビに使用した画像は左と中央(ポイント時)です。いずれも5px×40pxです。

CSS

/*------グローバルナビ------*/
#gnavi{
    margin:0 auto;
    padding:0;
    width:900px;

    background:url(画像URL) center top repeat-x;
    color:white;
}
#gnavi ul.nl{
    margin:0;
    padding:0;
}
#gnavi ul.nl li{
    display:block;
    float:left;
    font-size:12px;
    list-style-type:none;
    text-align:center;
}
#gnavi ul.nl li a{
    display:block;
    padding-top:10px;
    width:179px;
    height:30px;
    background:url(画像URL) repeat-x center top;
    color:white;
    text-decoration:none;
    text-shadow:-1px -1px 0px black; /* IEは多分ver9から */
    font-weight:bold;
    border-left:1px solid aqua;
}
#gnavi ul.nl li.first a{
    border:none;
    width:180px;
}
#gnavi ul.nl li a:hover{
    background:url(画像URL) repeat-x center top;
    text-shadow:0px 0px 12px #65ffcc;
}
/*    background:url(画像URL) repeat-x center top; AQUA*/

HTML

<div id="gnavi">
    <ul class="nl">
        <li class="first"><a href="<$blog_url>" title="<$blog_name>">TOP</a></li>
        <li><a href="リンクアドレス" title="ブログテンプレートデザイン">テキストリンク</a></li>
        <li><a href="リンクアドレス" title="Webデザイン">テキストリンク</a></li>
        <li><a href="リンクアドレス" title="プログラム">テキストリンク</a></li>
        <li><a href="リンクアドレス" title="追加CSS">テキストリンク</a></li>
    </ul>
</div>

注意事項

※画像の使用は直リンク禁止です。ダウンロードしてからお使い下さい。

※CSSの画像URLを再入力して下さい。

※HTMLのソースでTOP以外のテキストリンクは名前・リンクアドレス・タイトルを変更して下さい。

※タウンネットブログ以外で使用する場合、TOPの名前・リンクアドレス・タイトルも変更して下さい。TOPの独自タグはタウンネットブログ以外では無効です。