WORDPRESS

AFFINGER6「ヘッダーエリア全体に背景画像を”全面表示”させるやり方」を初心者向けに解説。ヘッダー画像上にメニューやタイトルを透過表示【ACTION/WordPressブログ】

AFFINGER6「ヘッダーエリア全体に背景画像を”全面表示”させるやり方」
 

専業ブロガー4年目のあずきです🐥

 

当ブログでも愛用中の人気WordPressテーマ「ACTION AFFINGER6」における…

ヘッダーエリア全体に背景画像を ”全面表示” させるやり方

について、ブログ初心者さん向けに1からわかりやすく解説していきます

 

まず「ヘッダーエリア全体に背景画像を全面表示」とは、実際の画面で見ると…

 

HOME(全体のTOPページ)における表示例 ↓

AFFINGER6「ヘッダーエリア全体に背景画像を”全面表示”させるやり方」 top-01-a

 

下層(記事ごとのページ)における表示例 ↓

AFFINGER6「ヘッダーエリア全体に背景画像を”全面表示”させるやり方」 top-01-b

 

スマホにおける表示例 ↓

AFFINGER6「ヘッダーエリア全体に背景画像を”全面表示”させるやり方」 top-01-c

 

このように、ヘッダー画像上に…

「ヘッダーメニュー」や「サイトタイトル」が透過表示されている状態

を指します

通常の表示スタイルよりも、”世界観” をぐんと演出できておすすめ!
 

もちろん、背景画像の表示される幅を…

 

AFFINGER6「ヘッダーエリア全体に背景画像を”全面表示”させるやり方」 top-02-a

 

AFFINGER6「ヘッダーエリア全体に背景画像を”全面表示”させるやり方」 top-02-b

 

このように、「任意の高さに調節」したり「透過表示の適用範囲を広げる」といったことも可能です

 

ということで、さっそく見ていきましょー🐥

 

▼ ACTION AFFINGER6の「購入・導入手順」はこちらから ▼

ACTION AFFINGER6の購入&導入方法を初心者向けに1から解説。子テーマの有効化手順まで【WordPressブログ】

AFFINGER6の購入&導入方法を初心者向けに1から解説。子テーマの有効化手順まで
ACTION AFFINGER6の購入&導入方法を初心者向けに1から解説。子テーマの有効化手順まで【WordPressブログ】

続きを見る

  • 「ACTION AFFINGER6」が実際に使用できるようになるまでの ”一連の手順” を、
    画像つきで丁寧に解説しています
  • 作業そのものは、正味【15分程度】でおわります(子テーマまで含めて)

公式:ACTION AFFINGER6

すごいもくじLITE

の限定特典キャンペーンも実施中!!!

AFFINGER6「ヘッダーエリア全体に背景画像を”全面表示”させるやり方」を初心者向けに解説。ヘッダー画像上にメニューやタイトルを透過表示【ACTION/WordPressブログ】

WordPress ヘッダー c-01

まずは、WordPress管理画面の左側一覧から…

外観 > カスタマイズ

をクリックして「カスタマイズ」設定画面を開き、さらにそのなかの左側一覧から…

基本エリア設定 > headerエリア

という順に、タブを開きます

「ヘッダーエリア」じゃなく「headerエリア」の方だよ!
 

「headerエリア」タブを開いたら、1番上側に表示されている…

AFFINGER6「ヘッダーエリア全体に背景画像を”全面表示”させるやり方」 1-01-a

↑「画像を選択」という項目をクリックし、あらかじめ用意してある「ヘッダーエリア全体の背景画像」として使いたい任意の画像ファイルを選択して…

AFFINGER6「ヘッダーエリア全体に背景画像を”全面表示”させるやり方」 1-01-b

↑ このような状態にしましょう

 

参考までに、今回の例では (横幅)2200px(高さ)1000px というサイズの画像を使用しています

高さはお好みでOKだけど、ヘッダー画像の横幅は基本的に「2200px」がおすすめ!
 

補足

上記とセットで表示されている…

スマホ(959px以下)

側の「画像を選択」ボタンについては、背景画像を【PC・スマホ】で ”個別” に設定したい場合にのみ使用します

 

これで背景画像は設定できましたが、中央のプレビュー画面を見てみると…

AFFINGER6「ヘッダーエリア全体に背景画像を”全面表示”させるやり方」 1-01-c

↑ 設定したはずの背景画像が、まだどこにも表示されていないですね

 

これは…

  • サイトタイトル
  • ヘッダメニュー

