【コピペ】アドセンスのレスポンシブ広告をはみ出さずに表示する方法


アドセンスには、レスポンシブ広告というデバイスのサイズによって広告のサイズも変化するものがあります。

これをスマホ表示にしたときに、ブログの枠からはみ出してしまい、困ったことはありませんか？

「レスポンシブ」と名前がついてるのに、そのままだとスマホ表示にしたときにテーマの枠からはみ出てしまいます。

この場合、いくつかの対処法がありますが、たった一手間でとても簡単に枠内に納める方法を発見しました。

今回は、アドセンスのレスポンシブ広告をスマホ表示でも枠内に納め、すっきりと見せる方法についてまとめます。

アドセンス広告がはみ出る場合の対処法

まず、アドセンスのコード（<script>タグで囲まれてるやつ）をこのように囲みましょう。

<div class='ad-wrapper'>  <!-- ここにアドセンスコードを配置 -->

</div>
上のコードをコピペして、 <!-- ここにアドセンスコードを配置 -->　というところにアドセンスコードを貼り付けましょう。

そしたら、今度はCSSを少し付け加えます。
.ad-wrapper {
overflow: hidden;
}
これを、ブログテーマのCSSを書き込むところにコピペしてください。

たったこれだけで、スマホでもうまく表示されると思います。

つまり、レスポンシブ広告のコードをdivタグで囲み、そのdivタグに overflow: hidden; を付け加えればOKです。

まとめ。

「レスポンシブ」と名前がついている以上、油断しきってる方も多いと思います。

結構有名なサイトでも、こういった現象はよく目にします。

なので、デフォルトでもきちんと収まるようにしてほしいですね。

いくらレイアウトがかっこよくても、はみ出たりしてたら少し残念です。

ぜひこの方法できちんと対策をして、サイトのレイアウトをかっこよくしましょう！
 B! LINE