WebページにGoogle Adsenseを表示させると、思った通りの表示ならないことがあったのでそのときの対処方法をまとめます。
Google Adsenseの表示枠が広くなる？
Google Adsenseを表示した時にその表示域の前に意図しない空白ができることがありました。表示しているときのHTMLページ内容を確認してもpaddingやmarginは設定されておらず、Google Adsenseの領域そのものが大きくなっています。しかし、広告を表示している領域は指定のサイズなので大きくなっている領域の余りの部分が空白になっていました。謎だ・・・
そこで、表示しているときのHTML表記をよーーーーーーく見てみると、Googleから取得した広告コードの中にあるHTMLコメント「<!– –>」の前後に<br>タグが記述されているではないですか！そして設定した時の広告コードを確認しても<br>タグは付いていない・・
空白の原因はこの<br>タグであることがわかりました。でも、なんで<br>タグがついているのでしょうか？
実はこのときはGoogle Adsenseを投稿ページ内に表示するように設定していて、WordPressはページを表示するときに自動的に<p>や<br>タグを文章に追加する動作をします。この動作が原因でHTMLコメントの前後に自動的に<br>タグがされていたのですね。
・解決法
WordPressが自動的に<p>や<br>タグを追加しているのは、WordPressが投稿内容の表示（the_content）をフィルターフックしてこれらのタグを追加する関数wpautop）が実行されているからです。このフィルターフックを解除すれば自動的にこれらのタグを追加しなくなるのですが、この解決法で対処すると、既にいくつか投稿記事がある場合はそれらの表示に影響します。なのでここではGoogle Adsenseに付加されるタグだけを削除する対処方法を考えたいと思います。WordPressが自動的にpタグを付加するのを解除する方法はこちらを参考にしてください。
・特定のタグを削除
Google Adsenseに付加されるタグだけを削除するのは、実はとても簡単で、CSSでこのタグだけを指定して表示しない設定をするだけです。
HTMLの記述で広告コードを特定のclassやidで識別できるようにして、CSSで表示を消すと空白がなくなります。
例）
【HTML記述】
<div class=“adsense”>
広告コード
</div>
【CSS記述】
.adsense br {
display: none;
}
Google Adsenseを表示すると背景に色がついてしまう
Google Adsenseを表示した時に背景に色がついて、広告と共に色のついた背景が広告の枠のように表示されたり、ずれて表示されて見た目がとても変です。この原因は、<ins>タグにありました。Google Adsenseは取得する広告コードの中で<ins>タグを使っているのですが、WordPressで使用するテーマによってこの<ins>タグの背景に色を設定するCSS記述さているものがあります。理由は分かりませんがこれが原因でGoogle Adsenseの背景に色がついてしまいます。
・解決法
先程の解決法と同じように原因となっている<ins>タグの背景色設定を解除しましょう。もしくは、ページの背景色と同じ色に設定して見た目消えたようにしましょう。
例：背景色の設定を解除）
ins {
background: none;
}
以上がGoogle Adsenseの表示が変なときの対処方法でした。また他に変な表示がされたときには対処方法を追記していこうかと思います。
