Googleアドセンス広告を中央揃え（センタリング）する方法|プラネット20xx

自分のサイトをスマホでチェックしたとき、GoogleAdSense広告が左に寄っていて、何だか気になるなと思ったので、アドセンス広告を中央寄せする方法を解説します。

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

【INDEX】－目次－

CSSでセンタリングする方法
CSSでダメだった場合
まとめ

CSSで中央寄せする方法

Googleアドセンス広告は画面いっぱいに表示されるのがデフォルト設定なので、どちらかに寄るとか基本的にはありません。ただCumulative Layout Shift（CLS）改善のため、広告サイズ制限をかけている場合などで一部の広告が左に寄ってしまう場合があります。そのときの対処法です。

【手順】

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

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}

CSSが効かない場合

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

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

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

【追加コード】

html

data-full-width-responsive="false"

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>