http://adan.noor.jp/am_mattou/menu/menu-simple.htm

[“素材屋風”レイアウト用・横メニュー]
別ページで作成した「メニュー用リンクタグ」と組み合わせて使うためのものです。 色、幅、高さなどをお好みに変更してから、ブログCSSの最後に、追加してください。

普通レイアウト用横メニュー / “素材屋風”レイアウト用縦メニュー

#navi00{ position:absolute; left:0; /* relative設定の部位の、左から何pxか */ top:0; /* relative設定の部位の、上から何pxか */ width:400px;/* 横メニュー全体の幅 */ height:26px;/* 横メニュー全体の高さ */ overflow:hidden; } /* 各メニューの設定 */ #navi00 a{ display:inline-block; /* 背景を指定できるように */ width:70px; /* 各メニューの「幅」 */ height:24px; /* 各メニューの「高さ」 */ margin-left:1px; /* 各メニューの「隙間」 */; } /* 各メニューの設定（未訪問） */ #navi00 a:link{ background:#ffffff; /* 各メニューの「背景色」 */ color:#000000; /* 各メニューの「文字色」 */ border:1px solid #000000; /* 各メニューの「囲み罫線」 */ text-decoration:none; } /* 各メニューの設定（訪問済み、「未訪問」と同じにするのが、デザインは楽） */ #navi00 a:visited{ background:#ffffff; /* 各メニューの「背景色」 */ color:#000000; /* 各メニューの「文字色」 */ border:1px solid #000000; /* 各メニューの「囲み罫線」 */ text-decoration:none; } /* 各メニューの設定（マウスカーソル触れたとき） */ #navi00 a:hover{ background:#000000; /* 触れたときの「背景色」 */ color:#ffffff; /* 触れたときの「文字色」 */ border:1px solid #ff0000; /* 触れたときの「囲み罫線」 */ text-decoration:none; }

Mypageへ戻る/自分で★カスタマイズトップへ戻る/ブログCSSを開く

▼色コード参考サイト（背景色、文字色、罫線色）
VisiBone ColorCode / Hex Color Code Chart & Generator
▼[px]参考

▼囲み罫線 solidのほか、以下の種類があります。

Mypageへ戻る/自分で★カスタマイズトップへ戻る/ブログCSSを開く