http://adan.noor.jp/am_mattou/menu/menu-simple.htm
[普通レイアウト用]
別ページ
で作成した「メニュー用リンクタグ」と組み合わせて使うためのものです。
《Ameba》公式「カスタマイズ」画面
で作成したスキンなど、基本CSSをあまり変更していない場合に、使用可能です。 色、幅、高さなどをお好みに変更してから、
ブログCSS
の最後に、追加してください。
(ベーシック・ヘッダ幅変更せず・メニュー数6ケの場合は、ピンクのマーカーがついた9ケ所だけを変更していただければ、使えます)
“素材屋風”レイアウト用横メニュー
/
“素材屋風”レイアウト用縦メニュー
#wrap{ padding-top:26px; /* 下の「高さ」の数字に上下の「隙間」と「罫線太さ」を足してください */ position:relative; /* 基準位置の設定。(他の部分にrelativeが入っていたらそこを基準に調整) */ } #navi00{ position:absolute; left:0; /* relative設定の部位の、左から何pxか */ top:0; /* relative設定の部位の、上から何pxか */ width:100%; text-align:center; } /* 各メニューの設定 */ #navi00 a{ display:inline-block; /* 背景を指定できるように */ width:130px; /* 各メニューの「幅」。下の表を参考に決めてください */ 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]参考
▼各メニューの「幅」
とりあえず「ベーシック」「メニュー6ケ」「隙間1px」「罫線1px」であれば、130pxのままで大丈夫です。
▼囲み罫線 solidのほか、以下の種類があります。
1px
solid
double
dashed
dotted
groove
ridge
inset
double
outset
2px
solid
double
dashed
dotted
groove
ridge
inset
double
outset
3px
solid
double
dashed
dotted
groove
ridge
inset
double
outset
5px
solid
double
dashed
dotted
groove
ridge
inset
double
outset
10px
solid
double
dashed
dotted
groove
ridge
inset
double
outset
Mypageへ戻る
/
自分で★カスタマイズトップへ戻る
/
ブログCSSを開く