【WordPress】メニューバーの色を変更しスマホにも対応させる方法

ワードプレスのナビゲーションメニューと言われるメニューバーですが、色を変更してみたいと考えた方も多くいらっしゃるのではないでしょうか。
しかし初心者の方だと、どこをどう変えたらいいのか分からなかったり、変えることができたけどスマホの表示がおかしかったりと多少難しい部分があるかと思います。

そこでこの記事では編集場所や方法について、Xeory Baseのテーマを参考に１カ所１カ所解説していきます。

編集するファイルはstyle.css

この記事で焦点を当てている『ヘッダー（header）』と『ボディ（body）』ですが、色を変更するだけなので『style.css』というファイルの編集のみでカスタマイズすることができます。

style.cssへの移動

まずは編集を行うためにスタイルシートへ移動します。

これでカスタマイズの準備は整いました。
※カスタマイズは念のためバックアップを取ってから作業をすることをオススメします。

ファイルを更新しても反映されていない時は

スタイルシートのカスタマイズにおいて、反映されない時に主な原因となるのは下記の２つです。
カスタマイズを確認する上で参考にしてみて下さい。

●コードが間違っている
単純にコードの記述ミスによるものです。
入力した『#~~~~~~』の後に『;』を付いているかも確認しましょう。

●履歴の影響
Webの閲覧履歴の影響で、前に読み込んだcssのまま表示されてしまう時があります。
この場合は履歴を１度削除して確認してみると反映されます。

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

この記事ではXeroy Baseのテーマを使用しています。
ほとんどのテーマにあるように、このテーマでもスマホなどの横幅が違う場合に対応できるレスポンシブの記述があります。
そこで今回は『通常のナビゲーションメニュー』と『レスポンシブ』の２つの部分のカスタマイズを行っていきます。

通常のナビゲーションのカスタマイズ

〈作業イメージ〉

通常のナビゲーションのカスタマイズは、PC表示時のメニューの見え方の変更と考えてもらうと分かりやすいと思います。
まずはこの部分からカスタマイズしていきます。

メニュー全体の背景

style.cssの中から『#gnav {』を探し、まずは全体の背景色を変更していきます。
画像の『置き換える部分』を下のコードに置き換えて、更新してみて下さい。

すると下の画像のように文字の周囲全体の色が変わりました。

メニューの文字背景と文字色

style.cssの中から『#gnav li a {』を探し、次は文字背景色と文字色を変更していきます。
画像の『置き換える部分』を下のコードに置き換えて、更新してみて下さい。

すると下の画像のように文字と文字背景の色が変わりました。

マウスオーバー時のバーと文字色

style.cssの中から『#gnav li a:hover {』を探し、次はマウスオーバー時の文字色とバーの色を変更していきます。
画像の『置き換える部分』を下のコードに置き換えて、更新してみて下さい。

すると下の画像のようにマウスオーバー時の文字と文字背景の色が変わりました。

サブメニューの背景と文字色

style.cssの中から『#gnav li .sub-menu li a {』を探し、次はサブメニューの文字色と背景色を変更していきます。
画像の『置き換える部分』を下のコードに置き換えます。

今回この部分は色の更新はしていないので変化はありませんが、コードにガイドの文章を入れているので後々変更する時に分かりやすくなります。

マウスオーバー時のサブメニューの背景と文字色

style.cssの中から『#gnav li .sub-menu li a:hover {』を探し、次はサブメニューのマウスオーバー時の文字色を変更していきます。
画像の『置き換える部分』を下のコードに置き換えて、更新してみて下さい。

すると下の画像のようにサブメニューのマウスオーバー時の文字色が変わりました。

これで通常のナビゲーションのカスタマイズは完了です。

レスポンシブのカスタマイズ

〈作業イメージ〉

先ほどの変更では左の画像のようにスマホ版のカスタマイズが完成していないため、次にレスポンシブのカスタマイズを行っていきます。
レスポンシブのカスタマイズは、横幅による条件指定のようなものです。
今回編集した通常のナビゲーションメニューではスマホの表示が変なので、分かりやすいようにこの記事では『スマホ用』という仮名でカスタマイズしていきます。

レスポンシブのメニューの文字背景と文字色

style.cssの『レスポンシブ』の中から『#gnav ul li a {』を探し、スマホ用の文字色と文字背景色を変更していきます。
画像の『置き換える部分』を下のコードに置き換えて、更新してみて下さい。

すると下の画像のようにスマホ用の文字色と背景が変わりました。

サブメニューの背景と文字色

style.cssの『レスポンシブ』の中から『#gnav ul li .sub-menu li a {』を探し、スマホ用のサブメニューの文字色と文字背景色を変更していきます。
画像の『置き換える部分』を下のコードに置き換えて、更新してみて下さい。

すると下の画像のようにスマホ用のサブメニューの文字色と背景が変わりました。

レスポンシブのマウスオーバー時の背景

style.cssの『レスポンシブ』の中から『 #gnav ul li a:hover {』を探し、スマホ用のマウスオーバー時の文字色を変更していきます。
画像の『置き換える部分』を下のコードに置き換えて、更新してみて下さい。

すると下の画像のようにスマホ用のマウスオーバー時のメインメニューの文字色が変わりました。

マウスオーバー時のサブメニューの背景と文字色

style.cssの『レスポンシブ』の中から『 #gnav ul li .sub-menu li a:hover {』を探し、スマホ用のマウスオーバー時の文字色を変更していきます。
画像の『置き換える部分』を下のコードに置き換えて、更新してみて下さい。

すると下の画像のようにスマホ用のマウスオーバー時のサブメニューの文字色と背景色が変わりました。

これでレスポンシブの方のカスタマイズも完了し、メニューのカスタマイズの全てが完成しました。

この記事で行ったカスタマイズは色の一例で、『#~~~~~~』のカラーコードを変更することで好きな色を使用したメニューを作成できます。
カラーコードは色見本とコードをWebで検索できますので、ぜひ試してみて下さい。