Tips：Wixのモバイル表示でヘッダー上部に謎の空白が出る原因と解決方法

Hi, there.

本日は、Wixでサイトを作成している際に私が実際に直面した現象と、その解決方法について紹介します。同じような症状で困っている方の参考になれば幸いです。

発生していた現象

発生していたのは、サイトのヘッダー上部に謎の空白が表示されるという現象です。

しかもこの空白は、モバイル版の公開サイトでのみ発生しており、Wixのエディタ上やプレビュー画面では確認できませんでした。そのため、最初は原因がまったく分からず、かなり悩まされました。

原因

結論から言うと、原因はGoogle AdSense の自動広告設定にありました。

具体的には、自動広告の「ヘッダー上部に表示される既存のAdSense広告」が影響していました。

Google AdSente上で自動広告を設定すると、この表示がデフォルトで有効になっているため、Wix上でGoogle AdSenseを設定した結果今回の現象が発生するようになったということです。やっかいなのは、この広告枠がデスクトップ表示やエディタ、プレビューでは見えない点です。実際にAdSenseの審査が完了し、公開サイト上で広告配信が始まって初めて気づきやすい挙動でした。

そのため、Wix側のレイアウト崩れに見えてしまい原因の切り分けに少々てこずりました。

解決方法

解決方法はシンプルです。

Google AdSenseの自動広告設定で、ヘッダー部分を除外エリアに設定するだけです。

これで、モバイル版の公開サイトにだけ現れていた不自然な空白は解消できました。

原因に気づくまでの流れ

当初はWix側の問題だと考え、エディタ上で余白を詰めたり、関連しそうなコンポーネントをすべて削除したりと、さまざまな方法を試しました。しかし、どれを試しても症状は改善しませんでした。

一方で、過去に作成した他のWixサイトでは同じ問題が起きていなかったため、単純なWixの仕様や不具合ではなさそうだと考えるようになりました。

そこで改めて違いを洗い出してみたところ、今回のサイトだけGoogle AdSenseを導入していたことを思い出しました。試しにAdSense関連のカスタムコード設定を解除してみたところ、問題の空白が消えました。これにより、ようやく原因を特定できました。

まとめ

この現象は、公開後のモバイル版でしか発生せず、しかも広告が直接見えていないと気づきにくいため、意外とハマりやすいポイントだと思います。

Wixでモバイル表示のヘッダー上部に謎の空白が出る場合は、まずレイアウトやセクション構成を疑う前に、Google AdSenseの自動広告設定を確認してみるとよいかもしれません。