カスタマイズ計画 9 メニューバー

あきこ@ゆっくりパソコンタイムです。


やぁっと、メニューバーまでたどり着きました。
ヘッダーの下に合わせるのに苦戦しました。


ここでは、メニューバーの高さを30pxにしています。
メニューの数は5つにしてます。

まず、メニューバーを表示するために、メッセージ枠を下にずらします。
　　［ブログを書く］－［デザインの変更］－［CSSの編集］　からcssの編集画面を開きます。
　　

/* ---------- message : メッセージ枠 ---------- */
#message{


↑この文字列を検索し、
#message{
・・・・
}

の間に
margin-top:30px;
を追記します。


ｃｓｓの一番下にメニューバーの設定を追記します。
　　これ↓をまるっといってください。


/* ----------------------------------------------------- */
/* メニューバー */
.readerMainLink{
padding-top:30px;
}

/* トップからの位置調整　*/
#navcontainer{
position: absolute;
top:0px;
z-index: 100;
left:-10px;
}
#frame{
position:relative;
}

ul#gnavi {
position :absolute;
top :0px; /* ヘッダー画像の高さ */
width :800px; /* メニューバーの幅 */
　　　　
}
ul#gnavi li {
float :left;
text-align :center; /* メニュー文字　文字を中央に揃えます */
}
ul#gnavi li a {
background-color:#e6bfab;
display :block;
height :30px; /* メニューバーの高さ ここを変えたらメニューの高さが変えられます */
/* 高さを変える場合は ［メニューバー］［メッセージボード］も変更します */
width :120px; /* メニューバーの１つの幅 ここを変えたらメニューの幅が変えられます*/

}
/* メニューバーのリンク文字 */
ul#gnavi li a {
color :#FFFFFF;
font-weight :bold;
text-decoration :none;
font-size :1.2em;
}
ul#gnavi li a:visited {
text-decoration :none;
}
ul#gnavi li a:hover {
text-decoration :none;
color :#FFFFFF;
background-color:#622d18;
}
ul#gnavi li a span {
display :block;
padding-top :5px;
}


cssを保存します。

フリースペースにメニューバーに表示するリンク文字とリンク先を指定します。
　　この太字があると先ほどのcssがいきてきます。

<div id="navcontainer">
<ul id="gnavi"><li><a href="http://ameblo.jp/nonbirixaki/"><span>TOPページ</span></a></li>
<li><a href="http://ameblo.jp/nonbirixaki/entry-10656044587.html"><span>教室メニュー</span></a></li>
<li><a href="http://ameblo.jp/nonbirixaki/entry-10711575763.html"><span>カスタマイズ計画</span></a></li>
<li><a href="http://ameblo.jp/nonbirixaki/entry-10711593728.html"><span>その他オススメ</span></a></li>
<li><a href="http://form1.fc2.com/form/?id=588656" target=_top><span>お問い合わせ</span></a></li>
</ul><div>


↑は改行すると表示が崩れるので、改行をすべて取ってから保存します。


cssとフリースペース、両方保存したら表示して確認します。