ちょっとしたコツが必要でも簡単！
ヘッダーを画面全体に表示してイメチェンしよう！！
こんにちは "osaboo"
です。"@osaboo_Bot"
AFFINGER6で画面全体に画像を表示したいけど上手くいかない。
メニューが邪魔したり中途半端な大きさになって上手くいかない。
こんな問題を解決します。初心者でも簡単に出来る！簡単な方法を手順を追って丁寧に解説します。
「いきなり、今までのサイトイメージをガラッと変えられるので是非、試してください。^^")」
当サイトのHomeをPCとスマホでご覧いただくとイメージしやすいかもです。
こんな感じです^^
- WordPress管理画面『ダッシュボード』＞『外観』＞『カスタマイズ』＞『基本エリア設定』＞『headerエリア』を開きます。
- 『header（ヘッダー～ヘッダー画像下エリア）全体のエリアです』＞『画像を選択』任意の画像を選択します。
- 『ヘッダー画像』＞『ヘッダー画像エリア』＞『トップページ画像エリアの高さを画面サイズに応じて最大にする(β)※優先』にチェックを入れます。
- 「背景画像を幅100%のレスポンシブにする」にチェックを入れます。
＼それでは、チャチャっとイメージチェンジしてみましょう。／
AFFINGER6のトップページにヘッダー用画像を設定する。
WordPress管理画面『ダッシュボード』＞『外観』＞『カスタマイズ』を開きます。
『基本エリア設定』＞『headerエリア』＞『header（ヘッダー～ヘッダー画像下エリア）全体の背景画像です』を開きます。
→
→
ここで設定することで画像全体に大きくする事が出来ます。
上右端画面の赤枠で『画像を選択』をクリックして任意の画像を選択しましょう。
『PC』ヘッダーと『スマホ（959px以下）』ヘッダーの画像を違う物に設定する場合は、上右端画面の赤枠の下に追加できます。
スマホの表示が思う様に表示されない場合はサイズ変更切り取り等でヘッダー画像をスマホ用に加工して調整します。
ヘッダーの推奨画像サイズは2200×500pxですが、今回の設定には適さないので注意が必要です。◀︎ （全体に表示する場合は縦横比を表示したい画面に合わせると綺麗に表示されます。）
選択しただけだと現在のヘッダーの高さで表示されているのでまだ見えないよ！
ここからが「みそ」だよ^^" もうちょっとがんばろー
『トップページ画像エリアの高さを画面サイズに応じて最大にする(β)※優先』にチェックを入れます。
WordPress管理画面『ダッシュボード』＞『外観』＞『カスタマイズ』以下の
『ヘッダー画像』＞『ヘッダー画像エリア』＞『トップページ画像エリアの高さを画面サイズに応じて最大にする(β)※優先』にチェックを入れましょう。次に下側にスクロールして『背景画像を幅100％のレスポンシブにする』にチェックを入れると幅に追従して綺麗に出るかとお好みですが...
下にスクロールして行くと右画面
下にスクロールすると上の画面
「トップページ（β）＊優先」にチェックを入れるといきなり、設定した画像がでてきたでしょ^^
以上で「ヘッダー画像を全体に表示する方法」は完了です。
「結果」を出すためのテーマ・プラグインが揃った戦略的セット
ACTION-PACK3(AFFINGER6EX対応)
超本気でやるためのWordPress テーマ
セット価格：51,400円→39,800円
▼
（23,600円お得！）
まとめ！AFFINGER6 カスタマイズ【ヘッダー画像を全体に表示する方法！】
今回は、当サイトで採用している画面全体にヘッダー画像を表示する方法に就いてご紹介しました。イメージチェンジをするには打って付けだと思います。是非、参考にしてください。個性的なサイトを作る為にお役に立てれば嬉しいです。お疲れ様でした！
「最後まで、ご観覧いただきありがとうございました。」
また、次の記事で…お会いしましょう。＼^^／
