[Google Adsense]レスポンシブ広告コードを修正する方法

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>

【参考にしたページ】
レスポンシブ広告コードを修正する方法

関連記事

  1. [Google Search Console]ページにリダイレクトがあ…

  2. [node.js]Lambda Node.jsランタイムのアップグレー…

  3. [Alexaスキル開発] Alexaスキル「楽器クイズ」制作について

  4. [Amazon Polly]多言語翻訳に対応したワードプレスプラグイン…

  5. [NATIVE INSTURUMENTS]macOS 11(Big S…

  6. [CakePHP3]2つのデータベースを設定し同時に使用する

  7. [CakePHP]CakePHP3インストール:PHP7.1

  8. [Google Maps]グーグルマップが表示されない

最近の記事

PAGE TOP