設定しているのに、なぜか表示されない？
ちゃんとしたやり方を知りたい
そんなお悩みを解決します。
有料テーマのAFFINGER5、なぜかヘッダー画像が表示されない時ってありますよね？
今回はそんな場合の解決方法を解説します。
対象の有料テーマ
- WING （AFFINGER5）
- AFFINGER5 EX
『ヘッダー画像』と『ヘッダー背景画像』は別物ですよ
まず、AFFINGER5テーマの2つの用語をしっかり区別しましょう。
- ヘッダー画像
- ヘッダー背景画像
言葉も似ていますし設定する箇所も同じですが、完全な別物です。
「ヘッダー画像が表示されない！」とハマる人は、この区別をつけるのが最初のステップです。
ザックリ解説ヘッダー画像とヘッダー背景画像の違い
『ヘッダー画像』『ヘッダー背景画像』ともにトップページのメニューの下に表示させる画像のことです。
『ヘッダー画像』には管理画面上から文字や画像を載せることはできません。
対して『ヘッダー背景画像』には文字や画像を載せることが出来ます。
自分がやりたいことを決めたうえで、どちらを選ぶかを決めましょう。
『ヘッダー画像』の設定方法と、表示されない場合のチェックポイント
ヘッダー画像の設定方法と表示されない場合のチェックポイントを紹介していきます。
AFFINGERのヘッダー画像の設定方法
まずはAFFINGERでヘッダー画像の設定方法を解説します。
「外観」→「カスタマイズ」→「ヘッダー画像」をクリック。
現在のヘッダーで「新規画像」を追加↓
他の設定を入れていない限り、この設定方法でヘッダー画像が表示されます。
ヘッダー画像ではその他のオプションは何も変更する必要はありません。
設定画面に表示されるオプションは初期状態のままで、何もチェック入っていません。
設定を保存してトップページにヘッダー画像が表示されていればOKです。
ヘッダー画像が表示されない場合の解決手順
ヘッダー画像を設置したのに、ヘッダー画像が表示されない場合の解決方法についてです。
表示されない理由のほとんどが、ヘッダー画像エリアに別の要素を表示させる別の設定が入っているためです。
ヘッダーコンテンツ設定
「AFFINGER5管理」→「ヘッダー」をクリック。
「ヘッダーコンテンツ設定」を見てみましょう。
もしエディター内にデータがあれば、全て削除します。
ヘッダーコンテンツ設定に何かデータが入っていると、エディターに入力したデータが優先されて出力されます。
その結果ヘッダー画像が表示されなくなります。
ウィジェット
「外観」→「ウィジェット」をクリック。
「ヘッダー画像エリアウィジェット」に何もウィジェットを設置していないかを確認しましょう。
このウィジェットに何かしらのウィジェットを指定している場合、カスタマイズから設定したヘッダー画像は表示されません。
AFFINGER5管理オプション
「AFFINGER管理」→「ヘッダー」の設定を見直します。
基本何もチェックが入っていないのが初期設定で、この状態だとヘッダー画像は表示されます。
ここにチェックが入っていると表示されません↓
- ヘッダー画像を全て非表示にする
- ヘッダーに記事をスライドショーで表示する（※画像スライドショーより優先されます）
ヘッダー画像が表示されない理由と対処
ヘッダー画像が表示されない原因は優先度の問題です。
他の設定が入っていると、カスタマイズで設定したヘッダー画像は表示されません。AFFINGER5管理や、ウィジェットで不要な設定が入っていないかを確認しましょう。
ヘッダー背景画像の設定方法と、表示されない場合のチェックポイント
今度は『ヘッダー背景画像』の設定方法と、設定した背景画像が表示されない場合の解決方法を解説します。
AFFINGERのヘッダー背景画像の設定方法
「外観」→「カスタマイズ」→「ヘッダー画像」をクリック。
ヘッダー画像エリアの「画像選択」をクリックし、任意の画像を指定します。
「ヘッダー画像エリア最低の高さ（px）」で任意の数値を入れるか、
「トップページのヘッダー画像エリアの高さを画面サイズに応じて最大にする」にチェックを入れます。
その他の選択肢は全てオン・オフどちらの状態でもヘッダー背景画像は表示されます。
見え方が選択したオプションにより変わります。プレビューで確認しながら好みの表示になるようオプションを調整してください。
ヘッダーエリアに文字や画像を載せる手順
背景画像を設定後、自由に文字や画像やリンクなどを設置する方法を紹介します。
「AFFINER5管理」→「ヘッダー」→「ヘッダーコンテンツ設定」をクリック。
エディターに任意の入力をして設定を保存します。
この設定以降、背景画像の上に入力内容が表示されます。
ヘッダーの中央にセンタリンクしたい場合は、エディターの下にある
「コンテンツ全体を上下左右を中央寄せ（display:flex）にする※挿入内容によってはデザインが正常に反映されない場合があります」
にチェックをいれましょう。
ヘッダーコンテンツ設定以外で「ヘッダー画像エリアのウィジェット」から背景画像の上に文字や画像を設置することができます。
「外観」→「ウィジェット」をクリック。
任意のウィジェットを選択し「ヘッダー画像エリアのウィジェット 」を選択してください。
選択したウィジェットが背景の上に表示されます。
どうしてもヘッダー画像が表示されない場合
ブラウザのキャッシュをクリア
ヘッダー画像の設定を完了したら、「ブラウザのキャッシュのクリア」をしましょう。
AFFINGER5上で実は正しく設定が出来ている場合があります。
ブラウザのヘッダー画像設定前の古い情報を保存している可能性があるので、ブログを閲覧してるブラウザのキャッシュを確実にクリアしましょう。
キャッシュプラグインの停止
ブラウザのキャッシュと同じ理屈です。
設定を正しく行っていても、キャッシュの影響で設定後の情報が確認できない場合があります。
WordPressのキャッシュプラグインを有効化している場合は、キャッシュプラグインを停止しましょう。
- Quick Cache
- WP Super Cache
- W3 Total Cache
- WP Fastest Cache
AFFINGER5の設定リセット
どうしてもヘッダー画像が表示されない場合はAFFINGER5のテーマ設定をリセットしましょう。
「AFFIGER5管理」→「AFFIGER5管理リセット」をクリック。
「全てリセットする」にチェックを入れて、「保存」をクリック。
まとめ
WING （AFFINGER5）、AFFINGER5 EXテーマでのトラブルシューティングでした。
実はこれ私もハマったことがあり、解決するのに結構時間がかかりました。
ヘッダー画像とヘッダー背景画像。似て非なるものです。
ちゃんと区別すれば何でもない設定です。
関連して、ヘッダー画像が横幅いっぱいに表示されない時の解決アプローチを紹介します。
合わせてご覧ください。
【AFFINGER5】ヘッダー画像の横幅がいっぱい100％に表示されない場合の解決方法
-
-
【AFFINGER5】ヘッダー画像の横幅が画面いっぱい100％に表示されない場合の解決方法
ブログ記事内に広告リンクを含む場合がございます。 初心者AFFINGER5のヘッダー画像が横幅いっぱいに表示されなくて困った。 設定はちゃんとしているはずなのに。。。 そんな ...
続きを見る
この記事で読者さんのお悩みが解決できれば幸いです。
このブログではWordPressの設定・カスタマイズ、アフィリエイト運営に関する情報を発信しています。ぜひ別の記事もチェックしてみてください。
-
-
アフィンガー5の購入手順とWordPressへの導入方法【注意点も解説】
ブログ記事内に広告リンクを含む場合がございます。初心者アフィンガ―5を購入をしたいけど、どこから購入したらいいか分からない。 購入方法と、ワードプレスの最初の設定の仕方を教えてくれないかな？ &nbs ...
続きを見る
