パンくずリスト

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で表示して、ズームをしたときですね。その他は問題なしです。

と、思ってたら、スマホの縦表示で "縦長の広告" が表示された場合、それを横画面にすると画面が乱れます。この場合、ページをリフレッシュすると "横長(または正方形かな???)" の広告が表示され、画面の乱れはなくなります。

前のページ 次のページ
No Comment
Add Comment
comment url