副業ブログ

【AFFINGER5】ヘッダー画像が表示されない問題の解決方法

THE THORコーポレートサイトの作り方
初心者
AFFINGERのヘッダー画像がなぜか表示されない?
設定しているのに、なぜか表示されない?
ちゃんとしたやり方を知りたい

 

そんなお悩みを解決します。

有料テーマのAFFINGER5、なぜかヘッダー画像が表示されない時ってありますよね?

今回はそんな場合の解決方法を解説します。

 

対象の有料テーマ

  • WING (AFFINGER5)
  • AFFINGER5 EX

 

 

『ヘッダー画像』と『ヘッダー背景画像』は別物ですよ

ヘッダー画像とヘッダ背景画像って別物ですよ

 

まず、AFFINGER5テーマの2つの用語をしっかり区別しましょう。

 

  • ヘッダー画像
  • ヘッダー背景画像

 

 

初心者
同じ意味じゃないの?

 

言葉も似ていますし設定する箇所も同じですが、完全な別物です。

 

ヘッダー画像が表示されない!」とハマる人は、この区別をつけるのが最初のステップです。

 

 

 

ザックリ解説ヘッダー画像とヘッダー背景画像の違い

 

『ヘッダー画像』『ヘッダー背景画像』ともにトップページのメニューの下に表示させる画像のことです。

 

ヘッダーイメージ

 

『ヘッダー画像』には管理画面上から文字や画像を載せることはできません。

対して『ヘッダー背景画像』には文字や画像を載せることが出来ます。

 

自分がやりたいことを決めたうえで、どちらを選ぶかを決めましょう。

 

以後の説明は、この基本を理解したうえで読みましょう。

 

 

『ヘッダー画像』の設定方法と、表示されない場合のチェックポイント

 

ヘッダー画像の設定方法と表示されない場合のチェックポイントを紹介していきます。

 

 

AFFINGERのヘッダー画像の設定方法

 

まずはAFFINGERでヘッダー画像の設定方法を解説します。

 

繰り返しますが、「ヘッダー背景画像」ではなく「ヘッダー画像」の設定です。

 

 

外観」→「カスタマイズ」→「ヘッダー画像」をクリック。

現在のヘッダーで「新規画像」を追加↓

 

現在のヘッダー

 

 

表示したい画像を指定すればOKです。

 

他の設定を入れていない限り、この設定方法でヘッダー画像が表示されます。

 

ヘッダー画像ではその他のオプションは何も変更する必要はありません。

設定画面に表示されるオプションは初期状態のままで、何もチェック入っていません。

 

ヘッダー画像の設定を入れる

 

 

設定を保存してトップページにヘッダー画像が表示されていれば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】ヘッダー画像の横幅が画面いっぱい100%に表示されない場合の解決方法

  初心者AFFINGER5のヘッダー画像が横幅いっぱいに表示されなくて困った。 設定はちゃんとしているはずなのに。。。   そんなトラブルを解決します。 実は私もAFFINGER ...

続きを見る

 

 

この記事で読者さんのお悩みが解決できれば幸いです。

このブログではWordPressの設定・カスタマイズ、アフィリエイト運営に関する情報を発信しています。ぜひ別の記事もチェックしてみてください。

 

【備考】GRCと他の順位チェックツールとの比較
アフィンガー5の購入手順とWordPressへの導入方法【注意点も解説】

初心者アフィンガ―5を購入をしたいけど、どこから購入したらいいか分からない。 購入方法と、ワードプレスの最初の設定の仕方を教えてくれないかな?   こういった悩みに答えます。 この記事ではワ ...

続きを見る

サイト内検索

-副業ブログ
-

© 2021 副業ブログ