Googleアドセンス広告を中央寄せする方法｜左右ズレの解消＆デザイン最適化

Googleアドセンス広告が中央に寄らない原因と解決法

スマホで自分のサイトを見たとき、Googleアドセンス広告が左に寄ってしまい「何で？」と思ったことはありませんか？

この記事では、CSSで中央寄せする方法と、CSSが効かない場合の代替策2つのパターンをご紹介します。

簡単に出来るので、几帳面な方におススメです( ´ ▽ ` )ﾉ。

【INDEX】－目次－

方法1：CSSで中央寄せする
方法2：CSSがが効かない場合の対処法
まとめ

1. CSSで中央寄せする方法

Googleアドセンス広告は画面いっぱいに表示されるのがデフォルト設定なので、どちらかに寄るとか基本的にはありません。

ただCumulative Layout Shift（CLS）改善のため、広告サイズ制限をかけている場合などで一部の広告が左に寄ってしまう場合があります。そのときの対処法です。

【手順】

<div>タグでアドセンスのコードを囲い、クラス名を適当に「adcenter」と付与しました。

html サンプルコード

html

<div class="adcenter">
/* アドセンス広告コード */
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

CSS

.adcenter {text-align:center}

2. CSSが効かない場合

text-align:centerがダメだった場合の対処法

レスポンシブ対応の広告のなかには、CSSでは中央寄せにならないものがあります。先述したようにアドセンス広告はデフォルトで横幅いっぱいに表示しようと試みますが、その設定を無効化することで広告のセンタリングを可能にします。

※参考：AdSenseヘルプ　記事内広告の全幅レイアウト

【追加コード】

html

data-full-width-responsive="false"

html サンプルコード

html

<div class="adcenter">
/* アドセンス広告コード */
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"
     data-full-width-responsive="false"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>