今回はヘッダーの下にナビゲーションメニューを画像で表示してみたいと思います。
なお、アメデコでは「カスタム可能」な中にある「CSS編集用デザイン」を元に
記事を書かせて頂いておりますので、そちらをご了承頂いた上でご覧ください。
※ヘッダーは初期状態の何も設置していない状態から
横幅980px 縦幅60pxのナビゲーションメニューの画像を
表示することを前提でこちらの記事を書いております。
今回CSSの編集に追加するCSSは下記の内容です。
皆様の用意する画像のサイズによってオレンジ色の部分のみ変更してください。
今回私が使用した画像は横幅980px 縦幅120pxのナビゲーション画像です。
え？と思う方もいるでしょう。
なぜ、表示する画像が横幅980px 縦幅60pxなのに使用する画像は
横幅980px 縦幅120pxなのか、それも記事内で紹介していきたいと思います。
それでは早速やっていきましょう。
CSSの編集に追加する内容
.skinContentsArea{
position: relative;
padding-top: 85px;
}
ul#headerNavi{
position: absolute;
width: 980px;
top: 0;
left: 0;
}
ul#headerNavi li{
float: left;
}
ul#headerNavi li a{
background-image: url("画像のURL");
background-repeat: no-repeat;
text-indent: -9999px;
height: 60px;
display: block;
}
/* menu01用 */
ul#headerNavi li#menu01 a{
width: 196px;
background-position: 0 0;
}
ul#headerNavi li#menu01 a:hover{
background-position: 0 -60px;
}
/* menu02用 */
ul#headerNavi li#menu02 a{
width: 196px;
background-position: -196px 0;
}
ul#headerNavi li#menu02 a:hover{
background-position: -196px -60px;
}
/* menu03用 */
ul#headerNavi li#menu03 a{
width: 196px;
background-position: -392px 0;
}
ul#headerNavi li#menu03 a:hover{
background-position: -392px -60px;
}
/* menu04用 */
ul#headerNavi li#menu04 a{
width: 196px;
background-position: -588px 0;
}
ul#headerNavi li#menu04 a:hover{
background-position: -588px -60px;
}
/* menu05用 */
ul#headerNavi li#menu05 a{
width: 196px;
background-position: -784px 0;
}
ul#headerNavi li#menu05 a:hover{
background-position: -784px -60px;
}
それでは解説していきたいと思います。
「.skinContentsArea」から見ていきましょう。
このCSSはヘッダー以降のコンテンツのを囲うボックスで、
元々980pxの設定等がされており、その要素に追加する内容が下記になります。
「position: relative;」でこのボックスを基準とします。
「padding-top: 85px;」でこの中に入るコンテンツに85pxの空間を取ります。
画像が60pxなのに85pxなのは、ナビゲーションとナビゲーション以下の
コンテンツとの距離を25px空間を空けることを想定して設定しています。
position要素については「HTMLクイックリファレンス」様のWebサイトで
詳しく紹介されておりますので、詳しく知りたい方はよく読んでみてください。
では次に「ul#headerNavi」を見ていきましょう。
「position: absolute;」で上記で指定した基準のボックスに対して配置をします。
「width: 980px;」で横幅980pxの設定をします。
「top: 0;」や「left: 0;」で基準のボックスからどの位置で表示するかを設定します。
では次に「ul#headerNavi li」を見ていきましょう。
「float: left;」でheaderNaviのli要素を全て左に寄せて後に続く内容を回り込ませます。
float要素につきましても「HTMLクイックリファレンス」様のWebサイトで
詳しく紹介されておりますので、詳しく知りたい方はよく読んでみてください。
では次に「ul#headerNavi li a」を見ていきましょう。
「background-image: url("画像のURL");」で下記の画像を読み込んでいます。
「background-repeat: no-repeat;」で画像の繰り返しを無しにしてあります。
「text-indent: -9999px;」でliの表示しているテキストを左に9999px表示をずらして
テキスト自体を一般的なモニタでは見えないようにしております。
「height: 60px;」で表示している画像の高さを60pxに設定をします。
「display: block;」でliのそれぞれをブロック要素にします。
では次に「ul#headerNavi li#menu01 a」を見ていきましょう。
これはliの中のmenu01を指定したa要素に対して設定する内容です。
「width: 196px;」で横幅196pxを設定します。
「background-position: 0 0;」で「ul#headerNavi li a」で設定した背景の位置を設定します。
つまり下記の画像を左から0px 上から0pxの196pxの位置を
読み込んであげることになります。
では次に「ul#headerNavi li#menu01 a:hover」を見ていきましょう。
これは先ほどの設定したmenu01に対して、
その位置にマウスが乗った場合に表示するCSSを設定する内容です。
「background-position: 0 -60px;」で左から0px 上から-60pxの位置を設定します。
位置的に見るとこの位置の画像を読み込んでいることになりますね。
では次に「ul#headerNavi li#menu02 a」を見ていきましょう。
これもmenu01の時と同じように、
「width: 196px;」で横幅196pxを設定します。
「background-position: -196px 0;」で左から-196px 上から0pxの位置を設定します。
位置的に見るとこの位置の画像を読み込んでいることになりますね。
これ以降も全て同じように設定していきます。
読み込んでいる背景の画像のサイズと、位置を設定してあげてしまえば
1枚の画像で全て設定することが可能になります。
※画像は作る時や設定する際に分かりやすくなるように、
上が通常時、下がマウスオーバー時という事で縦が60pxの場合は
上下がピッタリ付いている縦が120pxの画像をつくってから挑戦してみてください。
こちらの設定を全て行ったら次はフリースペースへHTMLを記述してあげましょう。
<ul id="headerNavi">
<li id="menu01"><a href="#" title="メニュータイトル名1">メニュータイトル名1</a></li>
<li id="menu02"><a href="#" title="メニュータイトル名2">メニュータイトル名2</a></li>
<li id="menu03"><a href="#" title="メニュータイトル名3">メニュータイトル名3</a></li>
<li id="menu04"><a href="#" title="メニュータイトル名4">メニュータイトル名4</a></li>
<li id="menu05"><a href="#" title="メニュータイトル名5">メニュータイトル名5</a></li>
</ul>
ただ、このまま記述してしまうとフリースペース内では隙間ができてしまうので、
上記を一行でフリースペースへ追加してあげてください。
フリースペースへ追加する内容
<ul id="headerNavi"><li id="menu01"><a href="#" title="メニュータイトル名1">メニュータイトル名1</a></li><li id="menu02"><a href="#" title="メニュータイトル名2">メニュータイトル名2</a></li><li id="menu03"><a href="#" title="メニュータイトル名3">メニュータイトル名3</a></li><li id="menu04"><a href="#" title="メニュータイトル名4">メニュータイトル名4</a></li><li id="menu05"><a href="#" title="メニュータイトル名5">メニュータイトル名5</a></li></ul>
こんな感じで追加したらブラウザで確認してみましょう。
上記の画像ではマウスのアイコンが出ていませんが、
3つ目のメニューにマウスが乗っている状態の表示です。
上記のような感じに表示されていれば完成です！
今回も、注意する部分が一箇所あります。
ヘッダー画像をマイページの「画像フォルダ」からアップロードした場合、
横幅800pxを超える画像は強制的に800pxに縮小されてしまいます。
横幅800pxを超える画像の場合は「CSSの編集」画面に横幅の上限のないファイルが
5枚までアップロードできるので、大きい画像はそちらにアップロードしましょう。
※gif、jpg、pngのみ、5枚(各1MB以内)までアップロード可能です。
皆様もナビゲーションを画像でカスタマイズしてみてはいかがでしょうか？
最後まで記事を読んでくれてありがとうございました！