AdSnseの広告に出る黄色の背景を消すCSS(スタイルシート)

目次

余計な黄色の背景や余白を消す

AdSense広告を設置したページを開くと、広告が表示される部分に広告は表示されていないけど、全面に黄色い背景が表示されていたり、広告は表示されているけど、黄色い部分が一部表示されていたります。

これをそうにかできないかな?と方法を探したところ、消すというよりCSS(スタイルシート)で透過せることで解決できることがわかりました。

CSS(スタイルシート)例

以下の1行を既存のスタイルシートか、AdSenseの広告コードに加えるだけです。このコードは『透明』を意味するスタイルシートのコードです。これでAdSense広告の背景を透過させることができます。

background: transparent;

AdSenseの広告コードに加えた例

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
 <ins class="adsbygoogle"
 style="display:block; text-align:center; background: transparent;"
 data-ad-layout="in-article"
 data-ad-format="fluid"
 data-ad-client="ca-pub-XXXXXXXXXXXXXXXXX"
 data-ad-slot="XXXXXXXXXXX"></ins>
<script>
 (adsbygoogle = window.adsbygoogle || []).push({});
 </script>
 

スタイルシートに加えた例

複数のAdSense広告があり、全部ページに共通のCSSで適用する場合は、以下の1行を加えればOKです。

.adsbygoogle { background: transparent;}

黄色の部分が消えた!

これで黄色い背景部分が消えました。ただ、背景を透明(透過)にするだけなので、広告部分を縮める訳ではないので余白部分ができます。

前へ

YoutTubeの埋め込みIFLAMEをレシポンシブ対応するCSS

次へ

RSSでより早くGoogleにインデックス登録を促す『PubSubHubbub』