頑張らない!でも諦めない!必死にならずにええかげん

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

      2014/11/22

Google or AdMax Promotion(it)

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>と段落要素にクラス指定を行います。

05_コンテンツの設置2

コンテンツの設置

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

CSS指定

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

06_CSS指定2

CSS指定

ブラウザ表示の確認

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

07_表示されたGoogleAdSenseユニット2

表示されたGoogleAdSenseユニット

プロモーション(btm)

Google or AdMax Promotion (it)

さいごに

なんとなく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ブログを例に設定し確認を行いました。
ご指定頂いた方法でも正しくセンタリング表示が行われました。

08_div指定によるCSS実装例

div指定によるCSS実装例

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

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


Seesaaはシーサー株式会社の登録商標(第5049965号)であり、
Seesaaロゴはシーサー株式会社の登録商標(第5137457号)です。
Seesaaブログはシーサー株式会社のサービス名です。
Seesaaのサービスに用いられるアイコンその他のマーク等は、
シーサー株式会社の商標であり、シーサー株式会社の著作物です。

Google™はGoogle Inc. の登録商標(第4478963号及び第4906016号)です。
GoogleロゴはGoogle Inc. の国際登録商標です。
国際登録番号:881006及び926052及び1086299及び1091990及び1145934
Google AdSense™,AdSense™はGoogle Inc. の登録商標(第4899412号)です。
Google Analytics™はGoogle Inc. の商標です。

*本ページ内に記載されされた各社ブランド、サービス名、商標、登録商標については、
各社ブランドのロゴや商標等に関する帰属についてをご確認ください


最後までお読みいただきありがとうございました。
アルゴリズン


役に立ったと思っていただけたら、以下からシェア頂けたら幸いです^^

QRコードからもこのURLを開けます。

Pitta Promotion

アイキャッチ画像に利用させて頂いております、各社ブランドのロゴやシンボルに関しては、
各社ブランドのロゴや商標等に関する帰属についてをご確認頂けますようお願い致します。
ロゴの使用等に関する苦情・ご意見等がございましたら管理者までご連絡ください。

AdMax Promotion

カテゴリ
すべて展開 | すべて省略

Rakuten Promotion

 - AdSense, CSS ,

  関連記事