グローバルナビできました。完成!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の独自タグはタウンネットブログ以外では無効です。
続きを読む...