などが表示されているエリアに「背景色」をすでに設定していることで、結果「背景画像が隠れてしまっている」ことが原因です

ということで、お次はこの「背景色」を消していくよ!
 

まずは、今開いている…

headerエリア

というタブから、設定画面の左上に表示されている <(戻るボタン) をクリックして、1つ上層の…

基本エリア設定

というタブに戻りましょう

 

「基本エリア設定」タブに戻ったら…

ヘッダーエリア

というタブを開き、そのなかに表示されている…

AFFINGER6「ヘッダーエリア全体に背景画像を”全面表示”させるやり方」 1-02-a

↑「背景色」と「背景色(グラデーション上部)」という2項目の色設定を…

#●●●●●●

といったカラーコード(英数字の文字列)が入力されている状態から、それぞれの文字列を「丸ごと削除」して…

AFFINGER6「ヘッダーエリア全体に背景画像を”全面表示”させるやり方」 1-02-b

↑ このように、 空欄(背景色なし) の状態に変えてあげます

 

ちなみに「空欄」にすると、上画像のようにサンプルコード(例:#3880ff)が薄い文字で表示されますが、こちらは気にしなくてOKです

うっすら表示されてるのは、ただの入力例(デフォルトの色設定)だね
 

注意

右側に「デフォルト」というボタンもありますが、こちらは上記の「空欄」な状態とはまた異なるのでご注意ください

 

「デフォルト」ボタンをクリックすると、特定のカラーコード(例:#3880ff)が自動入力されるので、「背景色なし」の状態にはなりません

 

ということで、「ヘッダーエリア」タブ内に表示されている…

  • 背景色
  • 背景色(グラデーション上部)

の2点ともカラーコードを「空欄」の状態にしたら、中央のプレビューを見てみると…

AFFINGER6「ヘッダーエリア全体に背景画像を”全面表示”させるやり方」 1-02-c

↑「サイトタイトル」が表示されている最上部エリアだけ、画像が透過表示されました🐥

 

補足

上の画像例では、サイトタイトルの文字色を「真っ白」に設定しています

 

サイトタイトルの文字色については…

カスタマイズTOP > 「ロゴ画像 / サイトのタイトル」タブ

にて変更可能です

 

「サイトタイトルの文字色や中央揃えの設定方法」はこちらをどうぞ ↓

AFFINGER6「サイトタイトルの文字色設定」のカスタマイズ方法
【スマホ用も】AFFINGER6「サイトタイトルの文字色設定」のカスタマイズ方法を初心者向けに解説【ACTION/WordPressブログ】

続きを見る

AFFINGER6「サイトタイトル」の位置設定を”中央揃え”にカスタマイズするやり方
AFFINGER6「サイトタイトル」の位置設定を”中央揃え”にカスタマイズするやり方を初心者向けに解説【ACTION/WordPressブログ】

続きを見る

 
同じ流れで、今度は「ヘッダーメニュー」エリアの背景色も「空欄」にしていくよ!
 

さきほどと同様に、また設定画面内の左上にある <(戻るボタン) で1つ上層の…

基本エリア設定

というタブに戻り、さらにもう1つ上層の…

「カスタマイズ」TOP

の画面まで戻りましょう

 

「カスタマイズ」TOPまで一旦戻ったら、今度は…

各メニュー設定 > PCヘッダーメニュー

という順に、タブを開きます

 

「PCヘッダーメニュー」タブを開いたら、そのなかに表示されている…

AFFINGER6「ヘッダーエリア全体に背景画像を”全面表示”させるやり方」 1-03-a

↑ こちらの…

  • 背景色
  • 背景色(グラデーション上部)

と、さらに…

  • ボーダー上下色

まで、さきほどと同じ要領で 空欄(背景色なし) の状態にしましょう

ただしメニューの上下に表示される「横線」をそのまま残したいなら、「ボーダー上下色」は空欄にしなくてもOK!
 

改めて中央のプレビューを確認してみると…

AFFINGER6「ヘッダーエリア全体に背景画像を”全面表示”させるやり方」 1-03-b

↑「ヘッダーメニュー」が表示されているエリアまで、画像の透過範囲が広がりました🐥

 

補足1

メニューの縦線(区切り線)も消したい場合は、同じ「PCヘッダーメニュー」タブ内の…

  • ボーダー左右色
  • ボーダー右色

も、同じ要領で「空欄」にすればOKです

 

「ヘッダーメニューの作成手順とカスタマイズ方法」については、それぞれこちらから ↓ 

AFFINGER6「ヘッダー&フッターメニュー」の作り方
【スマホ用も】AFFINGER6「ヘッダー&フッターメニュー」の作り方を初心者向けに解説【ACTION/WordPressブログ】

続きを見る

AFFINGER6「ヘッダーメニューの背景色・枠線色・文字色設定」のカスタマイズ方法
【スマホ用も】AFFINGER6「ヘッダーメニューの背景色・枠線色・文字色設定」のカスタマイズ方法を初心者向けに解説【ACTION/WordPressブログ】

続きを見る

補足2

スマホ用の設定については、別途「カスタマイズTOP」から…

各メニュー設定 > スマホミドル / 横列メニュー

という順に開いたタブ内で行えます(設定の要領はパソコン用と同じです)

 

ただし!

 

ここまでの設定だけだと、背景画像の表示される「高さ」がまだまだ狭いですよね

 

この「高さ」については、カスタマイズTOP内の…

ヘッダー画像

というタブを開いたなかに表示されている…

AFFINGER6「ヘッダーエリア全体に背景画像を”全面表示”させるやり方」 1-04-a

↑「ヘッダー画像エリア最低の高さ」という項目にて、「1px単位」で指定可能です

 

今回は例として、上画像のように…

  • ヘッダー画像エリア最低の高さ → 670
  • スマホ → 120

という数値に設定してみます

ここまで一通り設定できたら、左上の「公開」ボタンを忘れずにクリックして設定完了だよ!
 

実際の画面をチェックしてみると、「HOME」つまり全体のTOPページで…

AFFINGER6「ヘッダーエリア全体に背景画像を”全面表示”させるやり方」 1-04-b

↑ 画面いっぱいに背景画像が表示されました🐥

 

また、「下層」つまり記事ごとのページでは…

AFFINGER6「ヘッダーエリア全体に背景画像を”全面表示”させるやり方」 1-04-c

↑ このように「サイトタイトル」と「ヘッダーメニュー」エリアのみ表示されるので、実際の記事閲覧には支障をきたさない仕様となっています

 

スマホの完成例はこちら↓

AFFINGER6「ヘッダーエリア全体に背景画像を”全面表示”させるやり方」 1-04-d

 

ちなみに、カスタマイズTOP内の…

基本エリア設定 > headerエリア

という順にタブを開いたなかに表示されている…

AFFINGER6「ヘッダーエリア全体に背景画像を”全面表示”させるやり方」 1-05-a

↑「背景画像の範囲」という項目で、「ヘッダーカードエリア」を選択すれば…

AFFINGER6「ヘッダーエリア全体に背景画像を”全面表示”させるやり方」 1-05-b

↑ このように、画像の透過範囲を「ヘッダーカード」エリアまで広げることも可能です🐣

画像例だと、1番下の「カード」が4枚並んでるとこだね!

人気記事

 

今回の記事はこちらの章に属しています

 第6章 デザイン 編          

次の章はこちらからどうぞ

 第7章 記事投稿 編          

全8章のTOPページです

あずきのワードプレスブログ「完全初心者」ガイド

\ 「なぜ売れないか?」を徹底解析 /

AFFINGERタグ管理マネージャー

結果が見えるサイト運営に

AFFINGERタグ管理マネージャー4 + PVモニター

 

   ✔ よく使うテキストや画像、広告リンクを「テンプレート化」して使い回せる!

   ✔ 元データの更新だけで全記事に「一括反映」されるため、広告の差替えも一瞬!

   ✔ 広告の「クリック回数」「クリックされたページ」などを自動計測!

AffiliateRun~なぜ売れないか?

PDFマニュアル付き!

 

公式:「AFFINGERタグ管理マネージャー4 + PVモニター」プラグインセット

関連:WordPressにおける広告リンクの貼り方を「3つのパターン」で1から解説【 ”タグ管理” が最強におすすめ】

WordPressにおける広告リンクの貼り方
WordPressにおける広告リンクの貼り方を「3つのパターン」で1から解説【 ”タグ管理” が最強におすすめ】

続きを見る

※当プラグインの使用には、別売のWordPressテーマ「ACTION AFFINGER6」最新版が必要です

 

About me

あずきアイコン main-01 背景透過

- 専業ブロガー・フリーランス -

あずき

 

独立4年目 / 元アパレル → 歴10年

 

20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます。 普段はTwitter(@azuki_rinrin)にいるので覗いてもらえると嬉しいです^^

-WORDPRESS