読者の方からこんなSOSが届きました。
PCでは普通に表示されてるのに、スマホだけヘッダー画像が消えてしまって...。色々試したけど全然直らないんです
この症状、実はAFFINGERあるあるです。
しかも原因は、ほとんどの場合「たった1つのチェックボックス」。
今回は、実際のトラブル対応から見えてきた「スマホだけヘッダーが消える問題」の真相と、最短ルートでの解決法をシェアします。
症状の全貌：スマホで見ると、ヘッダーが跡形もなく消えている
まず、典型的な症状を整理しておきましょう。
| 表示デバイス | ヘッダー画像 | ヘッダー枠 | よくある誤解 |
|---|---|---|---|
| PC | ✓ 完璧に表示 | ✓ 存在する | 問題なし |
| スマホ | ✗ 消失 | ✗ 存在しない | 画像ファイルの問題？ キャッシュの問題？ |
| 実際の原因 | → | → | AFFINGER設定の問題 |
よくあるパターンとしては、
- スマホ用ヘッダー画像を設定しても反映されない
- 画像が壊れてるわけでもない（PCでは見えてるから）
- キャッシュクリアしても変わらない
- いつの間にか消えていて、何を触ったか覚えていない
見た目だけだと「画像ファイルの問題？」と思いがちですが、実は違います。
これ、AFFINGER側の設定が原因なんです。
犯人は「スマホ・タブレット閲覧時は非表示」チェック
結論から言います。
スマホだけヘッダーが消える原因の9割は、AFFINGER管理画面の「スマホ・タブレット閲覧時は非表示」にチェックが入っているせいです。
この設定、意外と知られていないんですが、めちゃくちゃ強力です。
どこにあるかというと、
「AFFINGER管理」→「ヘッダー」→「ヘッダー画像エリア」
ここに、ひっそりと「スマホ・タブレット閲覧時は非表示」というチェックボックスがあります。
このチェックが入っていると何が起こるか。
| チェック状態 | ヘッダー表示 | スマホ用画像設定 | 高さ指定ON時 | 高さ指定OFF時 |
|---|---|---|---|---|
| ✓ ON（非表示） | 完全に非表示 | 無効化される | 白い空白のみ | 枠ごと消える |
| OFF（表示） | 正常に表示 | 有効 | 画像表示 | 画像表示 |
つまり、このチェック1つで、スマホ側のヘッダーは問答無用で非表示になるわけです。
今回の相談者さんも、デザインをいじっているうちに、うっかりここに触れてしまったようでした。
なぜこんなことが起こるのか？
AFFINGERの設定優先順位を理解する
AFFINGERの設定って、正直ちょっと複雑です。
- カスタマイザー
- AFFINGER管理
- スマホ専用設定
など、複数の設定画面が並行して存在していて、「どれが最優先なの？」ってなりますよね。
答えはシンプル。
「スマホ非表示」が最優先です。
何を設定しても、この「スマホ非表示」がONになっていれば、すべて無効化されます。
だから、こんな状況が起こります。
- スマホ用画像を何度アップロードし直しても表示されない
- ヘッダーの高さを調整しても変わらない
- カスタマイザーで色々変更しても反映されない
全部、「スマホ非表示」という上位設定に上書きされてるんですね。
これを知らないと、「画像がおかしいのかな」「キャッシュかな」って無駄に悩んでしまう。
でも実際は、チェックボックス1つで解決する話だったりします。
実際のケース：
どうやって原因を突き止めたか
今回の相談では、こんなやり取りがありました。
スマホでヘッダーが完全に消えてて...PCでは普通に見えるんですけど…
送られてきたスクリーンショットを見ると、確かにスマホ側ではヘッダーエリアが存在していない状態。
画像が壊れてるとかじゃなくて、「そもそも枠がない」典型的なパターンでした。
話を聞いていくと、デザインを理想に近づけようと、ヘッダー関連の設定を色々触っていたとのこと。
ただ、具体的に何をどう変えたかは覚えていない様子。
この時点で、「これはカスタマイザーじゃなくて、AFFINGER管理側の問題だな」と判断。
実際にこちらでも同じ症状を再現してみたところ、ビンゴ。
「AFFINGER管理」→「ヘッダー」→「ヘッダー画像エリア」→「スマホ・タブレット閲覧時は非表示」
ここにチェックが入っていました。
チェックを外したら、スマホ側でもヘッダー画像が正常に表示。
一発解決です。
恐らく、設定をいじっているうちに、本人も気づかないままこの項目に触れてしまったんでしょうね (^_^;)
それでも直らない場合のチェックリスト
「スマホ非表示」のチェックを外しても改善しない？
そんな時は、別の要因が絡んでいる可能性があります。
以下のポイントを順番に確認してみてください。
| チェック項目 | 確認すべき症状 | チェック方法 | 対処法 |
|---|---|---|---|
| 1. ヘッダーの高さ設定 | 画像が表示されても見えない | ・スマホ側の高さが0pxになっていないか ・「画面サイズに応じて最大にする」がONか ・最小高さの指定が極端に小さくないか | 高さを適切な値に調整する |
| 2. スマホ用画像未設定 | スマホ側が空欄表示 | カスタマイザーで「スマホのヘッダー画像」が設定されているか確認 | スマホ用画像を設定する |
| 3. CSS干渉 | 意図しない非表示 | 以下のようなコードがないか確認：.header-area { display: none; }.sp-none { display: none; } | 該当CSSを削除または修正 |
| 4. プラグイン干渉 | 画像読み込みブロック | 以下のプラグインを確認： ・LiteSpeed Cache ・Autoptimize ・EWWW Image Optimizer ・Lazy Load系 | 一時的に無効化してテスト |
| 5. テーマファイル不整合 | 更新エラー後の不具合 | ・テーマ更新中にエラーが出たか ・子テーマでheader.phpを編集しているか ・外部テンプレートを流用しているか | テーマを再インストール、 または親テーマに切り替えて確認 |
これらを順番にチェックしていけば、たいてい原因は見つかります。
まとめ
スマホでヘッダーが消える？ → まず「スマホ・タブレット閲覧時は非表示」のチェックを確認。
それでもダメなら、この記事のチェックリストを上から順に試してください。
ほとんどのケースはこれで解決します。もし解決しない場合は、下記からご相談ください。
その他のAFFINGERトラブルでお困りの方へ
AFFINGERを使っていると他にも様々なトラブルに遭遇することがありますよね。
- サイドバーが崩れた
- 記事が真っ白になった
- カスタマイザーの設定が反映されない
- プラグインとの相性問題
- デザインが突然おかしくなった
など、「これどうしたらいいの？」と困っていることがあれば、お気軽にご相談ください。
この記事で紹介した方法を試した上で、それでも解決しない場合は一緒に原因を探りましょう。
※スクリーンショットや、試した内容を添えていただけるとスムーズです。
※返信までお時間をいただく場合がございますのでご了承ください。