西野竜平の脳壊ブログ

無職同然の黒子"西野竜平"の創作物紹介から日常のあれこれまで

Google Adsenseの広告によるスマホページのズレを直す方法

スポンサーリンク

竜平堂ウェブサイト  どうもこんにちは、この度1年程続けているAdsense収入が総額400円になった西野竜平(@ryuheidou)です。

 どこを見ても広告が入ってるウェブサイトやブログが溢れていますね。それをスマホでそれを眺めていると「サイト自体が右に行ったり左に行ったりして鬱陶しいなぁ」って感じで、見づらく感じる事ってありませんか。

 今回は初心者プログラミングという事でその解消法を記述したいと思います。

Google様のコードをそのまま使わない方が良い

 まず、Google様から配布されるコードが以下の通り。

 着目するのは、ブロック要素の「style="display:block;"」と、広告画像をめっちゃデカくレスポンシブにしますか?の「data-full-width-responsive="true">」です。

 このまま使ってしまうと、広告の画像が左に寄ってしまい、尚且つウェブデザインに対して画像が大きくなりすぎる為、右から左へずれていってしまう現象が起こってしまいます。

〜
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> 
<!-- ********* -->
<ins class="adsbygoogle"
style="display:block;"
data-ad-client="ca-pub-************"
data-ad-slot="*****"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script> 
〜

解決方法

 ブロック要素の「style="display:block;"」と、レスポンシブにしますか?の「data-full-width-responsive="true">」の項目にひと手間加えてあげましょう。

 まず、「style="display:block;"」を「style="display:block; text-align:center;"」の様にtext-alignで中央揃えにします。

 そして、「data-full-width-responsive="true">」のtrueの部分をfalseに変えます。「data-full-width-responsive="false">」

 完成例が以下の通りです。

〜
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> 
<!-- ********* --> 
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-client="ca-pub-************"
data-ad-slot="*****"
data-ad-format="auto"
data-full-width-responsive="false"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script> 
〜

 これで、右にも左にもいかず、しかもbody要素やcontainer要素などのデザインに沿った並びと大きさになってくれます。

 昨日私自身がこれに悩んでいて、読めもしない英語の記事を読みながら何とか解決する事が出来ました。

 困っている人がいたら是非参考にしてみてください。