WORDPRESS

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

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

専業ブロガー5年目のあずきです🐥

 

当ブログでも愛用中の人気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の購入&導入方法を初心者向けに1から解説。「子テーマ」のインストール&有効化手順まで

ACTION AFFINGER6の購入&導入方法を初心者向けに1から解説。「子テーマ」のインストール&有効化手順まで
ACTION AFFINGER6の購入&導入方法を初心者向けに1から解説。「子テーマ」のインストール&有効化手順まで

続きを見る

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

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

第1位

公式:ACTION AFFINGER6

すごいもくじLITE

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

※2021年発表Infotop Affidemy

補足

今回ご紹介するなかの【スマホ画面用】ヘッダーメニューについては、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

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

 

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

人気記事

 

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

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

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

\ 「なぜ売れないか?」を徹底解析 /

AFFINGERタグ管理マネージャー&PVモニター バナー 01-1000px

結果が見えるサイト運営に

AFFINGERタグ管理マネージャー4 + PVモニター

 

   ✔ よく使用する文章や画像、広告リンクを「テンプレート化」して使い回せる!

   ✔ 元データの更新だけで全記事に「一括反映」されるため、広告の差替えも一瞬!

   ✔ 広告の「クリック回数」「クリックされたページ」などを自動計測!

AffiliateRun~なぜ売れないか?

PDFマニュアル付き!

 

公式:「AFFINGERタグ管理マネージャー4 + PVモニター」プラグインセット

関連:WordPressにおける広告リンクの貼り方を「3つのパターン」で1から解説【 ”タグ管理” が最強におすすめ】

WordPressにおける広告リンクの貼り方
WordPressにおける広告リンクの貼り方を「3つのパターン」で1から解説【 ”タグ管理” が最強におすすめ】

続きを見る

※当プラグインの使用には、別売のWordPressテーマ「ACTION AFFINGER6」最新版が必要です

About me

あずきアイコン main-01 背景透過

suzu azuki
あずき鈴々

 

独立5年目の専業ブロガー / 元アパレル → 歴10年

 

20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます。 普段はTwitter(@azuki_rinrin)にいるので覗いてもらえると嬉しいです^^

-WORDPRESS