この世の全てを自動化してぐうたら生活したすぎる

煩悩八百万クリエイター戦記

AdSense HTML/CSS

AdSenseのレスポンシブ広告の縦幅の縦幅を指定する

更新日:

mAdsense広告ですが、レスポンシブにしていると、めっちゃでかい広告が出てしまってこれじゃない感がある時があります。

ただ、横幅はちゃんとレスポンシブにしたいんだよなぁ…というときに便利。

AdSenseのレスポンシブ広告の縦幅の最大値を指定

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- utaile -->
<ins class="adsbygoogle"
   style="display:block;height:300px;"
   data-ad-client="ca-pub-3774224802378126"
   data-ad-slot="2474164498"
   data-ad-format="horizontal,rectangle"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

styleの中の部分を修正するだけです。ここでCSS指定ができるので、今回はmax-height:300pxをしました。

これだけだとたまに長い広告が入り込んで画像が切れたりするので、data-ad-format="horizontal,rectangle"の指定もします。

サイズについて

多分広告のサイズの都合から、height300pxとやっていても、自動的に240pxに修正されたりなどがありそう…

なお、max-height:300pxとかにしても、勝手に内部の高さが大きくなったりして無駄でした。

 

height指定なしで、data-ad-format="horizontal,rectangle"の指定だけでもある程度制御はできそうではありますね。

補足

AdSenseの横幅が親要素を超えるときは、data-full-width-responsive="false"指定でいけます。

f-arts336

f-arts336

-AdSense, HTML/CSS

Copyright© 煩悩八百万クリエイター戦記 , 2018 All Rights Reserved.