ブログ

【Google】レスポンシブ対応時のGoogleアドセンスの広告がレイアウトからはみ出すのを防ぐ方法

広告ユニットの広告がレスポンシブ対応のスマホサイトで見たときに、要素からはみ出てしまう場合があります。

レイアウト内に収まってる程度のはみ出しや崩れならいいですが、画面外にはみ出るくらいになると、まともに広告として機能しないのでクリック率も大幅に低下します。

修正方法

明確にサイズの指定をしないのであれば、自身のサイトのCSSを触って調整する必要はほぼありません。

まずは「広告ユニットごと」の項目からコードを取得します。下記はディスプレイ広告の例です。

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!--広告の名前-->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

サイズの指定

上記コードの7行目data-ad-format="auto"の部分でサイズ指定をしています。サイズには下記3つがあるようです。

  • horizontal(横長)
  • vertical(縦長)
  • rectangle(レクタングル)

ここの変更は必須ではない様ですが、今回はdata-ad-format="rectangle"に変更します。

表示幅の指定

コード8行目のdata-full-width-responsive="true"のtrueをfalseに変更します。

変更後のコード

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!--広告の名前-->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-0000000000000000"
     data-ad-slot="0000000000"
     data-ad-format="false"
     data-full-width-responsive="rectangle"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

以上で、広告コードを入れた要素の幅に収まる形で広告が表示されるようになります。

最近の記事 おすすめ記事
PAGE TOP