あずきです🐥
当ブログでも愛用中の人気WordPressテーマ「ACTION AFFINGER6」における…
ヘッダーメニューの背景色・枠線色・文字色設定
のカスタマイズ方法について、ブログ初心者さん向けに１からわかりやすく解説していきます
まず！
ACTION AFFINGER6では、「ヘッダーメニュー」の色設定を…
- PC画面用
- スマホ画面用
で個別に指定していく仕様ですが、具体的には【PC画面用】のヘッダーメニューが…
↓（設定後の一例）
そして【スマホ画面用】のヘッダーメニューが…
↓（設定後の一例）
上記のエリアをそれぞれ指します
補足
今回ご紹介するなかの【スマホ画面用】ヘッダーメニューについては、ACTION AFFINGER6の設定画面上だと…
スマホミドルメニュー
と表記されているものになります（スマホスライドメニューと混同しないようご注意ください）
ということで、さっそく見ていきましょー🐥
2020年1月から毎日コツコツ作ってきたワードプレス初心者ガイド、
・役に立ちました！
・わかりやすかったです！みたいな大変ありがたいお言葉を頂けるケースが最近増えてきたので、改めて載せておきますhttps://t.co/QJohn2MGlF
— あずき@ブロガー (@azuki_rinrin) July 13, 2020
Contents
【スマホ用も】AFFINGER6「ヘッダーメニューの背景色・枠線色・文字色設定」のカスタマイズ方法を初心者向けに解説【ACTION／WordPressブログ】
まずは、WordPress管理画面の左側一覧から…
外観 ＞ カスタマイズ
をクリックし、さらにそのなかの左側一覧から…
各メニュー設定
というタブをクリックします
ACTION AFFINGER6「ヘッダーメニューの背景色・枠線色・文字色設定」のカスタマイズ方法：【PC画面用】の場合
「各メニュー設定」のタブを開いたら、ここから【PC画面用】の場合は…
↑「PCヘッダーメニュー」というタブをクリックしましょう
ACTION AFFINGER6では、初期状態でヘッダーメニューが…
↑ このように、ブルー系の色設定になっています
関連
「そもそもヘッダーメニューってどうやって作るの…？」という場合は、こちらをどうぞ ↓
-
【スマホ用も】AFFINGER6「ヘッダー＆フッターメニュー」の作り方を初心者向けに解説【ACTION／WordPressブログ】
続きを見る
で、この【PC画面用】ヘッダーメニューにおける色設定は…
↑ こちらの…
- 背景色
- 背景色（グラデーション上部）
- ボーダー上下色
- ボーダー左右色
- ボーダー右色
- 文字色
という項目で、それぞれ設定できます
今回は例として…
↑ こちらの配色に設定してみます（カラーコードは下記の通り）
- 背景色 → #523634
- 背景色（グラデーション上部） → #523634
- ボーダー上下色 → #ffffff
- ボーダー左右色 → #ffffff
- ボーダー右色 → #ffffff
- 文字色 → #ffffff
画面中央のプレビューで確認してみると…
↑ このようなヘッダーメニューになりました
ちなみに、細かいカスタマイズについては同じ設定ページにある…
↑ こちらの項目で指定することができます
例えばこのなかの…
- 「メニューをセンター寄せにする」 → チェックあり
- 「メニューの幅（px）」 → 265
という内容に変更してみると…
↑ メニュー内の各タイトルが「左寄せ」から「中央寄せ」になり、１つ１つのタイトル幅もいい感じに広がりました
ということで、最後に「公開」ボタンをクリックしたら【PC画面用】ヘッダーメニューの色設定はこれで完了です🐥
このまま作業を続ける場合は、左上の ＜ ボタンで１つ前の「各メニュー設定」という画面に戻っておくと、このあとの手順がスムーズです
ACTION AFFINGER6「ヘッダーメニューの背景色・枠線色・文字色設定」のカスタマイズ方法：【スマホ画面用】の場合
さきほどの【PC画面用】と同様に、まずはWordPress管理画面の左側一覧から…
外観 ＞ カスタマイズ
をクリックし、さらにそのなかの左側一覧から…
各メニュー設定
のタブを開いて、今度は…
↑「スマホミドル / 横列メニュー」というタブをクリックします
補足
同じページに「スマホメニュー（スマホヘッダー）」というタブもあるので、間違えないように注意しましょう
この「スマホメニュー（スマホヘッダー」は、通常のヘッダーメニューデザインと違い、スマホの左上などに表示させる…
メニューアイコンをタップするとメニューが開く
【スライドメニュー型】
のメニューを指します（くわしくは下記の記事をどうぞ）
-
AFFINGER6「スマホスライドメニュー」の作り方と、色・位置・デザイン設定のカスタマイズ方法を初心者向けに解説【ACTION／WordPressブログ】
続きを見る
ACTION AFFINGER6では、初期状態で【スマホ画面用】のヘッダーメニューが…
↑ このような配色になっているので、さきほどの【PC画面用】と同じ要領で…
- 文字色
- 背景色
- 背景色（グラデーション上部）
- ボーダー色（ミドルのみ）
という項目を、任意のカラーにそれぞれ設定していけばOKです
今回は例として…
↑ こちらの配色に設定してみます（カラーコードは下記の通り）
- 文字色 → #ffffff
- 背景色 → #523634
- 背景色（グラデーション上部） → #523634
- ボーダー色（ミドルのみ） → #ffffff
実際の【スマホ画面】上で確認してみると…
↑ このようなヘッダーメニューになりました
ということで、最後に「公開」ボタンをクリックしたら【スマホ画面用】ヘッダーメニューの色設定についてもこれで完了です🐥
関連
今回の記事はこちらの章に属しています
次の章はこちらからどうぞ
全９章のTOPページです
2020年1月から毎日コツコツ作ってきたワードプレス初心者ガイド、
・役に立ちました！
・わかりやすかったです！みたいな大変ありがたいお言葉を頂けるケースが最近増えてきたので、改めて載せておきますhttps://t.co/QJohn2MGlF
— あずき@ブロガー (@azuki_rinrin) July 13, 2020