専業ブロガー5年目のあずきです🐥
当ブログでも愛用中の人気WordPressテーマ「ACTION AFFINGER6」における…
「ヘッダー・フッター・全体」の背景色設定
のカスタマイズ方法について、ブログ初心者さん向けに1からわかりやすく解説していきます

実際の画面で見ると、まず「ヘッダー背景色」が…
↓(設定後の一例)
つづいて「フッター背景色」が…
↓(設定後の一例)
そして「全体の背景色」が…
↓(設定後の一例)
上記の(赤枠で囲った)エリアをそれぞれ指します

▼ ACTION AFFINGER6の「購入・導入手順」はこちらから ▼
ACTION AFFINGER6の購入&導入方法を初心者向けに1から解説。「子テーマ」のインストール&有効化手順まで
-
ACTION AFFINGER6の購入&導入方法を初心者向けに1から解説。「子テーマ」のインストール&有効化手順まで
続きを見る
- 「ACTION AFFINGER6」が実際に使用できるようになるまでの ”一連の手順” を、
画像付きでまるっと解説しています - 作業そのものは、正味【15分程度】でおわります(子テーマまで含めて)
関連
ヘッダーではなく「ヘッダーメニュー」の色設定については、別途こちらをどうぞ ↓
-
【スマホ用も】AFFINGER6「ヘッダーメニューの背景色・枠線色・文字色設定」のカスタマイズ方法を初心者向けに解説【ACTION/WordPressブログ】
続きを見る
Contents
AFFINGER6「ヘッダー・フッター・全体の背景色設定」のカスタマイズ方法を初心者向けに解説【ACTION/WordPressブログ】
まずは、WordPress管理画面の左側一覧から…
↑ 外観 > カスタマイズ をクリックして…
↑ こちらの「カスタマイズ」設定画面を開きます

ACTION AFFINGER6における「ヘッダー背景色設定」のカスタマイズ方法
WordPressの「カスタマイズ」設定画面を開いたら、そのなかの左側一覧から…
↑「基本エリア設定」というタブをクリックして、さらに…
↑「ヘッダーエリア」というタブをクリックしましょう

ACTION AFFINGER6では、初期状態で「ヘッダー背景色」が…
↑ このようなブルー系に設定されています(上画像の赤枠で囲ったエリアです)
で、このヘッダー背景色については…
↑ こちらの…
- 背景色
- 背景色(グラデーション上部)
という2項目で設定することができます
今回は例として…
↑ このように、真っ白(#ffffff)の背景色に設定してみます

中央のプレビューを改めて見てみると…
↑ ヘッダー(最上部)エリアの背景色が、真っ白に変更されました
ちなみに、このヘッダーエリアのすぐ下にある…
↑ こちらの【横長型のバー】は、ヘッダーではなく「ヘッダーメニュー」というエリアになります

関連
「ヘッダーメニューの作り方」については、こちらをどうぞ ↓
-
【スマホ用も】AFFINGER6「ヘッダー&フッターメニュー」の作り方を初心者向けに解説【ACTION/WordPressブログ】
続きを見る
「ヘッダーメニューエリアの色設定」については、こちらから ↓
-
【スマホ用も】AFFINGER6「ヘッダーメニューの背景色・枠線色・文字色設定」のカスタマイズ方法を初心者向けに解説【ACTION/WordPressブログ】
続きを見る
注意
上記例のようにヘッダー背景色を「白」などにする場合、左上の「サイトタイトル」が同化して隠れてしまうので…
サイトタイトル&キャッチフレーズの文字色
も、あわせて変更する必要があります(【PC用】と【スマホ用】でそれぞれ設定します)
左上の < ボタンから、2つ前の「カスタマイズ」TOPページまで一旦戻り…
ロゴ画像 / サイトのタイトル
というタブを開いたなかの…
- PC画面用 → 「サイトタイトルとキャッチフレーズの文字色」
- スマホ画面用 → 「スマホヘッダーのタイトル色」
という項目で、それぞれ設定できます(画像つきの解説は下記の記事をどうぞ)
-
【スマホ用も】AFFINGER6「サイトタイトルの文字色設定」のカスタマイズ方法を初心者向けに解説【ACTION/WordPressブログ】
続きを見る
上記の注意点をふまえて「サイトタイトル」の文字色も変更してみた結果、今回の例では…
↑ このようなヘッダー配色になりました(カラーコードは下記の通り)
- 背景色 → #ffffff
- ブログタイトルの文字色 → #515151

ということで、最後に「公開」ボタンをクリックしたら「ヘッダー背景色設定」のカスタマイズはこれで完了です🐥
このまま作業を続ける場合は、左上の < ボタンで1つ前の「基本エリア設定」という画面に戻っておくと、このあとの手順がスムーズです
\ 「なぜ売れないか?」を徹底解析 /
結果が見えるサイト運営に
AffiliateRun~なぜ売れないか?
PDFマニュアル付き!
公式:「AFFINGERタグ管理マネージャー4 + PVモニター」プラグインセット
関連:WordPressにおける広告リンクの貼り方を「3つのパターン」で1から解説【 ”タグ管理” が最強におすすめ】
-
WordPressにおける広告リンクの貼り方を「3つのパターン」で1から解説【 ”タグ管理” が最強におすすめ】
続きを見る
※別売りのWordPressテーマ「ACTION AFFINGER6」最新版が必要です
ACTION AFFINGER6における「フッター背景色設定」のカスタマイズ方法
「フッター背景色設定」のカスタマイズ方法も、要領自体は一緒なのでいたって簡単です
「カスタマイズ」設定画面から「基本エリア設定」を開いたら…
↑ 今度は「フッターエリア」というタブをクリックし、フッター設定の画面を開きましょう
ACTION AFFINGER6では、初期状態で「フッター背景色」が…
↑ さきほどのヘッダーエリアと同じ、ブルー系に設定されています

ここで見るべき項目は…
↑ こちらの…
- フッター文字色
- 背景色
- 背景色(グラデーション上部)
という3点です
今回は例として、それぞれ…
↑ こちらの配色に設定してみます(カラーコードは下記の通り)
- フッター文字色 → #515151
- 背景色 → #ffffff
- 背景色(グラデーション上部) → #ffffff
中央のプレビューで見てみると…
↑ このように反映されました
ということで、また左上の「公開」ボタンをクリックしたら「フッター背景色設定」のカスタマイズもOKです🐥

ACTION AFFINGER6における「全体の背景色設定」のカスタマイズ方法
同じく「カスタマイズ」設定画面から「基本エリア設定」をクリックして…
↑ 今度は「背景色」というタブをクリックしましょう
ACTION AFFINGER6では、初期状態で「全体の背景色」が…
↑ このような薄いグレー系に設定されています(中央の白い部分を除いたエリアです)
で、この「全体の背景色」は…
↑ こちらの「背景色」という項目で、任意のカラーに変更可能です

ここではあえて極端な例として、一旦…
↑ このような黒系の色味にしてみました(実際はあまりおすすめしません。 あくまで解説の便宜上ご紹介しているだけです)
一度こうして色味をガラッと変えてみることで、【実際に反映されるエリア】が一発で把握できますね
関連
画面中央の「白いまま」になっているエリアについては、「カスタマイズ」TOPから…
基本エリア設定 > mainエリア(記事)
にある「背景色」という項目で設定できます
ちなみに、この「全体の背景色」で個人的におすすめなカラーは…
- #ffffff(真っ白)
- #f7f7f7(薄いグレー)
あたりで、今回は実際に自分もよく使っている…
↑ 真っ白(#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)にいるので覗いてもらえると嬉しいです^^