アメブロを本気でカスタマイズその7[グローバルナビとフッターナビの配置]

だいぶブログっぽくなってきました。

ここで通常のアメブロにはないグローバルナビとフッターナビを配置します。

まだ、どういうメニューにするかは決めてないので場所だけ決めちゃいます。

とりあえず…

<div id="footNav">
フッターナビ
</div>
<div id="headNav">
グローバルナビ
</div>

フリースペースに書いてみます。
実際に書くときは改行を入れないでください。改行を入れると勝手に<br />タグが入っちゃうので思ったようにデザイン出来なくなっちゃいます。

で、CSSで

#freespace{
padding:0;
}
#headNav{
width:600px;
height:40px;
position:absolute;
top:-60px;
right:20px;
background:red;
}
#footNav{
width:100%;
height:350px;
position:absolute;
bottom:-350px;
background:blue;
}

と指定します。
まず、#freespaceにpadding:0;を指定して前回
の『div.mainMenu』のpadding-bottom:20px;を打ち消します。

そして#headNavと#footNavをposition:absolute;を使って絶対配置します。
この時topやらrightやらでポジションを決めてますが、支点となるのはposition:relative;を指定している#warpになります。

どこに配置しかたわかりやすいようにbackgroundで赤と青を指定してます。
微調整はあとでやるとしてひとまずこんな感じ。

同じ要領でフリーブラグイン用の場所（右上）も指定してます。

こんな感じ。