ヘッダー下に メニュー挿入正規

作業のステップはこれまでのカスタムと比べると多いですが、難しいことはありません。先ずは『CSSの編集』画面を開きます。（CSSの編集画面までの開き方はコチラ をご参照ください）

そして、以下をコピーして、『CSSの編集』の一番下に貼り付けます。


/*-----ここから-----*/



#wrap{
margin-top:50px;
}



/*-----ここまで-----*/


上記を貼り付けることで、ヘッダー画像の下にメニューを挿入するスペースを確保したことになります。（以下の画像の赤枠部分）


次にフリースペースへ『どのリンク先のURLをどのメニューで表示するか』の登録をします。

以下の赤字標記部分を修正してフリースペースへ貼り付けてください。



<div id="topmenu">
<ul>
<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>



例えば、Yahoo!へリンクを貼りたい場合は以下のように書き換えます。
<li><a href="http://www.yahoo.co.jp/">Yahoo!</a></li>

【注意】上記は説明のため改行を入れてありますが、フリースペースは改行を受け付けないので、貼り付ける際は改行を削除し、以下の形にしてから貼り付けてください。



<div id="topmenu"><ul><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>



最後に『CSSの編集』画面を開き、以下をコピーして『CSSの編集』の一番下に貼り付けます。


/*-----ここから-----*/



#topmenu {
width: 800px;/*ヘッダーの横幅サイズ*/
font-size:14px;/*文字のサイズ*/
font-weight:bold;/*太字*/
line-height:2;
display: block;
}
#topmenu ul{
margin:0;
padding:0;
}
#topmenu li {
width: 150px;/*メニュー1つの横幅サイズ*/
margin: 0 2px;/*メニュー間の隙間幅*/
border: 3px double #fff;
background-color:#009900;
text-align: center;/*中央寄せ*/
display:inline;/*IE6対策*/
list-style: none;
float: left;
}
#topmenu li a {
color: #ffffff;/*リンク文字の色*/
border: 1px solid #ffffff;
margin: 1px;
text-decoration: none;
display: block;
}
#topmenu li a:hover {
color: #ffffff;/*オンマウス時の文字の色*/
background-color:#99FF00;/*オンマウス時の背景色*/
}

#frame {
position: relative;
}
#topmenu{
position: absolute;
top:0px;/*上から*/
left:0px;/*左から*/
z-index: 100;
}

/*-----ここまで-----*/


最後にメニューの位置を下げるため、以下をコピーして『CSSの編集』の一番下に貼り付けます。


/*-----ここから-----*/



#topmenu{
position: absolute;
top:300px;/*上から*/
left:0px;/*左から*/
z-index: 100;
}



/*-----ここまで-----*/

赤字標記した数字は上から下へメニューを下げる数値です。数値が大きくなればなるほどメニューが下がります。ヘッダー画像とリンクメニューが重なる場合は、この数値を大きくして空白エリアにリンクメニューが来るよう調整してみてください。