専業ブロガー5年目のあずきです🐥
当ブログでも愛用中の人気WordPressテーマ「ACTION AFFINGER6」における…
ヘッダーメニューの背景色・枠線色・文字色設定
のカスタマイズ方法について、ブログ初心者さん向けに1からわかりやすく解説していきます
まずACTION AFFINGER6では、「ヘッダーメニュー」の色設定を…
- PC画面用
- スマホ画面用
で個別に指定していく仕様ですが、具体的には【PC画面用】のヘッダーメニューが…
↓(設定後の一例)
そして【スマホ画面用】のヘッダーメニューが…
↓(設定後の一例)
上記の(赤枠で囲った)エリアをそれぞれ指します🐥

▼ ACTION AFFINGER6の「購入・導入手順」はこちらから ▼
ACTION AFFINGER6の購入&導入方法を初心者向けに1から解説。「子テーマ」のインストール&有効化手順まで
-
ACTION AFFINGER6の購入&導入方法を初心者向けに1から解説。「子テーマ」のインストール&有効化手順まで
続きを見る
- 「ACTION AFFINGER6」が実際に使用できるようになるまでの ”一連の手順” を、
画像付きでまるっと解説しています - 作業そのものは、正味【15分程度】でおわります(子テーマまで含めて)
インフォトップ ワードプレステーマ売上
第1位※
すごいもくじLITE
の限定特典キャンペーンも実施中!!!
※2020年度Infotop売上及びInfotop Affidemy
補足
今回ご紹介するなかの【スマホ画面用】ヘッダーメニューについては、ACTION AFFINGER6の設定画面上だと…
スマホミドルメニュー
と表記されているものになります(スマホスライドメニューと混同しないようご注意ください)
Contents
【スマホ用も】AFFINGER6「ヘッダーメニューの背景色・枠線色・文字色設定」のカスタマイズ方法を初心者向けに解説【ACTION/WordPressブログ】
まずは、WordPress管理画面の左側一覧から…
外観 > カスタマイズ
をクリックし、さらにそのなかの左側一覧から…
各メニュー設定
というタブをクリックします

ACTION AFFINGER6「ヘッダーメニューの背景色・枠線色・文字色設定」のカスタマイズ方法:【PC画面用】の場合
「各メニュー設定」のタブを開いたら、ここから【PC画面用】の場合は…
↑「PCヘッダーメニュー」というタブをクリックしましょう
ACTION AFFINGER6では、初期状態でヘッダーメニューが…
↑ このように、ブルー系の色設定になっています
関連
「そもそもヘッダーメニューってどうやって作るの…?」という場合は、こちらをどうぞ ↓
-
【スマホ用も】AFFINGER6「ヘッダー&フッターメニュー」の作り方を初心者向けに解説【ACTION/WordPressブログ】
続きを見る
で、この【PC画面用】ヘッダーメニューにおける色設定は…
↑ こちらの…
- 背景色
- 背景色(グラデーション上部)
- ボーダー上下色
- ボーダー左右色
- ボーダー右色
- 文字色
という項目で、それぞれ設定できます
今回は例として…
↑ こちらの配色に設定してみます(カラーコードは下記の通り)
- 背景色 → #523634
- 背景色(グラデーション上部) → #523634
- ボーダー上下色 → #ffffff
- ボーダー左右色 → #ffffff
- ボーダー右色 → #ffffff
- 文字色 → #ffffff
画面中央のプレビューで確認してみると…
↑ このようなヘッダーメニューになりました
ちなみに、細かいカスタマイズについては同じ設定ページにある…
↑ こちらの項目で指定することができます
例えばこのなかの…
- 「メニューをセンター寄せにする」 → チェックあり
- 「メニューの幅(px)」 → 265
という内容に変更してみると…
↑ メニュー内の各タイトルが「左寄せ」から「中央寄せ」になり、1つ1つのタイトル幅もいい感じに広がりました
ということで、最後に「公開」ボタンをクリックしたら【PC画面用】ヘッダーメニューの色設定はこれで完了です🐥
このまま作業を続ける場合は、左上の < ボタンで1つ前の「各メニュー設定」という画面に戻っておくと、このあとの手順がスムーズです
ACTION AFFINGER6「ヘッダーメニューの背景色・枠線色・文字色設定」のカスタマイズ方法:【スマホ画面用】の場合
さきほどの【PC画面用】と同様に、まずはWordPress管理画面の左側一覧から…
外観 > カスタマイズ
をクリックし、さらにそのなかの左側一覧から…
各メニュー設定
のタブを開いて、今度は…
↑「スマホミドル / 横列メニュー」というタブをクリックします
補足
同じページに「スマホメニュー(スマホヘッダー)」というタブもあるので、間違えないように注意しましょう
この「スマホメニュー(スマホヘッダー」は、通常のヘッダーメニューデザインと違い、スマホの左上などに表示させる…
メニューアイコンをタップするとメニューが開く
【スライドメニュー型】
のメニューを指します(くわしくは下記の記事をどうぞ)
-
AFFINGER6「スマホスライドメニュー」の作り方と、色・位置・デザイン設定のカスタマイズ方法を初心者向けに解説【ACTION/WordPressブログ】
続きを見る
ACTION AFFINGER6では、初期状態で【スマホ画面用】のヘッダーメニューが…
↑ このような配色になっているので、さきほどの【PC画面用】と同じ要領で…
- 文字色
- 背景色
- 背景色(グラデーション上部)
- ボーダー色(ミドルのみ)
という項目を、任意のカラーにそれぞれ設定していけばOKです
今回は例として…
↑ こちらの配色に設定してみます(カラーコードは下記の通り)
- 文字色 → #ffffff
- 背景色 → #523634
- 背景色(グラデーション上部) → #523634
- ボーダー色(ミドルのみ) → #ffffff
実際の【スマホ画面】上で確認してみると…
↑ このようなヘッダーメニューになりました
ということで、最後に「公開」ボタンをクリックしたら【スマホ画面用】ヘッダーメニューの色設定についてもこれで完了です🐥
人気記事
あずきのワードプレスブログ「完全初心者」ガイド!
”全8章” の総合TOPページです
\ 「なぜ売れないか?」を徹底解析 /
結果が見えるサイト運営に
✔ よく使用する文章や画像、広告リンクを「テンプレート化」して使い回せる!
✔ 元データの更新だけで全記事に「一括反映」されるため、広告の差替えも一瞬!
✔ 広告の「クリック回数」や「クリックされたページ」などを自動計測!
AffiliateRun~なぜ売れないか?
PDFマニュアル付き!
公式:「AFFINGERタグ管理マネージャー4 + PVモニター」プラグインセット
関連:WordPressにおける広告リンクの貼り方を「3つのパターン」で1から解説【 ”タグ管理” が最強におすすめ】
-
WordPressにおける広告リンクの貼り方を「3つのパターン」で1から解説【 ”タグ管理” が最強におすすめ】
続きを見る
※当プラグインの使用には、別売のWordPressテーマ「ACTION AFFINGER6」最新版が必要です
About me
suzu azuki
あずき鈴々
独立5年目の専業ブロガー / 元アパレル → 歴10年
20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます。 普段はTwitter(@azuki_rinrin)にいるので覗いてもらえると嬉しいです^^