スポンサーリンク
WordPressのナビゲーションのメニュー部分をカスタマイズとしていきます。メニュー部分の色や高さ、文字の大きさと色、それから背景色などを変更します。「ナビゲーションメニューを均等に配置する方法」や「サブメニューのカスタマイズ」も紹介します。
メニュー部分というのは最初このようになっています。
ナビメニューの高さを低くして背景色と文字色を変更します。
ナビゲーションメニューのカスタマイズ
子テーマで作成したスタイルシート (style.css)を使います。変更箇所のコードは下記の通りです。
1
2
3
4
5
6
7
8
9
10
11
12
13
|
/* ナビメニュー */ .main-navigation li a { color : #fff ; /* 文字色(白) */ font-weight : bold ; /* 太字にして */ line-height : 25px ; /* 高さ */ font-size : 15px ;} /* 文字の大きさ */ .main-navigation ul { margin : 0 ; /* 余白をなくす */ background : #1F5E73 ; /* 背景色 */ box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } |
文字を右にずらしたいときには「padding-left: ●●px;を追加して下さい。カーソルが乗った時の色と訪問済みの色も指定できます。
1
2
|
.main-navigation li a:visited { color : #fff ;} .main-navigation li a:hover{ color : #7a8285 ;} |
「a:visited」が訪問済みの色で「a:hover」がカーソルを載せた時の色です。それぞれ設定しておきましょう。
ナビゲーションのメニューを均等に並べる方法
ナビゲーションのメニューは通常は「左揃え」のような状態になっているので、右側に余白ができてしまう場合があります。
メニューに設置した項目を均等に並べるようにします。子テーマのスタイルシートに次のコードを追加して下さい。
1
2
3
4
5
6
7
8
9
10
11
|
@media screen and ( min-width : 960px ) { .main-navigation ul.nav-menu { display : table !important ; table-layout : fixed ; text-align : center ; width : 100% ;} .main-navigation li { display : table-cell ; vertical-align : middle ;} } |
ulには「display:table」、liには「display:table-cell」を指定する事で均等にできます。
サブメニューをカスタマイズする場合
WordPressのメニューナビにサブアイテム(サブメニュー)を設置しているときは、WordPressの管理画面は、から「外観」⇒「メニュー」と進んでメニューを右にずらすとサブメニューになります。
これで保存して確認するとサブメニューが縦に開きます。
このサブメニューのカスタマイズは、スタイルシートに次のコードを追加するだけです。
1
2
3
4
5
6
7
8
9
10
11
|
/* ナビゲーションサブメニュ- */ ul.sub-menu li a{ color : #fff !important ; /* サブメニュー文字色 */ background-color : #1F5E73 !important ; /* サブメニューの背景色 */ font-size : 12px !important ; /* 文字の大きさ */ font-weight : bold !important ; /* 文字を太字に */ } ul.sub-menu li { margin-right : 0px !important ; /* サブメニューの右の余白を0に */ } |
後はカラーや文字の大きさを自分好みに変更して下さい。
スポンサーリンク