Googleアドセンス広告は真ん中に表示されるのが一番いい
Googleアドセンス広告をセンタリングする方法-CSSで効かないときの対処法-
自分のサイトをスマホでチェックしたとき、GoogleAdSense広告が左に寄っていて、何だか気になるなと思ったので、アドセンス広告を中央寄せする方法を解説します。
簡単に出来るので、几帳面な方におススメです( ´ ▽ ` )ﾉ。
CSSで中央寄せする方法
Googleアドセンス広告は画面いっぱいに表示されるのがデフォルト設定なので、どちらかに寄るとか基本的にはありません。
ただCumulative Layout Shift（CLS）改善のため、広告サイズ制限をかけている場合などで一部の広告が左に寄ってしまう場合があります。そのときの対処法です。
<div>タグでアドセンスのコードを囲い、クラス名を適当に付与します。
<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>.adcenter {text-align:center}CSSが効かない場合
text-align:centerがダメだった場合の対処法
レスポンシブ対応の広告のなかには、CSSでは中央寄せにならないものがあります。先述したようにアドセンス広告はデフォルトで横幅いっぱいに表示しようと試みますが、その設定を無効化することで広告のセンタリングを可能にします。
data-full-width-responsive="false"<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アドセンス広告のセンタリング対処法です。
こうした微妙な調整は環境が少し違うだけで、うまくいかなかったりとモヤモヤしてしまうものです。これがダメなら、こっち、こっちもダメなら両方やってみる。
上手くセンタリングが出来てクリック率があがったなら、効果あったと初めて思えるんですけどね。
以上、アドセンス広告のセンタリングレポでした。
おすすめのアフィリエイト
アドセンスでもの足りないなら、すぐ始められる副業として人気のアフェリエイトに参加するのがおすすめです。大手広告や人気商品の広告数が多いアフェリエイトサイトを紹介しますので、気になる方はご覧ください。
A8.netは会員数、広告主数ともに最大規模を誇るアフィリエイトサービス。
会員登録無料・審査もなし、これを機に思い切ってアフィリエイターデビュー。これから何か新しく始めたい人や副業を考えているならぜひ！
- 有名ブランドから高額報酬がもらえる広告が掲載できる！
- PCはもちろん、スマホからも広告作成・発行が可能！
- もちろん会員登録は無料！その後も費用は一切かかりません！
お申し込みはコチラ↓
A8.net公式サイト
大手ECサイトから大手企業案件多数あり。
1,000円から振込みOK、手数料0円ですぐに結果が出る可能性も。セルフバックも充実しているので、普段購入しているものもおトクにゲットできちゃうものもあります。
- スマホで簡単！「SNS掲載用の広告作成方法」をご紹介
- Yahoo!ショッピング、楽天市場、Amazonなど大手企業も
- 成果が出やすい、稼ぎやすい広告や稼げる広告が多い
お申し込みはコチラ↓
VCアフィリエイト公式サイト
アフィリエイトの基礎知識から、継続して稼ぐための考え方、手法など、アフィリエイト運営に役立つ「ステップアップガイド」「ステップメール」などご用意。会員登録無料だから初心者の方でも、安心してアフィリエイトが始められます。
- スマホで簡単！「SNS掲載用の広告作成方法」をご紹介
- Yahoo!ショッピング、楽天市場、Amazonなど大手企業も
- 成果が出やすい、稼ぎやすい広告や稼げる広告が多い
お申し込みはコチラ↓
もしもアフィリエイト公式サイト
Googleアドセンスは稼げる？稼げない？どっち
キャリア10年以上でわかったこと、それは…
Googleアドセンスが中央に寄らない場合のやり方
デフォルトで画面いっぱいに表示されるアドセンスですが、なぜかセンタリング出来ない場合の対処法を解説します。
グーグルアドセンス広告がはみ出す時の修正方法
レスポンシブ広告が横にはみ出すために起こるスマホの横揺れを解消！
GoogleAdsense広告を速く表示する
DNSプリフェッチで５つの参照先を事前リレーションするだけで、すばやく表示されます
サーバー移行における3つのポイント
サーバーを移転したので、WEB営業に捉われないユーザー視点でポイントを紹介します。
ソースコードのハイライト表示のやり方
負担が少ない軽量ライブラリを使用して、ハイライト表示する方法を解説。
preタグをきちんと整形をする方法
レスポンシブデザインのpre要素が折り返されない、改行されない場合の対処法を解説します。はみ出しも解消されます。
縦スクロール時に横揺れするサイトの修正方法
縦クロールしたときブレたり横揺れてしまう場合のCSS対処法を解説（スマホタブレット）