WORDPRESS

【スマホ用も】AFFINGER6「ヘッダーメニューの背景色・枠線色・文字色設定」のカスタマイズ方法を初心者向けに解説【ACTION/WordPressブログ】

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

あずきです🐥

 

当ブログでも愛用中の人気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の設定画面上だと…

スマホミドルメニュー

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

 

ということで、さっそく見ていきましょー🐥

 

 

【スマホ用も】AFFINGER6「ヘッダーメニューの背景色・枠線色・文字色設定」のカスタマイズ方法を初心者向けに解説【ACTION/WordPressブログ】

 

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

外観 > カスタマイズ

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

各メニュー設定

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

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

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

WordPress ヘッダー c-01

 

「各メニュー設定」のタブを開いたら、ここから【PC画面用】の場合は…

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

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

 

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

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

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

 

関連

「そもそもヘッダーメニューってどうやって作るの…?」という場合は、こちらをどうぞ ↓

AFFINGER6「ヘッダー&フッターメニュー」の作り方
【スマホ用も】AFFINGER6「ヘッダー&フッターメニュー」の作り方を初心者向けに解説【ACTION/WordPressブログ】

続きを見る

 

で、この【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「スマホスライドメニュー」の作り方と、色・位置・デザイン設定のカスタマイズ方法
AFFINGER6「スマホスライドメニュー」の作り方と、色・位置・デザイン設定のカスタマイズ方法を初心者向けに解説【ACTION/WordPressブログ】

続きを見る

 

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

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

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

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

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

 

今回は例として…

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

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

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

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

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

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

 

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

 
 

今回の記事はこちらの章に属しています

 第6章 デザイン 編          

次の章はこちらからどうぞ

 第7章 記事投稿 編          

全9章のTOPページです

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

 

-WORDPRESS