アメブロのヘッダー設置方法について

質問

アメブロのフリースペースを使い、ヘッダーを作成したところ、
サイドバーの上部に重なってしまいました。しかも、左寄りです。
「トップ」「プロフィール」「問い合わせ先」などをブログに合わせセンターに設置したいのですが
対処方法を教えてください。

適用中条件

・適用中のデザイン：「CSS編集用デザイン」
・CSS編集用デザイン：3カラム・右ワイドメニュー
・CSS
/*++++++++++++++++++++++++++++++++++++++++
ヘッダーメニュー（フリースペース使用）
++++++++++++++++++++++++++++++++++++++++*/
ul#gnavi {
position :absolute;
top :300px; /* ヘッダー画像の高さ */
left :20px; /* #subFrameを基準とした左からの距離 */
width :800px; /* ヘッダーメニューの幅 */
}
ul#gnavi li {
float :left;
text-align :center; /* メニュー文字揃え */
}
ul#gnavi li a {
display :block;
height :50px; /* ヘッダーメニューの高さ */
width :160px; /* ヘッダーメニューの１つの幅 */
・フリースペース
<ul id="gnavi"><li class="menu1"><a href="http://トップのアドレス/"><span>トップ</span></a></li><li class="menu2"><a href="http://メニュー2のアドレス"><span>メニュー2</span></a></li><li class="menu3"><a href="http://メニュー3のアドレス"><span>メニュー3</span></a></li><li class="menu4"><a href="http://メニュー4のアドレス"><span>メニュー4</span></a></li><li class="menu5"><a href="http://メニュー5のアドレス"><span>メニュー5</span></a></li></ul>
・開設日　2011年9月12日

よろしくお願いいたします。

回答No.1

kiyoto-777 · ベストアンサー

・ＣＳＳ部分を下記にする。

/*++++++++++++++++++++++++++++++++++++++++
ヘッダーメニュー（フリースペース使用）
++++++++++++++++++++++++++++++++++++++++*/
ul#gnavi {
position:absolute;
top:300px; /* ヘッダー画像の高さ */
left:20px; /* #subFrameを基準とした左からの距離 */
width:800px; /* ヘッダーメニューの幅 */
}
ul#gnavi li {
float:left;
text-align:center; /* メニュー文字揃え */
}
ul#gnavi li a {
display:block;
height:50px; /* ヘッダーメニューの高さ */
width:160px; /* ヘッダーメニューの１つの幅 */
}
.skinFrame2{
width:980px ;/* コンテンツ幅を設定 */
margin:auto;/* 自動中央寄せ */
position:relative;/* 起点指定 */
}

・あなたのブログを見ないと位置設定は不明です。

・下記を入れることで、絶対配置の起点を決められます。

.skinFrame2{
width:980px ;/* コンテンツ幅を設定 */
margin:auto;/* 自動中央寄せ */
position:relative;/* 起点指定 */
}

お礼

ご回答ありがとうございました。
さっそく試してみます。
なかなかお答えがいただけず、ほとほと困り果てていました。