広告ユニットの広告がレスポンシブ対応のスマホサイトで見たときに、要素からはみ出てしまう場合があります。
レイアウト内に収まってる程度のはみ出しや崩れならいいですが、画面外にはみ出るくらいになると、まともに広告として機能しないのでクリック率も大幅に低下します。
このページのコンテンツ
修正方法
明確にサイズの指定をしないのであれば、自身のサイトの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>
以上で、広告コードを入れた要素の幅に収まる形で広告が表示されるようになります。
この記事を書いた人管理人
SAKURAGRAPHICA代表
会社員の傍ら、フリーランスでWEBサイトの制作やWordPressによるCMSの構築・障がい者の就労支援としてホームページ制作の職業指導員も行っております。
