即席グローバルナビ作成
headerに簡易的な即席グローバルナビを作ってみました。
全部CSSで出来るから簡単です(^^)
別に意味は無いけど、ずーーーーっとIllustrator触ってたから気晴らしに、という事で作成。
やっぱDTPメインが長いとソースの書き方忘れてヤバいやっさ。TAG indexを参考に、あとに残ったmarginとpaddingの計算は自力でやって完成。
でも配色だけだと詰まらんなぁ・・・( ̄. ̄;) ま、即席の簡易版なので仕方ないけど。
こちらはおまけ
青が、文字に全部アピアランスで作成したもの(文字の塗りを量産)。
赤が、パスと文字で作成したもの(オブジェクト一つひとつに効果入り)。
追記――――――
枠が角丸になるようCSS3のソースを追加しました。
Firefox4と5、Google Chromeで確認できます。ていうかIE以外。
以下、グレーの部分がソース。どうぞ、コピって使って下さい(゚∀゚)アヒャヒャ
▼▼▼CSS▼▼▼
#header ul.gnavi {
width: 780px;
margin: 0 auto;
padding: 0;
background-color: #c9171e;
font-size: 85%;
list-style-type: none;
text-align: center;
}
#header ul.gnavi li {
width: 156px;
float: left;
line-height: 100%;
}
/*-- リンクエリア --*/
#header ul.gnavi a {
display: block;
position: relative;
padding: 10px 2px;
background-color: #f09199;
color: #ffffff;
border: 2px #ffffff;
border-style: solid solid solid none;
border-top-left-radius: 20px; /* CSS3の表記 左上角丸 */
border-bottom-right-radius: 20px; /* CSS3の表記 右下角丸 */
text-decoration: none;
}
/*-- 最初の項目 --*/
#header ul.gnavi li.first a {
border-left: solid 2px #ffffff;
}
/*-- ポイント時・アクティブ時 --*/
#header ul.gnavi li a:hover,
#header ul.gnavi li a:active {
border: solid 2px #00ff00;
background-color: #ffff66;
color: #0033ff;
outline: none;
}
#header内に height: 130px; /*-- ヘッダの高さ(数値の調整は任意) --*/ を追加。
▼▼▼トップページ・シングルページ・アーカイブページ▼▼▼
<div id="header">~</div>内のブログ説明文の下に貼り付け
<ul class="gnavi">
<li class="first"><a href="<$blog_url>">トップ</a></li>
<li><a href="URL">リンク名</a></li>
<li><a href="URL">リンク名</a></li>
<li><a href="URL">リンク名</a></li>
<li><a href="URL">リンク名</a></li>
</ul>