WordPressウィジェットにAdSense広告を貼ったときの余白を取り除く2つの方法

ウィジェットエリアにAdSense広告を配置した際に発生する余白の例

WordPressのウィジェットエリアにAdSense広告コードを設置した際、広告の上下に不要な余白が表示されることがあります。CSSのカスタマイズやテーマファイルの変更に踏み込む前に、まずシンプルな2つの方法を試してみましょう。多くのケースでこれだけ解決できます。

AdSenseコードの改行を削除する

Googleが発行するAdSenseコードをそのままコピーすると、複数の改行が含まれています。このコードをWordPressのウィジェットに貼り付けると、改行が自動的に <br> タグや余分な段落タグに変換され、広告の周囲に空白スペースが生じます。

対処方法は、AdSenseコードをテキストエディタで開き、改行をすべて削除して1行に整形してからウィジェットに貼り付けることです。改行がなければ自動変換も発生しないため、余白が出なくなります。

AdSenseコードを1行に整形してからウィジェットに貼り付ける手順

ビジュアルモードではなくHTMLモードで貼り付ける

テキストウィジェットやカスタムHTMLウィジェットを使ってAdSenseコードを設置する場合、入力モードの選択が重要です。

ビジュアルモード(または「ビジュアルエディター」)でコードを入力すると、HTMLタグがそのまま文字として表示されてしまい、広告が表示されません。必ずテキストモード(またはカスタムHTMLウィジェット)を使用してください。ビジュアルモードで誤って入力した場合は、タブを切り替えてHTMLモードで確認・修正する必要があります。

まとめ

ウィジェットにAdSense広告を設置した際に余白が生じる原因のほとんどは、コード内の改行と入力モードの問題です。

  • AdSenseコードは改行なしの1行に整形してからウィジェットに貼り付ける
  • 入力はビジュアルモードではなくテキストモード(HTMLモード)で行う

上記2点を確認してもまだ余白が気になる場合は、CSSで margin や padding の値を調整することで対応できます。ブログ上のAdSense設置でお困りの方はレンタルサーバー比較「ペガブロ」のWordPress設定ガイドも参考になります。

このテーマの関連記事はこちら