cssちんちろりんの！！！

Vol．11　メニューバーを設置しよう！（後編）

Vol.10&11で全体の幅、メニューボタンの幅などを設定し、
メニューに使用するボタン（画像）の用意もできていると思います。

早速、設定していきましょう！

まずはフリースペースの設定をします。

【ブログを書く】

↓

【サイドバーの設定】

↓

【フリースペースの編集】を開き、以下をコピペしてください。

<div id="navi">
<a id="menu01" href="URL1">メニュー1</a>
<a id="menu02" href="URL2">メニュー2</a>
<a id="menu03" href="URL3">メニュー3</a>
<a id="menu04" href="URL4">メニュー4</a>
<a id="menu05" href="URL5">メニュー5</a>
</div>


「URL1～5」にはリンク先のアドレスを貼り付けてください。
「メニュー1～5」はそのままでもいいですし、
作成したメニュー画像に合わせて、文字を入れてもかまいません。

ちなみにちっちは、ＴＯＰ、ＰＲＯＦ、ＪＯＢ…などと入力しました。

どのボタンにリンクさせるのか、自分が分かればＯＫです！

※上記はメニューボタンを5つ設定する例

ここまでＯＫですか？次はフリースペースの配置をします。

【ブログを書く】

↓

【サイドバーの設定】

↓

【サイドバーの配置】から
サイドバーの一番下にフリースペースを設置してください。

※2カラム使用している場合は、どちらのサイドバーでもＯＫ。

一番下に配置すれば、問題ありません！


次にメニューボタンの画像をアップします。
用意したメニュー画像を一度ブログにアップし、

URLを控えておいてください。

画像URLの表示・保存方法はコチラ⇒簡単！CSS講座　Vol.8

次はいよいよ、CSSを編集していきます！！

くれぐれも、確認なしに保存はしないでくださいね！！！！

まずは、ヘッダーの高さを指定します。

【#header】とある場所を探し（結構下の方にあります）、

そこの高さを記載します。こんな風になります↓↓

#header {
background-image: url(あなたのヘッダー画像のＵＲＬ);
}

#header {
height: 416px;
}

#header {
background-repeat:repeat-x;
}

-------------------------------------------------

ピンクの部分は、ヘッダー画像を指示するＣＳＳです。

青色の部分が、ヘッダー画像＋メニューボタンの高さ。

黒色の【repeat-x;】はヘッダー画像は繰り返しませんという指示。

-------------------------------------------------

ちっちはヘッダー画像の高さが、微妙な【366pix】。

メニューボタンの高さが【50pix】なので、

366pix＋50pixで、【416pix】で設定しています。

こうすることで、ヘッダー画像の下に50pxの隙間が生まれます。
そこにメニューバーを設置するのです。


では、続けてCSSをいじっていきます。
以下のCSSを、先ほどいじった【#header】の下に挿入してください。


#navi {
position:absolute;
top:204px; /*-- ヘッダー画像上部の高さ＋ヘッダー画像の高さ --*/
height:50px;
}

#menu01 {
position:absolute;
display: block;
top:0px;
left:0px;
width:160px; /*-- メニューバーの幅 --*/
height:50px; /*-- メニューバーの高さ --*/
background:url(メニューバー1の画像URL) no-repeat;
text-indent:-9999px;
}
#menu01:hover {
background:url(メニューバー1のロールオーバー画像URL) no-repeat;
}

#menu02 {
position:absolute;
display: block;
top:0px;
left:160px;
width:160px;
height:50px;
background:url(メニューバー2の画像URL) no-repeat;
text-indent:-9999px;
}
#menu02:hover {
background:url(メニューバー2のロールオーバー画像URL) no-repeat;
}

#menu03 {
position:absolute;
display: block;
top:0px;
left:320px;
width:160px;
height:50px;
background:url(メニューバー3の画像URL) no-repeat;
text-indent:-9999px;
}
#menu03:hover {
background:url(メニューバー3のロールオーバー画像URL) no-repeat;
}

#menu04 {
position:absolute;
display: block;
top:0px;
left:480px;
width:160px;
height:50px;
background:url(メニューバー4の画像URL) no-repeat;
text-indent:-9999px;
}
#menu04:hover {
background:url(メニューバー4のロールオーバー画像URL) no-repeat;
}

#menu05 {
position:absolute;
display: block;
top:0px;
left:640px;
width:160px;
height:50px;
background:url(メニューバー5の画像URL) no-repeat;
text-indent:-9999px;
}
#menu05:hover {
background:url(メニューバー5のロールオーバー画像URL) no-repeat;
}

貼り付けられたら、

最初にアップしてもらったメニューボタンの画像URLを

（メニューバー○の画像ＵＲＬ）

（メニューバー○のロールオーバー画像ＵＲＬ）
に、貼り付けてください。

ここまで出来たら、一度プレビューボタンで確認！！

どうでしょうか？うまくメニューバーが設置されていますか？

ちょっとメニューバーがズレている……

そんなときは！！！

ごめんなさい、明確な解決策ではないのですが。。。

ちっちも最初はうまくいかなくて、、、

------------------------------------------------

#header {
height: 416px;
}

#header {
background-repeat:repeat-x;
}

#navi {
position:absolute;
top:455px; /*-- ヘッダー画像上部の高さ＋ヘッダー画像の高さ --*/
height:50px;
}
--------------------------------------------------

ピンクに色を変えている部分の数字をいじくりまくって

微調整しました。。。理由は定かではありません（涙）

だから、確定するまで絶対に「保存」は押さないでくださいね！

『メニューバーを設置しよう！』全3回、いかがでしたか？

ご理解いただけましたでしょうか？

説明がややこしくなってしまい、ごめんなさい。。。

質問等はコメント欄で絶賛受付中です。

ちっちが回答できる範囲であれば、お答えいたします！！

みなさんのステキなブログライフを、応援しています☆