PCインストラクターの川上です。
実は、このようなリクエストいただいておりまして（笑）
その後、さらに「ひとりごと」もしてきまして･･･
ナニワの根性に負けました（笑）
ですので、
今日は、メニューバーのことをおさらいします（笑）
まず、メニューバーってココです↓
そう･･･、パソコンで見ないとわからないのですが、上の方にある帯のようなものです。
で、
ワタクシ･･･以前、アメブロのヘッダー画像下のメニューバーの設置の仕方を書いております↓
ウエストみたいなヘッダーの下の帯って【メニューバーの設置方法】
現在設定しているデザインが、「CSS編集デザイン」の方と、「既存のデザイン」の方で、設定方法が異なります。
今回は、「CSS編集デザイン」での設定方法のおさらいになります。
１．「フリースペース編集」にHTMLタグ（メニューの指定やリンク）を書き込む
２．CSS編集でデザインを整える
ココで気をつけなければならないことは
１．と２．で
id="topmenu"
や
class="menu"
といった、IDやCLASSの名前は合わせておくことが大切です。
今回、私が指定しているIDは"topmenu"にしております。
ですので、一番最後にこのCSSソースを追加すると
/* メニューリスト */
#topmenu ul.menu li{
width:189px; /*1つの幅*/
margin:0.5px; /*メニューのスキマ*/
border:3px double #ffffff;/*線の太さ 種類 色*/
background-image:linear-gradient(#f7d7e4,#eca6b3,#de5c70,#d94057);/* 赤のグラデーション */
background-color: #d94057; /* 背景色－赤色 */
line-height:40px;/*ボタンの高さ*/
text-align:center;/*中央寄せ*/
display:inline;
list-style:none;
float:left;
}
このように、赤色のグラデーションにすることができます。
または、このCSSソースにすると
/* メニューリスト */
#topmenu ul.menu li{
width:189px; /*1つの幅*/
margin:0.5px; /*メニューのスキマ*/
border:3px double #ffffff;/*線の太さ 種類 色*/
background-image:linear-gradient(white,pink,pink);/* ピンクのグラデーション */
background-color: pink; /* 背景色－ピンク色 */
line-height:40px;/*ボタンの高さ*/
text-align:center;/*中央寄せ*/
display:inline;
list-style:none;
float:left;
}
上から、白→ピンクのグラデーションにすることができます。
または、このCSSソースにすると
/* メニューリスト */
#topmenu ul.menu li{
width:189px; /*1つの幅*/
margin:0.5px; /*メニューのスキマ*/
border:3px double #ffffff;/*線の太さ 種類 色*/
background-image:linear-gradient(pink,pink,white);/* ピンクのグラデーション */
background-color: pink; /* 背景色－ピンク色 */
line-height:40px;/*ボタンの高さ*/
text-align:center;/*中央寄せ*/
display:inline;
list-style:none;
float:left;
}
上から、ピンク→白のグラデーションにすることができます。
ちなみに･･･
背景色をグラデーションにするには、CSSソースを
background-image:linear-gradient(pink,pink,white);/* ピンクのグラデーション */
や
background-image:linear-gradient(#f7d7e4,#eca6b3,#de5c70,#d94057);/* 赤のグラデーション */
のように、
background-image:linear-gradient(色コード,色コード);
を使うとできますので^^!!
ただし、古いブラウザではグラデーションにならないので、
background-color: #d94057; /* 背景色－赤色 */
といった感じで、背景色を指定しておくとよいですね。
以上、アメブロカスタマイズでした。
LIDS札幌・ライフデザインスクール
川上 雄大
