WORDPRESS

【2023年】AFFINGER6「ヘッダーメニュー色」のカスタマイズ設定方法。スマホ用も【ワードプレスブログ完全初心者ガイド/第6章/No.5】

AFFINGER6「ヘッダーメニュー色」のカスタマイズ設定方法。スマホ用も【ワードプレスブログ完全初心者ガイド/第6章/No.5】
 

専業ブロガー6年目のあずき猫です

 

当ブログでも愛用中の人気WordPressテーマ「ACTION AFFINGER6」における…

ヘッダーメニューの背景色・枠線色・文字色

のカスタマイズ設定方法について、ブログ初心者さん向けに1からわかりやすく解説していきます

 



 

まずACTION AFFINGER6では、「ヘッダーメニュー」の色設定を…

  • PC画面用
  • スマホ画面用

で個別に指定していく仕様ですが、具体的には【PC画面用】のヘッダーメニューが…

AFFINGER6「ヘッダーメニューの背景色・枠線色・文字色設定」のカスタマイズ方法 top-01-a

↓(設定後の一例)

AFFINGER6「ヘッダーメニューの背景色・枠線色・文字色設定」のカスタマイズ方法 top-01-b
 

そして【スマホ画面用】のヘッダーメニューが…

AFFINGER6「ヘッダーメニューの背景色・枠線色・文字色設定」のカスタマイズ方法 top-02-a

↓(設定後の一例)

AFFINGER6「ヘッダーメニューの背景色・枠線色・文字色設定」のカスタマイズ方法 top-02-b

 

上記のエリアをそれぞれ指します🐥

ということで、さっそく見ていこー!
 

補足

今回ご紹介するなかの【スマホ画面用】ヘッダーメニューについては、ACTION AFFINGER6の設定画面上だと…

スマホミドルメニュー

と表記されているものになります(スマホスライドメニューと混同しないようご注意ください)

 

▼ ACTION AFFINGER6の「購入・導入手順」はこちらから ▼

【2023年2月】AFFINGER6の購入・導入手順を1から徹底解説。子テーマまで【ワードプレスブログ完全初心者ガイド】

AFFINGER6の購入・導入手順を1から徹底解説。子テーマまで【ワードプレスブログ完全初心者ガイド】
【2023年2月】AFFINGER6の購入・導入手順を1から徹底解説。子テーマまで【ワードプレスブログ完全初心者ガイド】

続きを見る

  • 「ACTION AFFINGER6」が実際に使用できるようになるまでの ”一連の手順” を、
    画像付きでまるっと解説しています
  • 作業そのものは、正味【15分程度】でおわります(子テーマまで含めて)

インフォトップ ワードプレステーマ売上

公式:ACTION AFFINGER6

すごいもくじLITE

の限定特典キャンペーンも実施中!!!

※2021年発表Infotop Affidemy

 

【2023年】AFFINGER6「ヘッダーメニュー色」のカスタマイズ設定方法。スマホ用も【ワードプレスブログ完全初心者ガイド/第6章/No.5】

 

注意

当ブログガイドは、WordPressの編集エディタが「グーテンベルグ」ではなく…

クラシックエディタ

の前提で解説しています(圧倒的に使いやすく、またユーザー数も膨大であることから「情報もググりやすい」ので断然おすすめです)

 

そのため、お手元のWordPress環境が…

  • 無料プラグイン「Classic Editor」を有効化していない!
  • 代わりに、AFFINGERに付属の「Gutenbergプラグイン2」を有効化している!

という状態だと、画面のデザインや設定方法が(当ページの内容と)異なる可能性がありますのでご注意ください

 

▼ 「Classic Editor」を有効化する手順 ▼

  1. WordPress管理画面の左側一覧から、 プラグイン > 新規追加 をクリック
  2. 右上の検索フォームに Classic Editor と入力し、表示された「Classic Editor」の インストール > 有効化 を順にクリック 

▼ 「Gutenbergプラグイン2」を停止する手順 ▼

  1. WordPress管理画面の左側一覧から、 プラグイン > インストール済みプラグイン をクリック
  2. 表示された一覧のなかから、「Gutenbergプラグイン2」の「無効化」をクリック
 

関連

「クラシックエディタとグーテンベルグってなに…?」という場合は、こちらで1から解説しています ↓ ※重要です

WordPressクラシックエディタとグーテンベルグとは?Classic Editorの導入方法まで【ワードプレスブログ完全初心者ガイド/第4章/No.6】
WordPressクラシックエディタとグーテンベルグとは?Classic Editorの導入方法まで【ワードプレスブログ完全初心者ガイド/第4章/No.6】

続きを見る

 

まずは、WordPress管理画面の左側一覧から…

外観 > カスタマイズ

をクリックし、さらにそのなかの左側一覧から…

各メニュー設定

というタブをクリックします

ここから「PC用・スマホ用」の順にカスタマイズ方法を見ていくよ!
 

ACTION AFFINGER6「ヘッダーメニューの背景色・枠線色・文字色設定」のカスタマイズ方法:【PC画面用】の場合

WordPress ヘッダー c-01

外観 > カスタマイズ から「各メニュー設定」タブを開いたら、ここから【PC画面用】の場合は…

AFFINGER6「ヘッダーメニューの背景色・枠線色・文字色設定」のカスタマイズ方法 1-1-01

↑「PCヘッダーメニュー」というタブをクリックしましょう

 

ACTION AFFINGER6では、初期状態でヘッダーメニューが…

AFFINGER6「ヘッダーメニューの背景色・枠線色・文字色設定」のカスタマイズ方法 1-1-02

↑ このように、ブルー系の色設定になっています

 

関連

 

