PCインストラクターの川上です。
いつも見てくださいまして、ありがとうございます。
またまた、アメブロカスタマイズのご質問をいただいております。
川上先生のように、
メニューバーの角を丸くして枠をつけたいんですが。
メニューバーの角を丸くして枠をつけたいんですが。
あら？私のように？？
あ、このPCで見えるメニューバーのことですね(^^♪
はい～！これは、CSSで解決します！
（CSSってCCBのこと？という古いネタをおっしゃる方は、こちら→『ところでCSSってなんですか？』をご覧くださいませ。）
もちろん、メニューバーを設置されたい方は、まずこちら↓の過去記事をご覧くださいませ。
『ウエストみたいなヘッダーの下の帯って【メニューバーの設置方法】』
そして、最後の仕上げのCSSコードを
/* ▼▼▼ グローバルナビゲーションメニュー ▼▼▼ */
/* メニュー設置用スペース */
.skinContentsArea{
padding-top:60px;
position:relative;
}
/* グローバルナビメニューエリア */
#topmenu{
width:980px; /*メニュー全体の幅*/
position:absolute;
margin:0;
padding:0;
top:-2px; /*上下位置調整*/
left:0px; /*左右位置調整*/
display:block;
}
/* メニューリストのグループ */
#topmenu ul.menu{
margin:0;
padding:0 0 6px 0;
list-style:none;
}
/* メニューリスト */
#topmenu ul.menu li{
width:183px; /*1つの幅*/
margin:2px; /*メニューのスキマ*/
line-height:40px;/*ボタンの高さ*/
text-align:center;/*中央寄せ*/
font-family:'メイリオ','Meiryo','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック', sans-serif;
display:inline;
list-style:none;
float:left;
border:solid 4px #f17c07;
box-shadow:gray 4px 4px 4px;
border-radius:6px;
background:#20108f;/* IE6, 7向け */
background-color:#20108f;
background-image:linear-gradient(#ccd2f2,#8070ef,#2f17d0,#20108f);
color:#ffffff;
text-shadow: 1px 1px 3px #000;
}
/* メニューリストのリンク */
#topmenu ul.menu li a{ /* 通常時 */
display:block;
margin:0;
padding:0;
text-align:center;/*中央寄せ*/
font-size:14px; /*ボタンの文字サイズ*/
color:#ffffff;
text-shadow: 1px 1px 3px #000;
font-weight:bold; /*太字*/
text-decoration:none;/*下線(なし)*/
}
/* メニューリストのリンク（マウスオーバー時） */
#topmenu ul.menu li a:hover{ /*カーソルが乗った時*/
color:#ffffff; /*文字色(白)*/
font-weight:bold; /*太字 */
text-decoration:underline;/*下線(あり)*/
background-color:; /*背景色()*/
background-image:url(http://stat.ameba.jp/user_images/20131029/14/sumitak1329/80/e5/j/o0189004012731843526.jpg);/*背景イメージ*/
}
とするとよいですね。
あ、ただ、ご質問の角を丸くするのは、これらのCSSコードの中の、赤文字のところだけ↓でして、
/* ▼▼▼ グローバルナビゲーションメニュー ▼▼▼ */
/* メニュー設置用スペース */
.skinContentsArea{
padding-top:60px;
position:relative;
}
/* グローバルナビメニューエリア */
#topmenu{
width:980px; /*メニュー全体の幅*/
position:absolute;
margin:0;
padding:0;
top:-2px; /*上下位置調整*/
left:0px; /*左右位置調整*/
display:block;
}
/* メニューリストのグループ */
#topmenu ul.menu{
margin:0;
padding:0 0 6px 0;
list-style:none;
}
/* メニューリスト */
#topmenu ul.menu li{
width:183px; /*1つの幅*/
margin:2px; /*メニューのスキマ*/
line-height:40px;/*ボタンの高さ*/
text-align:center;/*中央寄せ*/
font-family:'メイリオ','Meiryo','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック', sans-serif;
display:inline;
list-style:none;
float:left;
border:solid 4px #f17c07;
box-shadow:gray 4px 4px 4px;
border-radius:6px;
background:#20108f;/* IE6, 7向け */
background-color:#20108f;
background-image:linear-gradient(#ccd2f2,#8070ef,#2f17d0,#20108f);
color:#ffffff;
text-shadow: 1px 1px 3px #000;
}
/* メニューリストのリンク */
#topmenu ul.menu li a{ /* 通常時 */
display:block;
margin:0;
padding:0;
text-align:center;/*中央寄せ*/
font-size:14px; /*ボタンの文字サイズ*/
color:#ffffff;
text-shadow: 1px 1px 3px #000;
font-weight:bold; /*太字*/
text-decoration:none;/*下線(なし)*/
}
/* メニューリストのリンク（マウスオーバー時） */
#topmenu ul.menu li a:hover{ /*カーソルが乗った時*/
color:#ffffff; /*文字色(白)*/
font-weight:bold; /*太字 */
text-decoration:underline;/*下線(あり)*/
background-color:; /*背景色()*/
background-image:url(http://stat.ameba.jp/user_images/20131029/14/sumitak1329/80/e5/j/o0189004012731843526.jpg);/*背景イメージ*/
}
また、メニューボタンのオレンジの太い枠はピンク色の箇所↓です。
/* ▼▼▼ グローバルナビゲーションメニュー ▼▼▼ */
/* メニュー設置用スペース */
.skinContentsArea{
padding-top:60px;
position:relative;
}
/* グローバルナビメニューエリア */
#topmenu{
width:980px; /*メニュー全体の幅*/
position:absolute;
margin:0;
padding:0;
top:-2px; /*上下位置調整*/
left:0px; /*左右位置調整*/
display:block;
}
/* メニューリストのグループ */
#topmenu ul.menu{
margin:0;
padding:0 0 6px 0;
list-style:none;
}
/* メニューリスト */
#topmenu ul.menu li{
width:183px; /*1つの幅*/
margin:2px; /*メニューのスキマ*/
line-height:40px;/*ボタンの高さ*/
text-align:center;/*中央寄せ*/
font-family:'メイリオ','Meiryo','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック', sans-serif;
display:inline;
list-style:none;
float:left;
border:solid 4px #f17c07;
box-shadow:gray 4px 4px 4px;
border-radius:6px;
background:#20108f;/* IE6, 7向け */
background-color:#20108f;
background-image:linear-gradient(#ccd2f2,#8070ef,#2f17d0,#20108f);
color:#ffffff;
text-shadow: 1px 1px 3px #000;
}
/* メニューリストのリンク */
#topmenu ul.menu li a{ /* 通常時 */
display:block;
margin:0;
padding:0;
text-align:center;/*中央寄せ*/
font-size:14px; /*ボタンの文字サイズ*/
color:#ffffff;
text-shadow: 1px 1px 3px #000;
font-weight:bold; /*太字*/
text-decoration:none;/*下線(なし)*/
}
/* メニューリストのリンク（マウスオーバー時） */
#topmenu ul.menu li a:hover{ /*カーソルが乗った時*/
color:#ffffff; /*文字色(白)*/
font-weight:bold; /*太字 */
text-decoration:underline;/*下線(あり)*/
background-color:; /*背景色()*/
background-image:url(http://stat.ameba.jp/user_images/20131029/14/sumitak1329/80/e5/j/o0189004012731843526.jpg);/*背景イメージ*/
}
･･･ということなのですが･･･
これだけ、英語が羅列されたら、うわぁ～～～、って叫びたくもなりますよね^^;
失礼しました<m(__)m>
＜参照＞
メニューバーの背景色を画像ではなくて、グラデーションにしたい場合は、こちらの記事をご覧くださいませ↓
『メニューバーをグラデーションにするには』
以上、メニューバーのカスタマイズでした。
LIDS札幌・ライフデザインスクール
川上 雄大
