【WordPress】アドセンスのレスポンシブ広告、スマホでもはみ出さないようにする

【WordPress】アドセンスのレスポンシブ広告、スマホでもはみ出さないようにする

Googleアドセンスの広告のコーディングって少々面倒だったりする。
やたらと主張してくるわけです。
スマホだと、はみ出す。はみ出してくるんです。
綺麗にコーディングしてるのになとがっかりすることしばしば。

なので、スマホでもはみ出さないメモです。

サンプル

「300×250 レクタングル」の場合。(スマホだとこのサイズが最適。)
広告のソースコードをdivで囲む。
その幅を決めてあげて、はみ出すと見えなくなるよ(overflow: hidden;)と指定する。

<div class="ads">
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <ins class="adsbygoogle"
         style="display:inline-block;width:300px;height:250px"
         data-ad-client="ca-pub-xxxxxxxxxx"
         data-ad-slot="xxxxxxxxxx"></ins>
    <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
</div><!-- /.oneBox -->

CSS

.ads {
	width: 300px;
	overflow: hidden;
}
デザインのこと - Web design gallery
いつかのこと

おすすめ

Googleさんのおすすめ

Googleさんのおすすめ

デザインの記事

岡村鞄製作所|鞄の販売・修理 – 群馬県高崎市
岡村鞄製作所|鞄の販売・修理 – 群馬県高崎市
あったらいいなと思うもの/窓の家と生活
『未来のミライ』、何度も見てしまう