で、この【PC画面用】ヘッダーメニューにおける色設定は…

AFFINGER6「ヘッダーメニューの背景色・枠線色・文字色設定」のカスタマイズ方法 1-1-03-a

↑ こちらの…

  • 背景色
  • 背景色(グラデーション上部)
  • ボーダー上下色
  • ボーダー左右色
  • ボーダー右色
  • 文字色

という項目で、それぞれ設定できます

 

今回は例として…

AFFINGER6「ヘッダーメニューの背景色・枠線色・文字色設定」のカスタマイズ方法 1-1-03-b

↑ こちらの配色に設定してみますね(カラーコードは下記の通りです)

  • 背景色 → #523634
  • 背景色(グラデーション上部) → #523634
  • ボーダー上下色 → #ffffff
  • ボーダー左右色 → #ffffff
  • ボーダー右色 → #ffffff
  • 文字色 → #ffffff

画面中央のプレビューで確認してみると…

AFFINGER6「ヘッダーメニューの背景色・枠線色・文字色設定」のカスタマイズ方法 1-1-04

↑ このようなヘッダーメニューになりました

 

ちなみに、細かいカスタマイズについては同じ設定ページにある…

AFFINGER6「ヘッダーメニューの背景色・枠線色・文字色設定」のカスタマイズ方法 1-1-05-a

↑ こちらの項目で指定することができます

 

例えばこのなかの…

  • 「メニューをセンター寄せにする」 → チェックあり
  • 「メニューの幅(px)」 → 265

という内容に変更してみると…

AFFINGER6「ヘッダーメニューの背景色・枠線色・文字色設定」のカスタマイズ方法 1-1-05-b

↑ メニュー内の各タイトルが「左寄せ」から「中央寄せ」になり、1つ1つのタイトル幅もいい感じに広がりました

 

ということで、最後に「公開」ボタンをクリックしたら【PC画面用】ヘッダーメニューの色設定はこれで完了です🐥

 

このまま作業を続けられる場合は、左上の < ボタンで1つ前の「各メニュー設定」という画面に戻っておくと、このあとの手順がスムーズです

 

ACTION AFFINGER6「ヘッダーメニューの背景色・枠線色・文字色設定」のカスタマイズ方法:【スマホ画面用】の場合

WordPress ヘッダー c-02

さきほどの【PC画面用】と同様に、まずはWordPress管理画面の左側一覧から…

外観 > カスタマイズ

をクリックし、さらにそのなかの左側一覧から…

各メニュー設定

のタブを開いて、今度は…

AFFINGER6「ヘッダーメニューの背景色・枠線色・文字色設定」のカスタマイズ方法 1-2-01

↑「スマホミドル / 横列メニュー」というタブをクリックします

 

補足

同じページに「スマホメニュー(スマホヘッダー)」というタブもあるので、間違えないように注意しましょう

 

この「スマホメニュー(スマホヘッダー)」は、通常のヘッダーメニューデザインと違い、スマホの左上などに表示させる…

メニューアイコンをタップするとメニューが開く
【スライドメニュー型】

のメニューを指します(くわしくは、こちらの記事をどうぞ ↓ )

AFFINGER6「スマホスライドメニュー」の作り方&カスタマイズ設定方法【ワードプレスブログ完全初心者ガイド/第6章/No.6】
【2023年】AFFINGER6「スマホスライドメニュー」の作り方&カスタマイズ設定方法【ワードプレスブログ完全初心者ガイド/第6章/No.6】

続きを見る

 

ACTION AFFINGER6では、初期状態で【スマホ画面用】のヘッダーメニューが…

AFFINGER6「ヘッダーメニューの背景色・枠線色・文字色設定」のカスタマイズ方法 1-2-02

↑ このような配色になっているので、さきほどの【PC画面用】と同じ要領で…

  • 文字色
  • 背景色
  • 背景色(グラデーション上部)
  • ボーダー色(ミドルのみ)

という項目を、任意のカラーにそれぞれ設定していけばOKです

 

今回は例として…

AFFINGER6「ヘッダーメニューの背景色・枠線色・文字色設定」のカスタマイズ方法 1-2-03

↑ こちらの配色に設定してみます(カラーコードは下記の通りです)

  • 文字色 → #ffffff
  • 背景色 → #523634
  • 背景色(グラデーション上部) → #523634
  • ボーダー色(ミドルのみ) → #ffffff

実際の【スマホ画面】上で確認してみると…

AFFINGER6「ヘッダーメニューの背景色・枠線色・文字色設定」のカスタマイズ方法 1-2-04

↑ このようなヘッダーメニューになりました

 

ということで、最後に「公開」ボタンをクリックしたら【スマホ画面用】ヘッダーメニューの色設定についても、これで完了です🐥

お疲れさま!
 
 

人気記事

 

あずきのワードプレスブログ「完全初心者」ガイド!

「全8章」の総合TOPページです

あずきのワードプレスブログ「完全初心者」ガイド

 

あずき猫 - Azuki Cat

猫です / 独立6年目の専業ブロガー / アパレル歴10年 / Twitterでは、ブログに限らず「色々うまくいかへん…」「どないしよ…」というときのための、本質的な思考を発信しています。ミァー!!!

\ 当ブログで愛用してます /

ACTION AFFINGER6 バナー 01-300px

 

インフォトップ ワードプレステーマ売上

ACTION AFFINGER6

すごいもくじLITE

の限定特典キャンペーンも実施中!!!

 

公式:ACTION AFFINGER6

関連:WordPressテーマ選びのチェック項目5つ+超重要な「核心」1つ【失敗しない本当におすすめなテーマの選び方】

※2021年発表Infotop Affidemy

-WORDPRESS