[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. [CakePHP]CakePHP3インストール:PHP7.1

  2. [Python]pip(パッケージ管理システム)アップグレード

  3. [英会話ダイアログ・サイト]システム開発者向けの英会話ダイアログを追加…

  4. Echo Dot (エコードット) - スマートスピーカー with Alexa

    [ウェブシステム開発]Alexa開発スキルを学ぶ:その3

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

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

  7. [開発者が使いたい言語]TypeScriptとは?

  8. [AWS Amazon Connect]東京リージョンで一般提供開始

最近の記事

PAGE TOP