PCインストラクターの川上です。
こんなご質問をいただきました。
緑は癒しの効果があります。なので、川上先生と同じメニューバーを設置したいのですが？
あ、私のメニューバーってこれです↓
はい～！それではさっそく垂れ流し（笑）ます～～（＾ｖ＾）
（サイドバーはもう出しちゃってますが^^→『サイドバーの見出しを「青」から「緑」へ』）
まず、アメブロのデザインが「CSSの編集デザイン」になっていないとダメですので、ご注意くださいませ。
（CSSって？という方はこちらの記事をご参考くださいませ～！）
それがOKならば、まずフリースペースにこちらのタグを↓
<div id="topmenu"><ul class="menu"><li><a href="http://hama-sush-jp.pro/sumitak1329/entry-11992307562.html">アメブロカスタマイズ</a></li><li><a href="http://hama-sush-jp.pro/sumitak1329/entry-11593572421.html">囲み枠の作り方</a></li><li><a href="http://hama-sush-jp.pro/sumitak1329/entry-11985559455.html">ブログで悩んだ時は</a></li><li><a href="http://hama-sush-jp.pro/sumitak1329/entry-11805937393.html">CSSの基本書式</a></li><li><a href="http://hama-sush-jp.pro/sumitak1329/entry-11422113200.html">お問い合わせ</a></li></ul></div>
ただし！！！
このタグは、本当に私が設置しているタグですので、赤文字のところは変えてくださいませ！
<div id="topmenu"><ul class="menu"><li><a href="http://hama-sush-jp.pro/sumitak1329/entry-11992307562.html">アメブロカスタマイズ</a></li><li><a href="http://hama-sush-jp.pro/sumitak1329/entry-11593572421.html">囲み枠の作り方</a></li><li><a href="http://hama-sush-jp.pro/sumitak1329/entry-11985559455.html">ブログで悩んだ時は</a></li><li><a href="http://hama-sush-jp.pro/sumitak1329/entry-11805937393.html">CSSの基本書式</a></li><li><a href="http://hama-sush-jp.pro/sumitak1329/entry-11422113200.html">お問い合わせ</a></li></ul></div>
あ、すなわち、
<div id="topmenu"><ul class="menu"><li><a href="リンク先の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></div>
の、「リンク先のURL」と「メニュー文字」はご自分のにしてくださいませ～！
その後は、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 #f64853;/*枠線の太さと色－赤色*/
box-shadow:gray 4px 4px 4px;
border-radius:6px;
background:#4dac26;/* IE6, 7向け */
background-color:#4dac26;/*緑色*/
background-image:linear-gradient(#d5edd5,#90ee90,#4dac26,#4dac26);/*緑のグラデ*/
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:linear-gradient(#4dac26,#4dac26,#4dac26,#d5edd5);/*緑の反対グラデ*/
}
ただし、このままだと、まったく私と同じ色合いになってしまいます（笑）
ですので、次の赤字のところを、ご自分の好きな色に変えてくださいませ～！
/* ▼▼▼ 緑の川上雄大メニューバー ▼▼▼ */
/* メニュー設置用スペース */
.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 #f64853;/*枠線の太さと色－赤色*/
box-shadow:gray 4px 4px 4px;
border-radius:6px;
background:#4dac26;/* IE6, 7向け */
background-color:#4dac26;/*緑色*/
background-image:linear-gradient(#d5edd5,#90ee90,#4dac26,#4dac26);/*緑のグラデ*/
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:linear-gradient(#4dac26,#4dac26,#4dac26,#d5edd5);/*緑の反対グラデ*/
}
ちなみに、色コードは調べるとよいですね～↓
あ、過去記事でも【メニューバーの設置方法】の記事書いていますので、そちらもご覧になっていただけると嬉しいです(^^♪
『ウエストみたいなヘッダーの下の帯って【メニューバーの設置方法】（プロフィールページ復活祝）』
以上、私と同じメニューバーでした。
LIDS札幌・ライフデザインスクール
川上 雄大
