ヘッダー画像下にナビゲーションを付ける

グローバルナビゲーション表示させるやり方を説明します。

難易度☆☆☆★★

おすすめ度☆☆☆☆☆

まずは左のメニューバーからフリースペースをクリックし下記のようなコードを空白の部分へ記入します。

<div id="headerMenu">
<ul class="menu">
<li><a href="#" target="_blank">メニュー1</a></li>
<li><a href="#" target="_blank">メニュー2</a></li>
<li><a href="#" target="_blank">メニュー3</a></li>
<li><a href="#" target="_blank">メニュー4</a></li>
<li><a href="#" target="_blank">メニュー5</a></li>
</ul>
</div>

次に、左のメニューバーからデザインの変更をクリックし、CSSの編集で下記のようなコードを一番最後の/* その他、拡張があれば記述 */の下に追加します。

/* グローバルメニュー*/
#wrap,.skinContentsArea{
position:relative;
}
#headerMenu{
position:absolute;
margin:0;
padding:0;
}
#headerMenu ul.menu{
margin:0;
padding:0;
list-style: none;
}
#headerMenu ul.menu li{
display:inline;
}
#headerMenu ul.menu li a{
display:block;
float:left;
margin:0;
padding:0;
white-space:nowrap;
overflow:hidden;
text-align:center;
}


/* 下記内容を変更して好みのものにアレンジしてください */


/* メニューの位置や大きさの設定 */
#wrap,.skinContentsArea{
padding-top:50px; /* グローバルメニューを設置する位置 */
}


#headerMenu{
top:-30px; 　　　　　　　/* 上下の位置 */
left:0px; 　　　　　　　　/* 左右の位置 */
width:980px; 　　　　　　 /* グローバルメニュー全体の幅 */
}
#headerMenu ul.menu li a{
width:196px; 　　　　　　/* ボタンの幅 */
line-height:40px; 　　　/* ボタンの上下 */
font-size:14px;　　　/* ボタン内のフォントサイズ */
}



/* カーソルが上に乗った時の変化の設定 */

　　/* 通常時 */
#headerMenu ul.menu li a{
color:#ffffff; 　　　　　/* フォントの色 */
font-weight:normal; 　　/* 文字太さ（ノーマル） */
text-decoration:none; 　　/* 文字の装飾(なし) */
background-color:#FFB9AD;　/* 背景の色 */
}


　/* カーソルが乗った時 */
#headerMenu ul.menu li a:hover{
color:#FF0000; 　　　　　　　/* フォントの色 */
font-weight:normal; 　　　　/* 文字太さ（ノーマル） */
text-decoration:none; 　　　/* 文字の装飾(なし) */
background-color:#FFE1E9;　　/* 背景の色 */
}


以上で完了です！
あとは、プレビューを見ながら微調整をしてください。