Google Adsenseを導入してウェブサイトに広告を掲載する際、スマホでの表示対応にひと手間かかりましたので情報を共有させていただきます。
【CSSフレームワーク】
Bootstrap4を使用
【表示テストの際の問題点】
レスポンシブウェブデザインのため、htmlをDreamweaverで編集しながら、広告表示をPCからテストしたいところですが、Firefoxの「ウェブ開発」「レスポンシブデザインモード」で確認しようとしたところGoogle側で「userAgent」を判断しているのか、広告がスマホサイズにならないため、表示確認ができませんでした。そのため、スマホ実機で確認しました。
【使用したスクリプト】
「style」タグの箇所でメディアクエリーを設定し、iPhone7、iPhone8プラスでは広告が問題なく表示されました。
「example_responsive_1」という名前でクラス指定していることがミソでした。
<style>
.example_responsive_1 { width: 320px; height: 100px; }
@media(min-width: 500px) { .example_responsive_1 { width: 468px; height: 60px; } }
@media(min-width: 768px) { .example_responsive_1 { width: 720px; height: 120px; } }
</style>
<script async src="//pagead2.googlesyndication.com/（下に続く）
pagead/js/adsbygoogle.js"></script>
<!-- example_responsive_1 -->
<ins class="adsbygoogle example_responsive_1"
style="display:inline-block"
data-ad-format="fluid"
data-ad-layout-key="〇〇〇〇"
data-ad-client="ca-pub-XXXXXXX11XXX9"
data-ad-slot="8XXXXX1"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
【参考にしたページ】
レスポンシブ広告コードを修正する方法
