Blogger:Google AdSenseのレスポンシブな広告ユニットを貼ってみた (2024/05/12)
Google AdSenseのレスポンシブな広告ユニットを貼ってみた
設置はHTMLビューで広告を貼りたいところに、<div>AdSenceの広告ユニットのコード</div>みたいに、divで挟んで、コードを貼りました。広告ユニットの名前以前のコードはいらないかな。JetThemeのWebページに記載があります。
「https://www.jettheme.com/2021/03/lazyload-pada-jettheme.html#Lazyload_Adsense」
<div>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-x…x"
crossorigin="anonymous"></script>
<!-- 広告ユニットの名前 -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-x…x"
data-ad-slot="x…x"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
このブログの、ブログサービスは「Blogger」、テンプレートは「JetTheme」です。「JetTheme」はレスポンシブに対応しています。
PCでこのページを表示して、ズーム( [Ctrl] + [マウスホイールのクルクル] )をすると・・・。あ、やっぱりはみ出すんですね。
スマートフォンでこのページを表示すると・・・。縦表示の場合、画面の左右目いっぱい(余白なし)で表示されますね。横表示の場合、左右に余白ありで、このページと同じ幅で表示されますね。
向き(縦 / 横)を切り替えるても、前述と同じですね。
▼こんな感じです。
▲こんな感じです。
表示が乱れるのは、PCで表示して、ズームをしたときですね。その他は問題なしです。
と、思ってたら、スマホの縦表示で "縦長の広告" が表示された場合、それを横画面にすると画面が乱れます。この場合、ページをリフレッシュすると "横長(または正方形かな???)" の広告が表示され、画面の乱れはなくなります。