Google™AdSense広告のレイアウトをCSSでセンタリングする方法

2013/11/16 2014/11/22

Google™AdSenseを利用する際に左詰めに表示されてしまって困ることありますよね。
そんな時にはdivタグで直接center・・・としてしまいます。
これはCSSでもちゃんと指定することができます。
CSSで指定した方が複数の広告ユニットが同じクラスで処理できるようになります。

はじめに

GoogleAdSenseの広告ユニットをセンタリングといえば、
<div align=”center”>～</div>で囲んでしまえば終了のお約束。

でも、どうもこのdivにレイアウト要素を書いてしまうところに納得がいかなかったので、
CSSで実装する方法をいろいろ試しました。

また複数の広告ユニットをまとめてレイアウトした例を以下でご紹介しています。
Google™AdSense広告ユニットのレイアウト別HTML・CSS一覧

iframe要素に対応させる

GoogleAdSenseの広告ユニットのJavaScriptが実行されると、
iframe要素やらins要素やらが展開されてきます。
内部はブロック要素ではなく、iframeのインライン要素になってしまいます。

なので、divタグにクラス指定をして、
内包する要素にセンタリングしようとしてもどうにもこうにもうまくいかない。

そこで、以下のように処理します。
※画像はSeesaaブログでの実装例です。

広告ユニットの設置

<p class=”gad”>～</p>と段落要素にクラス指定を行います。

<p class="gad">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
</script>
<!-- banner_468-60 -->
<ins class="adsbygoogle"
     style="display:inline-block;width:468px;height:60px"
     data-ad-client="ca-pub-8700000000000016"
     data-ad-slot="3500000088"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</p>

</script>

<ins class="adsbygoogle"

style="display:inline-block;width:468px;height:60px"

data-ad-client="ca-pub-8700000000000016"

data-ad-slot="3500000088"></ins>

(adsbygoogle = window.adsbygoogle || []).push({});

</script>

</p>

コンテンツの設置

ここでp要素に変更している理由として、
GoogleAdSenseのJavaScriptが実際に実行されると、
<iframe>～</iframe>として展開されて表示されます。
このiframe要素をpタグで囲むことによって、インライン要素の位置指定をしています。
実際にはｐ要素で表示しているパラグラフ(段落・文字)はありません。

CSS指定

CSSも合わせて変更します。

p.gad{
text-align:center;
}

p.gad{

text-align:center;

}

CSS指定

ブラウザ表示の確認

上記で指定したGoogleAdSenseの表示を確認します。
正しくセンタリングされて表示されるようになります。

表示されたGoogleAdSenseユニット

さいごに

なんとなくdivでいいやと<div align=”center”>～</div>でセンタリングしがちな
Google AdSenseですがデザイン要素を
HTML側に記載したくない為CSSにと思うと、意外とはまりました。

でもちょっと考えれば単純に<p>タグで十分だったというわけです。

2013/11/17追記
その後、Google+コミュニティー(アルゴリズン – Google+)にて、
yuki kojima 様よりdivによるCSS指定方法についてのご指摘を頂戴致しました。

親要素にもよりますが、概ね下記のcssで対応できるかと！

DIV.ad{
width:100%;
text-align:center;
margin:0 auto;
}

こちらでもSeesaaブログを例に設定し確認を行いました。
ご指定頂いた方法でも正しくセンタリング表示が行われました。

div指定によるCSS実装例

個人的には、divブロック要素に対して、
直接インライン要素の属性(text-align:center)を指定することが、
望ましくないものと思っていましたが、
text-alignはブロック要素内のインライン要素に対する指定で正しい使い方なのだと分かりました。
Mozillaの実際の設定例でも提示されています。
text-align – CSS | MDN

どのように実装されるかはお好みで。
ブロック要素に対しての使い方誤りの例ってalign属性でしたかね・・・。

Seesaaはシーサー株式会社の登録商標（第５０４９９６５号）であり、
Seesaaロゴはシーサー株式会社の登録商標（第５１３７４５７号）です。
Seesaaブログはシーサー株式会社のサービス名です。
Seesaaのサービスに用いられるアイコンその他のマーク等は、
シーサー株式会社の商標であり、シーサー株式会社の著作物です。

Google™はGoogle Inc. の登録商標（第４４７８９６３号及び第４９０６０１６号）です。
GoogleロゴはGoogle Inc. の国際登録商標です。
国際登録番号：８８１００６及び９２６０５２及び１０８６２９９及び１０９１９９０及び１１４５９３４
Google AdSense™,AdSense™はGoogle Inc. の登録商標（第４８９９４１２号）です。
Google Analytics™はGoogle Inc. の商標です。