スポンサーリンク
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に */} |
後はカラーや文字の大きさを自分好みに変更して下さい。
スポンサーリンク
