この記事では、ウィジェットを利用してGoogleアドセンスなどの広告を貼り付けたときに、配置調整がうまく行かず、謎の余白が空いてしまう現象の対策方法を紹介します。
WordPressにアドセンス広告を貼り付けるときは、一般的にWordpressのウィジェット機能を使って配置することと思いますが、うまく配置できずに、原因不明の余白が空いてしまうことがありませんか?
この現象は、コードを記述するウィジェットに「テキスト」ウェジェットを使用したときに起こります。
「カスタムHTML」ウィジェットを使うと、良い具合に配置できるようになります。
もくじ
テキストウィジェットを使うと配置が崩れる
WordPressのウィジェット機能を使って、Googleアドセンスなどのスクリプトコードを貼り付けるとき、「テキスト」ウィジェットを使うと、特に指定したはずのない余白ができてしまうときがあります。
このスペースは、GoogleChromeのデベロッパーコンソールを使ってみても、とくにPaddingなどの配置や余白を調整する指定は入っていません。
この現象は、使っているウィジェットが「テキスト」ウィジェットのときに起こります。
広告ユニットの中には、「テキスト」ウィジェットを使ってコードを貼り付けるような記載があるものもあります。
これは、Wordpress4.8でウィジェット機能が大幅に強化される以前の名残です。
WordPress4.8以降のバージョンでは、コードを記述するウィジェットとして「カスタムHTML」ウィジェットが用意されています。
カスタムHTMLウィジェットを使う
WordPressが4.8にバージョンアップしたときに導入された、「カスタムHTML」というウィジェットを使うことで、無駄な余白が出来る問題を解決することができます。
「テキスト」ウィジェットの代わりに、「カスタムHTML」ウィジェットを使ってコードを貼り付けるだけで、余分なスペースのない状態で表示されるようになります。
カスタムHTMLウィジェットが保存できないときは?
コードを挿入するときに便利な「カスタムHTML」ウィジェットですが、コードを貼り付け保存ボタンを押したにもかかわらず、いつまでも進捗マークがくるくると回ったまま、保存が完了しない場合があります。
これは、WEBサーバーのWAF(ウェブアプリケーションファイアウォール)というセキュリティ機能が邪魔をして、保存ができない状態になっています。
WordPressを運用しているWEBサーバのセキュリティ設定を、「カスタムHTML」ウィジェットを保存するあいだだけ、OFFにしてあげる必要があります。
ロリポップでの変更方法を紹介した記事を書いています。参考にしてみてください。
まとめ
Googleアドセンスなどこ広告スクリプトの表示に、無駄な余白ができてしまうときの対処方法を紹介しました。
WordPressの「テキスト」ウィジェットにスクリプトコードを貼り付けてしまうと、表示にスペースができてしまいます。
「カスタムHTML」ウィジェットを使うことで、正常な表示にすることができます。
「カスタムHTML」ウィジェットがうまく保存できないときは、Wordpressを運用しているWEBサーバのWAFセキュリティ設定を、一時的にOFFにしましょう。