なんにもない日の頭の中はこんなもんだったりする

【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さんのおすすめ

デザインの記事

ぼくと、シンカリオン/特集「の、こと」 – いつかのこと
映画『マチネの終わりに』公式サイト
もうすぐ1年/窓の家と生活
12月7日