125naroom / デザインするところ(会社)です。

【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;
}

おすすめ

Googleさんのおすすめ

Googleさんのおすすめ

デザインの記事

Aubloom オーブルーム – RAWSILK SHAMPOO ローシルクシャンプー
ちょっと思い出しただけ
【Google Chrome】ショートカットキーまとめ(Windows or Mac)