今回は、このブログでも愛用中のWordPressテーマ「WING（AFFINGER5）」における…
「ヘッダーメニュー色」のカスタマイズ手順
をご紹介していきたいと思います
具体的には…
- PC用ヘッダーメニュー
- スマホ用ヘッダーメニュー
この2ヶ所における色設定になります
画像で見ると、初期設定では…
↑ PC用ヘッダーメニューは、この画面上部にある水色エリア
↑ そしてスマホ用ヘッダーメニューは、この（広い方の）水色エリア
これらのカスタマイズ手順は、「WING（AFFINGER5）」だと超簡単です
それではさっそく見ていきましょー🐥
このブログのWordPress環境
- 使用中のテーマ：WING AFFINGER5
- 使用中のエディタ：クラシックエディタ
- 使用中のプラグイン：おすすめプラグイン17選 の記事で公開しています
関連：「AFFINGER5」の購入・導入方法を1から解説
関連：「AFFINGER5」導入後にまず行うべきステップまとめ
著者
- 専業ブロガー・フリーランス -
あずき
独立3年目 / 元アパレル → 歴10年
20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます
普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^
Contents
【ヘッダーメニュー編】WING AFFINGER5における、ブログの「色設定」をカスタマイズする手順【PC／スマホ】
まずは、WordPressのカスタマイズ画面を開きましょう（下記手順です）
↑ WordPress管理画面 ＞ 外観 ＞ カスタマイズ をクリックします
↑ カスタマイズ画面が開いたら、左側のメニュー一覧から「メニューのカラー設定」という項目をクリックします
ここから…
- PC用ヘッダーメニュー
- スマホ用ヘッダーメニュー
それぞれの色設定のカスタマイズ手順を見ていきます
PCヘッダーメニューの色設定
それでは、「PC用ヘッダーメニュー」の色設定です
さきほどもお伝えした通り…
WordPress管理画面 ＞ 外観 ＞ カスタマイズ ＞ メニューのカラー設定
で「メニューのカラー設定」画面を開けたら…
↑ 左側のメニュー一覧から、「PCヘッダーメニュー」をクリックしましょう
↑ まずは、「背景色」「背景色（グラデーション上部）」の2つを設定してみます
ちなみに初期設定では、このヘッダーメニューの背景色が…
↑ このように設定されてます
今回はこの背景カラーを…
↑ ネイビー系の色味にあたる「#1001b2」に設定してみます
ちなみに今回はグラデーションは使わないので、「背景色（グラデーション上部）」という項目も、さきほどの「背景色」と同じ「#1001b2」に設定します
プレビュー画面で見てみると…
↑ 背景色がネイビー系に変わりました
ただよく見ると、ネイビーの背景を囲ってる「枠線の色」が水色のままになってますね
ということで、今度は枠線もカスタマイズしたいと思います
この「枠線のカラー」設定は…
↑「ボーダー上下色」「ボーダー左右色」「ボーダー右色」という項目で、カスタマイズできます
今回はこの3項目とも…
↑ 真っ白にあたる「#ffffff」に変更してみます
改めてプレビューをチェックしてみると…
↑ ネイビーの背景色を囲う枠線が、ホワイトに変わりました
ちなみに、ヘッダーメニュー内の「文字色」も同じ画面で変更できます
↑「文字色」という部分で指定しましょう
改めてプレビュー画面をチェックしてみると…
↑ こんな感じになりました
「PC用ヘッダーメニュー」の色設定は、これでOKです
↑ 設定を保存して実際のブログに反映させたい場合は、画面上部の 公開 をクリックしましょう
そして1つ前の「メニューのカラー設定」画面に戻る場合は、同じく上部の ＜ をクリックします
ということで、今度は「スマホ用ヘッダーメニュー」の色設定も同じように見ていきます🐥
スマホヘッダーメニューの色設定
今度は、「スマホ用ヘッダーメニュー」の色設定です
まずは、さきほどと同じように「メニューのカラー設定」の画面を開きましょう
さきほどの「PCヘッダーメニュー」の設定画面から「メニューのカラー設定」画面へ戻るには、画面上部の ＜ をクリック
カスタマイズ画面そのものを一度閉じた場合は、 WordPress管理画面 ＞ 外観 ＞ カスタマイズ ＞ メニューのカラー設定 でまた開けます
「メニューのカラー設定」を開けたら…
↑ 左側のメニュー一覧から、「スマホミドル / 横列メニュー」をクリックします
↑ あとはさきほどのPC用と同じように、「文字色」「背景色」「背景色（グラデーション上部）」「ボーダー色」をそれぞれ指定しましょう
初期設定だと、スマホの画面上では…
↑ こんな感じです
で、今回はさきほどの「PC用」と同じように…
↑ このように設定してみます（ネイビーは「#1001b2」、ホワイトは「#ffffff」のカラーコードを使ってます）
スマホのプレビューで確認してみると…
↑ こんな感じ
ちなみに、色設定のすぐ下にある 周りに余白（ミドルのみ） という項目にチェックを入れると…
↑ このように、メニューの両端に少し余白を出すこともできます
また設定を保存するときは、画面上部の 公開 を忘れずにクリックしましょう
今回の「ヘッダーメニュー色のカスタマイズ」の解説は、これで以上です
お疲れさまでした♪
あずき🐥
関連：「AFFINGER5」の購入・導入方法を1から解説
関連：「AFFINGER5」導入後にまず行うべきステップまとめ
著者
- 専業ブロガー・フリーランス -
あずき
独立3年目 / 元アパレル → 歴10年
20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます
普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^