専業ブロガー４年目のあずきです🐥
当ブログでも愛用中の人気WordPressテーマ「ACTION AFFINGER6」における…
ヘッダーエリア全体に背景画像を ”全面表示” させるやり方
について、ブログ初心者さん向けに１からわかりやすく解説していきます
まず「ヘッダーエリア全体に背景画像を全面表示」とは、実際の画面で見ると…
HOME（全体のTOPページ）における表示例 ↓
下層（記事ごとのページ）における表示例 ↓
スマホにおける表示例 ↓
このように、ヘッダー画像上に…
「ヘッダーメニュー」や「サイトタイトル」が透過表示されている状態
を指します
もちろん、背景画像の表示される幅を…
このように、「任意の高さに調節」したり「透過表示の適用範囲を広げる」といったことも可能です
ということで、さっそく見ていきましょー🐥
▼ ACTION AFFINGER6の「購入・導入手順」はこちらから ▼
ACTION AFFINGER6の購入＆導入方法を初心者向けに１から解説。子テーマの有効化手順まで【WordPressブログ】
-
ACTION AFFINGER6の購入＆導入方法を初心者向けに１から解説。子テーマの有効化手順まで【WordPressブログ】
続きを見る
- 「ACTION AFFINGER6」が実際に使用できるようになるまでの ”一連の手順” を、
画像つきで丁寧に解説しています - 作業そのものは、正味【15分程度】でおわります（子テーマまで含めて）
AFFINGER6「ヘッダーエリア全体に背景画像を”全面表示”させるやり方」を初心者向けに解説。ヘッダー画像上にメニューやタイトルを透過表示【ACTION／WordPressブログ】
まずは、WordPress管理画面の左側一覧から…
外観 ＞ カスタマイズ
をクリックして「カスタマイズ」設定画面を開き、さらにそのなかの左側一覧から…
基本エリア設定 ＞ headerエリア
という順に、タブを開きます
「headerエリア」タブを開いたら、１番上側に表示されている…
↑「画像を選択」という項目をクリックし、あらかじめ用意してある「ヘッダーエリア全体の背景画像」として使いたい任意の画像ファイルを選択して…
↑ このような状態にしましょう
参考までに、今回の例では （横幅）2200px（高さ）1000px というサイズの画像を使用しています
補足
上記とセットで表示されている…
スマホ（959px以下）
側の「画像を選択」ボタンについては、背景画像を【PC・スマホ】で ”個別” に設定したい場合にのみ使用します
これで背景画像は設定できましたが、中央のプレビュー画面を見てみると…
↑ 設定したはずの背景画像が、まだどこにも表示されていないですね
これは…
- サイトタイトル
- ヘッダメニュー
などが表示されているエリアに「背景色」をすでに設定していることで、結果「背景画像が隠れてしまっている」ことが原因です
まずは、今開いている…
headerエリア
というタブから、設定画面の左上に表示されている ＜（戻るボタン） をクリックして、１つ上層の…
基本エリア設定
というタブに戻りましょう
「基本エリア設定」タブに戻ったら…
ヘッダーエリア
というタブを開き、そのなかに表示されている…
↑「背景色」と「背景色（グラデーション上部）」という２項目の色設定を…
#●●●●●●
といったカラーコード（英数字の文字列）が入力されている状態から、それぞれの文字列を「丸ごと削除」して…
↑ このように、 空欄（背景色なし） の状態に変えてあげます
ちなみに「空欄」にすると、上画像のようにサンプルコード（例：#3880ff）が薄い文字で表示されますが、こちらは気にしなくてOKです
注意
右側に「デフォルト」というボタンもありますが、こちらは上記の「空欄」な状態とはまた異なるのでご注意ください
「デフォルト」ボタンをクリックすると、特定のカラーコード（例：#3880ff）が自動入力されるので、「背景色なし」の状態にはなりません
ということで、「ヘッダーエリア」タブ内に表示されている…
- 背景色
- 背景色（グラデーション上部）
の２点ともカラーコードを「空欄」の状態にしたら、中央のプレビューを見てみると…
↑「サイトタイトル」が表示されている最上部エリアだけ、画像が透過表示されました🐥
補足
上の画像例では、サイトタイトルの文字色を「真っ白」に設定しています
サイトタイトルの文字色については…
カスタマイズTOP ＞ 「ロゴ画像 / サイトのタイトル」タブ
にて変更可能です
「サイトタイトルの文字色や中央揃えの設定方法」はこちらをどうぞ ↓
-
【スマホ用も】AFFINGER6「サイトタイトルの文字色設定」のカスタマイズ方法を初心者向けに解説【ACTION／WordPressブログ】
続きを見る
-
AFFINGER6「サイトタイトル」の位置設定を”中央揃え”にカスタマイズするやり方を初心者向けに解説【ACTION／WordPressブログ】
続きを見る
さきほどと同様に、また設定画面内の左上にある ＜（戻るボタン） で１つ上層の…
基本エリア設定
というタブに戻り、さらにもう１つ上層の…
「カスタマイズ」TOP
の画面まで戻りましょう
「カスタマイズ」TOPまで一旦戻ったら、今度は…
各メニュー設定 ＞ PCヘッダーメニュー
という順に、タブを開きます
「PCヘッダーメニュー」タブを開いたら、そのなかに表示されている…
↑ こちらの…
- 背景色
- 背景色（グラデーション上部）
と、さらに…
- ボーダー上下色
まで、さきほどと同じ要領で 空欄（背景色なし） の状態にしましょう
改めて中央のプレビューを確認してみると…
↑「ヘッダーメニュー」が表示されているエリアまで、画像の透過範囲が広がりました🐥
補足１
メニューの縦線（区切り線）も消したい場合は、同じ「PCヘッダーメニュー」タブ内の…
- ボーダー左右色
- ボーダー右色
も、同じ要領で「空欄」にすればOKです
「ヘッダーメニューの作成手順とカスタマイズ方法」については、それぞれこちらから ↓
-
【スマホ用も】AFFINGER6「ヘッダー＆フッターメニュー」の作り方を初心者向けに解説【ACTION／WordPressブログ】
続きを見る
-
【スマホ用も】AFFINGER6「ヘッダーメニューの背景色・枠線色・文字色設定」のカスタマイズ方法を初心者向けに解説【ACTION／WordPressブログ】
続きを見る
補足２
スマホ用の設定については、別途「カスタマイズTOP」から…
各メニュー設定 ＞ スマホミドル / 横列メニュー
という順に開いたタブ内で行えます（設定の要領はパソコン用と同じです）
ただし！
ここまでの設定だけだと、背景画像の表示される「高さ」がまだまだ狭いですよね
この「高さ」については、カスタマイズTOP内の…
ヘッダー画像
というタブを開いたなかに表示されている…
↑「ヘッダー画像エリア最低の高さ」という項目にて、「1px単位」で指定可能です
今回は例として、上画像のように…
- ヘッダー画像エリア最低の高さ → 670
- スマホ → 120
という数値に設定してみます
実際の画面をチェックしてみると、「HOME」つまり全体のTOPページで…
↑ 画面いっぱいに背景画像が表示されました🐥
また、「下層」つまり記事ごとのページでは…
↑ このように「サイトタイトル」と「ヘッダーメニュー」エリアのみ表示されるので、実際の記事閲覧には支障をきたさない仕様となっています
スマホの完成例はこちら↓
ちなみに、カスタマイズTOP内の…
基本エリア設定 ＞ headerエリア
という順にタブを開いたなかに表示されている…
↑「背景画像の範囲」という項目で、「ヘッダーカードエリア」を選択すれば…
↑ このように、画像の透過範囲を「ヘッダーカード」エリアまで広げることも可能です🐣
人気記事
今回の記事はこちらの章に属しています
次の章はこちらからどうぞ
全８章のTOPページです
＼ 「なぜ売れないか？」を徹底解析 ／
結果が見えるサイト運営に
✔ よく使うテキストや画像、広告リンクを「テンプレート化」して使い回せる！
✔ 元データの更新だけで全記事に「一括反映」されるため、広告の差替えも一瞬！
✔ 広告の「クリック回数」や「クリックされたページ」などを自動計測！
AffiliateRun～なぜ売れないか？
PDFマニュアル付き！
公式：「AFFINGERタグ管理マネージャー4 + PVモニター」プラグインセット
関連：WordPressにおける広告リンクの貼り方を「３つのパターン」で１から解説【 ”タグ管理” が最強におすすめ】
-
WordPressにおける広告リンクの貼り方を「３つのパターン」で１から解説【 ”タグ管理” が最強におすすめ】
続きを見る
※当プラグインの使用には、別売のWordPressテーマ「ACTION AFFINGER6」最新版が必要です
About me
- 専業ブロガー・フリーランス -
あずき
独立4年目 / 元アパレル → 歴10年
20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます。 普段はTwitter（@azuki_rinrin）にいるので覗いてもらえると嬉しいです^^