こんにちは
佐東です。
・・・・・・・・・・・・・・・・・・・・・・・
『アメブロセルフカスタムLesson』
今回は
『ナビゲーションメニューを作ってみよう！』です。
これが完成形
ヘッダー下の青い部分がナビゲーションメニューです。
※ヘッダー部分を分かりやすく色を付けています。
この部分、スマホでは表示されないのですが
PC表示の時、見たいページがすぐ見つけられるので
とても便利です。
『デザインの変更』でCSS編集用デザインを選択してください。
これでカスタムするベースができました。
残しておいてもいいのですが、ちょっとごちゃついてしまうので私は非表示派です。
『ブログ管理』→『デザインの設定』から
『ここをクリック』と記載しているリンクをクリックしてください。
CSS編集ができる画面になるので、一番下までスクロールして下さい。
▼これを入れます。
.skin-blogHeaderNav {
display: none;
}
↓↓↓↓
非表示になりました！
『ブログ管理』→『設定・管理』を選択
『フリースペース編集』画面を開きます。
▼これを入れます。
<div id="headerMenu">
<ul class="menu">
<li><a href="#" target="_blank">メニュー１</a></li>
<li><a href="#" target="_blank">メニュー２</a></li>
<li><a href="#" target="_blank">メニュー３</a></li>
<li><a href="#" target="_blank">メニュー４</a></li>
<li><a href="#" target="_blank">メニュー５</a></li>
</ul>
</div>
『＃』にはリンク先のURLを入力
『メニュー〇』にはナビゲーションメニューに表示させる文字を入力してください。
ex：プロフィール、お問合せなど
サイドバーの配置設定でフリースペースを『使用する機能』にしておくことをお忘れなく！
②で開いた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:40px; /* メニュー設置用スペース */
}
#headerMenu{
top:-35px; /* 上下位置調整 */
left:center; /* 左右位置調整 */
width:1120px; /* メニュー全体の幅 */
}
#headerMenu ul.menu li a{
width:224px; /* ボタンの幅 */
line-height:35px; /* ボタンの高さ お好みで調整 */
font-size:14px; /* ボタンの文字サイズ お好みで調整 */
}
/*位置・サイズ調整 */
/*色・文字装飾・背景 */
#headerMenu ul.menu li a{ /* 通常時 */
color:#ffffff; /* 文字の色(白) */
font-weight:bold; /* 文字を太字にする*/
text-decoration:none; /* 下線を消す*/
background-color:#1F5E73; /* 背景の色(濃い青) */
background-image:url(); /* 背景画像 */
background-repeat:repeat; /* 背景画像繰り返し */
}
#headerMenu ul.menu li a:hover{ /* カーソルが乗った時 */
color:#7a8285; /* 文字の色 */
font-weight:bold; /* 文字を太字にする */
text-decoration:underline; /* 下線を表示する */
background-color:#1F5E73; /* 背景色 */
background-image:url(); /* 背景画像 */
background-repeat:repeat; /* 背景画像繰り返し */
}
/*色・文字装飾・背景 */
ソースコードを入れると、こんな感じでナビゲーションメニューがヘッダーの下に配置されます。
今回メニューが5つのため、
メニュー全体の幅→1120px
1120px ÷ 5 ＝224px
となるため
ボタンの幅は224pxとしています。
この数字はメニューの数によって適宜変えてください。
また、文字の色・背景の色は好みで変更することができます。
こちらのページを参考に
#〇〇〇〇〇〇を書き換えることで
色を変更することができます。
他にもフォントを変えたり、背景に画像を入れたりすることもできます。
また『応用編』としてご紹介できたらと思います！
※この記事を作成にあたり、いくつか他者さまのブログを参考にさせて頂きました。
ありがとうございます。
----------
Webまわりのこと、プロフィール写真など
個人でお仕事をされている方のサポートをしています。
全メニューをご覧になりたい方は下記の『Menu』よりご確認くださいませ◎