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