専業ブロガー5年目のあずきです🐥
当ブログでも愛用中の人気WordPressテーマ「ACTION AFFINGER6」における…
ヘッダーエリア全体に背景画像を ”全面表示” させるやり方
について、ブログ初心者さん向けに1からわかりやすく解説していきます
まず「ヘッダーエリア全体に背景画像を全面表示」とは、実際の画面で見ると…
HOME(全体のTOPページ)における表示例 ↓
下層(記事ごとのページ)における表示例 ↓
スマホにおける表示例 ↓
このように、ヘッダー画像上に…
「ヘッダーメニュー」や「サイトタイトル」が透過表示されている状態
を指します

もちろん、背景画像の表示される幅を…
このように、「任意の高さに調節」したり「透過表示の適用範囲を広げる」といったことも可能です🐥

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

「headerエリア」タブを開いたら、一番上側に表示されている…
↑「画像を選択」という項目をクリックし、あらかじめ用意してある「ヘッダーエリア全体の背景画像」として使いたい任意の画像ファイルを選択して…
↑ このような状態にしましょう
参考までに、今回の例では (横幅)2200px(高さ)1000px というサイズの画像を使用しています

補足
上記とセットで表示されている…
スマホ(959px以下)
側の「画像を選択」ボタンについては、背景画像を【PC・スマホ】で ”個別” に設定したい場合にのみ使用します
これで背景画像は設定できましたが、中央のプレビュー画面を見てみると…
↑ 設定したはずの背景画像が、まだどこにも表示されていないですね
これは…
- サイトタイトル
- ヘッダメニュー
などが表示されているエリアに「背景色」をすでに設定していることで、結果「背景画像が隠れてしまっている」ことが原因です

まずは、今開いている…
headerエリア
というタブから、設定画面の左上に表示されている <(戻るボタン) をクリックして、1つ上層の…
基本エリア設定
というタブに戻りましょう
「基本エリア設定」タブに戻ったら…
ヘッダーエリア
というタブを開き、そのなかに表示されている…
↑「背景色」と「背景色(グラデーション上部)」という2項目の色設定を…
#●●●●●●
といったカラーコード(英数字の文字列)が入力されている状態から、それぞれの文字列を「丸ごと削除」して…
↑ このように、 空欄(背景色なし) の状態に変えてあげます
ちなみに「空欄」にすると、上画像のようにサンプルコード(例:#3880ff)が薄い文字で表示されますが、こちらは気にしなくてOKです

注意
右側に「デフォルト」というボタンもありますが、こちらは上記の「空欄」な状態とはまた異なるのでご注意ください
「デフォルト」ボタンをクリックすると、特定のカラーコード(例:#3880ff)が自動入力されるので、「背景色なし」の状態にはなりません
ということで、「ヘッダーエリア」タブ内に表示されている…
- 背景色
- 背景色(グラデーション上部)
の2点ともカラーコードを「空欄」の状態にしたら、中央のプレビューを見てみると…
↑「サイトタイトル」が表示されている最上部エリアだけ、画像が透過表示されました🐥
補足
上の画像例では、サイトタイトルの文字色を「真っ白」に設定しています
サイトタイトルの文字色については…
カスタマイズTOP > 「ロゴ画像 / サイトのタイトル」タブ
にて変更可能です
「サイトタイトルの文字色や中央揃えの設定方法」はこちらをどうぞ ↓
-
【スマホ用も】AFFINGER6「サイトタイトルの文字色設定」のカスタマイズ方法を初心者向けに解説【ACTION/WordPressブログ】
続きを見る
-
AFFINGER6「サイトタイトル」の位置設定を”中央揃え”にカスタマイズするやり方を初心者向けに解説【ACTION/WordPressブログ】
続きを見る

さきほどと同様に、また設定画面内の左上にある <(戻るボタン) で1つ上層の…
基本エリア設定
というタブに戻り、さらにもう1つ上層の…
「カスタマイズ」TOP
の画面まで戻りましょう
「カスタマイズ」TOPまで一旦戻ったら、今度は…
各メニュー設定 > PCヘッダーメニュー
という順に、タブを開きます
「PCヘッダーメニュー」タブを開いたら、そのなかに表示されている…
↑ こちらの…
- 背景色
- 背景色(グラデーション上部)
と、さらに…
- ボーダー上下色
まで、さきほどと同じ要領で 空欄(背景色なし) の状態にしましょう

改めて中央のプレビューを確認してみると…
↑「ヘッダーメニュー」が表示されているエリアまで、画像の透過範囲が広がりました🐥
補足1
メニューの縦線(区切り線)も消したい場合は、同じ「PCヘッダーメニュー」タブ内の…
- ボーダー左右色
- ボーダー右色
も、同じ要領で「空欄」にすればOKです
「ヘッダーメニューの作成手順とカスタマイズ方法」については、それぞれこちらから ↓
-
【スマホ用も】AFFINGER6「ヘッダー&フッターメニュー」の作り方を初心者向けに解説【ACTION/WordPressブログ】
続きを見る
-
【スマホ用も】AFFINGER6「ヘッダーメニューの背景色・枠線色・文字色設定」のカスタマイズ方法を初心者向けに解説【ACTION/WordPressブログ】
続きを見る
補足2
スマホ用の設定については、別途「カスタマイズTOP」から…
各メニュー設定 > スマホミドル / 横列メニュー
という順に開いたタブ内で行えます(設定の要領は、パソコン用と同じです)
ただし!
ここまでの設定だけだと、背景画像の表示される「高さ」がまだまだ狭いですよね
この「高さ」については、カスタマイズTOP内の…
ヘッダー画像
というタブを開いたなかに表示されている…
↑「ヘッダー画像エリア最低の高さ」という項目にて、「1px単位」で指定可能です
今回は例として、上画像のように…
- ヘッダー画像エリア最低の高さ → 670
- スマホ → 120
という数値に設定してみます

実際の画面をチェックしてみると、「HOME」つまり全体のTOPページで…
↑ 画面いっぱいに背景画像が表示されました🐥
また、「下層」つまり記事ごとのページでは…
↑ このように「サイトタイトル」と「ヘッダーメニュー」エリアのみ表示されるので、実際の記事閲覧には支障をきたさない仕様となっています
スマホの完成例はこちら↓
ちなみに、カスタマイズTOP内の…
基本エリア設定 > headerエリア
という順にタブを開いたなかに表示されている…
↑「背景画像の範囲」という項目で、「ヘッダーカードエリア」を選択すれば…
↑ このように、画像の透過範囲を「ヘッダーカード」エリアまで広げることも可能です🐣

人気記事
あずきのワードプレスブログ「完全初心者」ガイド!
”全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)にいるので覗いてもらえると嬉しいです^^