ブログランキングの応援
をして頂けると励みになります。
ここをクリックしてくださいね。
人気ブログランキング
FC2ブログランキングアメブロカスタマイズで人気NO１って何だと思われますか？
私のブログの右サイドバーにある
「人気記事ランキング」をご覧ください。
ベスト３までを挙げると、下記のようになります。
上記のトップと第２位を見ると、読者の方は、
「ヘッダーメニュー」の設置に一番関心があるようです。
ちなみに、他の方のブログでもやはり同じように
「ヘッダーメニュー」に人気があるそうです。
ということで、今回は、ヘッダーメニューの設置方法を
まとめてみたいと思います。
HTMLをフリースペースへ入力・［マイページ］→［クイックリンク］→［フリースペースの編集］
の順にクリックして、フリースペースの編集画面を表示します。
・次に、下記のHTMLを上記のフリースペースの編集画面
にコピペします。
［HTML］
<div id="gnavi"><ul class="Menu"><li><a
href="#" target="_blank">TOPページ</a></li><li><a
href="#" target="_blank">ページ１</a></li><li><a
href="#" target="_blank">ページ２</a></li><li><a
href="#" target="_blank">ページ３</a></li><li><a
href="#" target="_blank">ページ４</a></li></ul></div>
（注意事項）href="#" target="_blank">TOPページ</a></li><li><a
href="#" target="_blank">ページ１</a></li><li><a
href="#" target="_blank">ページ２</a></li><li><a
href="#" target="_blank">ページ３</a></li><li><a
href="#" target="_blank">ページ４</a></li></ul></div>
・#には、リンク先のURLを入力してください。
・TOPページ等青字の部分は、各自で付けたい名称に変更しましょう。
CSSの編集・［マイページ］→［クイックリンク］→［スキンCSSの編集］
の順にクリックして、CSSの編集画面を表示します。
・次に、下記のCSSを上記のCSS編集画面
にコピペします。
この後の方法は、いろいろありますが、
ここでは、最も簡単な方法をとりあげます。
［その１］背景色を設定する方法
［CSS］は、次の通りです。
/*■ヘッダーメニューの設置■*/
/*◆ メニュー全体の位置設定 ◆*/
#gnavi{
position:absolute; /* メニューの位置固定 */
top:329px; /* メニューの上下位置設定 */
left:0px; /* メニューの左右位置設定 */
width:950px; /* メニューの幅設定 */
}
#gnavi{
position:absolute; /* メニューの位置固定 */
top:329px; /* メニューの上下位置設定 */
left:0px; /* メニューの左右位置設定 */
width:950px; /* メニューの幅設定 */
}
/*◆ メニュー横並び設定 ◆*/
#gnavi li{
float:left;
}
#gnavi li{
float:left;
}
/*◆ メニュー通常時の設定 ◆*/
#gnavi li a {
display:block;
height:50px; /* メニュー１ケの高さ設定 */
width:190px; /* メニュー１ケの横幅設定 */
background-color:#0a246a; /* 背景色を濃い青に設定 */
text-align:center; /* 文字位置(中央揃えに設定) */
color:#ffffff; /* 文字の色(白に設定) */
font-weight:bold; /* 文字を太字に設定 */
text-decoration:none; /* 下線なしに設定 */
font-size:16px; /* メニューの文字サイズ */
padding-top:16px; /* メニューの文字の縦位置設定 */
height:34px; /* メニューの高さ調整 */
}
#gnavi li a {
display:block;
height:50px; /* メニュー１ケの高さ設定 */
width:190px; /* メニュー１ケの横幅設定 */
background-color:#0a246a; /* 背景色を濃い青に設定 */
text-align:center; /* 文字位置(中央揃えに設定) */
color:#ffffff; /* 文字の色(白に設定) */
font-weight:bold; /* 文字を太字に設定 */
text-decoration:none; /* 下線なしに設定 */
font-size:16px; /* メニューの文字サイズ */
padding-top:16px; /* メニューの文字の縦位置設定 */
height:34px; /* メニューの高さ調整 */
}
/*◆ メニューにマウスをのせた時の設定 ◆*/
#gnavi li a:hover{
color:#ee4752; /* 文字の色(赤色に設定) */
font-weight:bold; /* 太字に設定 */
background-color:#dddcdb; /* 背景色をグレーに設定 */
background-repeat:repeat; /* 背景色繰り返し */
}
#gnavi li a:hover{
color:#ee4752; /* 文字の色(赤色に設定) */
font-weight:bold; /* 太字に設定 */
background-color:#dddcdb; /* 背景色をグレーに設定 */
background-repeat:repeat; /* 背景色繰り返し */
}
［結果］次のようなヘッダーメニューになりました。
その他にもヘッダーメニュー作成のためのＣＳＳは、
いろいろありますので、次回以降もご紹介しますね。
次回もお楽しみに！