Googleアドセンス広告は真ん中に表示されるのが一番いい

Googleアドセンス広告をセンタリングする方法-CSSで効かないときの対処法-

Planet20xxPC用バナー Planet20xxモバイル用バナー

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

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

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>

まとめ

以上の2パターンが、Googleアドセンス広告のセンタリング対処法です。

こうした微妙な調整は環境が少し違うだけで、うまくいかなかったりとモヤモヤしてしまうものです。これがダメなら、こっち、こっちもダメなら両方やってみる。上手くセンタリングが出来てクリック率があがったなら、効果あったと初めて思えるんですけどね。

以上、アドセンス広告のセンタリングレポでした。

一つずつ片付けよう!
どっちにしてもクリックされないと哀しいですよね

【関連記事】

PC(Javascript)
CDNとサーバー読み込みのイメージ画像

CDNとレンタルサーバーのjsファイル読み込み比較

jsファイルを利用できるCDNのパフォーマンスと稼働時間を調べてみました。

PC(html)
DNSプリフェッチでリレーションしているイメージ画像

GoogleAdsense広告を速く表示する

DNSプリフェッチで5つの参照先を事前リレーションするだけで、すばやく表示されます

PC(html/Javascript)
スマホでの画像遅延読み込みイメージイラスト

表示スピードアップ!画像遅延読み込み実装

PagespeedInsightのスコア改善に役立つ画像遅延読み込みの実装方法についてわかりやすく解説します

PC(HP)
画像の最適化手順を説明したページへのリンク画像

画像を軽くする最適化はお済みですか?

画像にはいろいろな情報が入っています。ムダな部分を削除して容量を小さくしましょう。

PC(HP)
Googleアナリティクスで特定のIP除外する方法

Googleアナリティクスで特定のIPアドレスを除外する方法

自分アクセスによる訪問カウントを取得しないための設定

PC(Windows)

WindowsでもHelveticaフォントを使いたい!Arialじゃ満足できない方必見

TOP