ナビゲーションメニューのカスタマイズ

スポンサーリンク
Pocket

 

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に */
}

後はカラーや文字の大きさを自分好みに変更して下さい。

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください