affinger-color-setting-header-menu-202002-ec

WordPress

WING AFFINGER5で「ヘッダーメニューの色設定」をカスタマイズする手順【WordPressブログ】



今回は、このブログでも愛用中のWordPressテーマ「WING(AFFINGER5)」における…

「ヘッダーメニュー色」のカスタマイズ手順

をご紹介していきたいと思います

具体的には…

  • PC用ヘッダーメニュー
  • スマホ用ヘッダーメニュー

この2ヶ所における色設定になります

画像で見ると、初期設定では…

affinger-color-setting-header-menu-20200217_sample-pc01

↑ PC用ヘッダーメニューは、この画面上部にある水色エリア

affinger-color-setting-header-menu-20200217_sample-mobile01b

↑ そしてスマホ用ヘッダーメニューは、この(広い方の)水色エリア

これらのカスタマイズ手順は、「WING(AFFINGER5)」だと超簡単です

5分もかからないよ

それではさっそく見ていきましょー🐥

当ブログのWordPress環境

  • 使用してるテーマ:WING(AFFINGER5)
  • 使用してるエディタ:旧エディタ(クラシックエディタ)
  • 使用してるプラグイン:↓ の記事ですべて公開してます

WordPressブログで愛用中のおすすめプラグイン「16個」と設定方法をまとめて公開

wing300_gif_osusume

WordPressテーマ WING(AFFINGER5)

この記事を書いた人

azuki_01

あずき

専業ブロガー / フリーランス3年目 / 元アパレル / WordPressとSEOを独学で学んで、10年間の会社員生活から独立しました

【ヘッダーメニュー編】WING AFFINGER5における、ブログの「色設定」をカスタマイズする手順【PC/スマホ】

まずは、WordPressのカスタマイズ画面を開きましょう(下記手順です)

affinger-color-setting-header-menu-20200217_top-01

↑ WordPress管理画面 > 外観 > カスタマイズ をクリックします

affinger-color-setting-header-menu-20200217_top-02

↑ カスタマイズ画面が開いたら、左側のメニュー一覧から「メニューのカラー設定」という項目をクリックします

ここから…

  • PC用ヘッダーメニュー
  • スマホ用ヘッダーメニュー

それぞれの色設定のカスタマイズ手順を見ていきます

まずは「PC用」から!

PCヘッダーメニューの色設定

pc-work-202001_01

それでは、「PC用ヘッダーメニュー」の色設定です

さきほどもお伝えした通り…

WordPress管理画面 > 外観 > カスタマイズ > メニューのカラー設定 

で「メニューのカラー設定」画面を開けたら…

affinger-color-setting-header-menu-20200217_1-01

↑ 左側のメニュー一覧から、「PCヘッダーメニュー」をクリックしましょう

affinger-color-setting-header-menu-20200217_1-02

↑ まずは、「背景色」「背景色(グラデーション上部)」の2つを設定してみます

ちなみに初期設定では、このヘッダーメニューの背景色が…

affinger-color-setting-header-menu-20200217_sample-pc01

↑ このように設定されてます

水色のとこ!

今回はこの背景カラーを…

affinger-color-setting-header-menu-20200217_1-03

↑ ネイビー系の色味にあたる「#1001b2」に設定してみます

ちなみに今回はグラデーションは使わないので、「背景色(グラデーション上部)」という項目も、さきほどの「背景色」と同じ「#1001b2」に設定します

プレビュー画面で見てみると…

affinger-color-setting-header-menu-20200217_1-04

↑ 背景色がネイビー系に変わりました

ただよく見ると、ネイビーの背景を囲ってる「枠線の色」が水色のままになってますね

ということで、今度は枠線もカスタマイズしたいと思います

この「枠線のカラー」設定は…

affinger-color-setting-header-menu-20200217_1-05

↑「ボーダー上下色」「ボーダー左右色」「ボーダー右色」という項目で、カスタマイズできます

今回はこの3項目とも…

affinger-color-setting-header-menu-20200217_1-06

↑ 真っ白にあたる「#ffffff」に変更してみます

改めてプレビューをチェックしてみると…

affinger-color-setting-header-menu-20200217_1-07

↑ ネイビーの背景色を囲う枠線が、ホワイトに変わりました

ちなみに、ヘッダーメニュー内の「文字色」も同じ画面で変更できます

affinger-color-setting-header-menu-20200217_1-08

↑「文字色」という部分で指定しましょう

今回はホワイトのままがよかったから、変更はしてないよ

改めてプレビュー画面をチェックしてみると…

affinger-color-setting-header-menu-20200217_sample-pc02

↑ こんな感じになりました

「PC用ヘッダーメニュー」の色設定は、これでOKです

affinger-color-setting-header-menu-20200217_1-09

↑ 設定を保存して実際のブログに反映させたい場合は、画面上部の 公開 をクリックしましょう

そして1つ前の「メニューのカラー設定」画面に戻る場合は、同じく上部の  をクリックします

ということで、今度は「スマホ用ヘッダーメニュー」の色設定も同じように見ていきます🐥

スマホヘッダーメニューの色設定

pc-work-202001_02

今度は、「スマホ用ヘッダーメニュー」の色設定です

まずは、さきほどと同じように「メニューのカラー設定」の画面を開きましょう

さきほどの「PCヘッダーメニュー」の設定画面から「メニューのカラー設定」画面へ戻るには、画面上部の  をクリック

カスタマイズ画面そのものを一度閉じた場合は、 WordPress管理画面 > 外観 > カスタマイズ > メニューのカラー設定 でまた開けます

「メニューのカラー設定」を開けたら…

affinger-color-setting-header-menu-20200217_2-01

↑ 左側のメニュー一覧から、「スマホミドル / 横列メニュー」をクリックします

affinger-color-setting-header-menu-20200217_2-02

↑ あとはさきほどのPC用と同じように、「文字色」「背景色」「背景色(グラデーション上部)」「ボーダー色」をそれぞれ指定しましょう

初期設定だと、スマホの画面上では…

affinger-color-setting-header-menu-20200217_sample-mobile01b

↑ こんな感じです

で、今回はさきほどの「PC用」と同じように…

affinger-color-setting-header-menu-20200217_2-03

↑ このように設定してみます(ネイビーは「#1001b2」、ホワイトは「#ffffff」のカラーコードを使ってます)

スマホのプレビューで確認してみると…

affinger-color-setting-header-menu-20200217_sample-mobile02b

↑ こんな感じ

ちなみに、色設定のすぐ下にある 周りに余白(ミドルのみ) という項目にチェックを入れると…

affinger-color-setting-header-menu-20200217_sample-mobile03b

↑ このように、メニューの両端に少し余白を出すこともできます

好みで決めよう(自分はこの余白は作らない派)

また設定を保存するときは、画面上部の 公開 を忘れずにクリックしましょう

今回の「ヘッダーメニュー色のカスタマイズ」の解説は、これで以上です

お疲れさまでした♪

あずき🐥

wing300_gif_osusume

WordPressテーマ WING(AFFINGER5)

この記事を書いた人

azuki_01

あずき

専業ブロガー / フリーランス3年目 / 元アパレル / WordPressとSEOを独学で学んで、10年間の会社員生活から独立しました

-WordPress

Copyright© あずきのぶろぐ。 , 2020 All Rights Reserved.