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

Google™AdSense広告ユニットのレイアウト別HTML・CSS一覧

      2014/11/22

Google or AdMax Promotion(it)

Google™AdSenseのセンタリングなどを行う方法は、
知っている人はおそらく簡単にやってしまう。
でも、知らないと難しいわけで、念の為ご紹介しておきます。
今回は複数を配置する場合を例にご紹介しておきます。

はじめに

以前、Google™AdSenseのセンタリング方法について、
Google+に投稿させて頂いた際に、
他の方よりいろんなアプローチのお話を頂きまして、
そっかーみんなおのおの考えてやってるんだなと再認識しました。

アルゴリズン – Google+ – Google™AdSenseを利用する際に…

そんな時に、以下のようなご意見。

応用すると2つ並べたりできますよね。

確かに、やろうと思ったことはなかったのでやったことはない。

できそうだけど、難しいのか、簡単なのかもわからない。
そんなわけで、一通り試してみましたのでご参考まで。

ポリシーの確認のお願い

広告のレイアウトを行っていくにあたって、まずはポリシーをご確認ください。
広告のプレースメントポリシーを遵守したうえでレイアウトの調整を行う必要があります。

レイアウトにおいて、関係する可能性のある条項について、
以下でリンク抜粋していますので、各自レイアウトを行う際には、
細心の注意を払ったうえで、自己責任にて設定を行ってください。

広告のプレースメントに関するポリシー – AdSense ヘルプ

(以下抜粋)
画像と広告の並列配置
誤解を招く見出しの下での広告配置
スクロールしなければ見えない位置にコンテンツを押しやるサイト レイアウト

1 ページに配置可能な Google コンテンツ広告の最大数
1 ページに配置可能な Google リンク ユニットの最大数

  • 画像と近接配置しない。
  • 見出しをつける場合は、広告であることがわかる文言を利用する
  • ページの上部(スクロールしない領域)に広告しか表示されないレイアウトは不可
  • 広告の個数はコンテンツ広告で3個まで。
  • リンクユニットで2個まで、検索ユニットも2個まで。

併せてマージンにも注意

個別にご確認いただきたいものとして、
広告の周囲に十分な余白を開けるように心がけましょう。

十分な余白とは?明確に提示がされているようではないのですが、
40 pxが妥当との話もあるようですが、私は個人的に20pxを目安にしています。

CSS指定センタリングを行う場合で、
上下にコンテンツが存在し十分な余白が必要な場合には、
以下のように左右のマージンのみ0指定を行い、
上下には40pxなどの指定を行えばセンター配置になります。

CSS

24_上下マージン確保例

上下マージン確保例

表示確認のインプレッション発生に注意

こうしたレイアウトの確認を行う際には、
ブラウザで何度も表示して確認をすることになります。

既に導入し運用している広告ユニットで表示確認をしてしまうと、
無効インプレッションを自分で発生させ、ポリシー違反になってしまいます。

こうしたレイアウトの確認には、しっかりとした環境で確認しましょう。
以下で、ご紹介しています。
Google™AdSenseを自サイトに貼った際の自己PV除外と運用

新規ユニットで代用も

ちょっとずるい方法としては、新規に作成したほやほやの広告ユニットで、
レイアウト調整をおこなうことで、

2013/11/21追記訂正
一定の表示回数に到達するまでは、広告の配信が行われません。ないはずですが、
既に運用している登録済みサイトの場合にはすぐに配信されてしまう場合もあるようで、
私の場合、同一ドメインのディレクトリ違いの環境(AdSense未登録)の場合、
一定回数は広告の配信が行われませんでした。
これはrobots.txtにてアクセスを禁止している点もあるかもしれません。
ご参考まで。

PV数の少ない別の環境があるようであれば、
そうした新規ユニットで確認されるのも一つの方法かと思います。

以下の投稿では、Chrome,Firefox,Opera,Safari,IEと確認していますが、
インプレッションの発生を抑えられない環境での確認はこうした新規ユニットで確認を行いました。

環境

  • windows: windows 7 Ultimate(64bit)
  • Chrome: 31.0.1650.57 m
  • Firefox: 25.0.1
  • Opera: 18.0.1284.49
  • Safari: 5.1.7(7534.57.2)
  • IE: 10.0.9200.16736

レイアウトイメージとパターン

以下のイメージはレイアウトとして重複するものもありますが、
位置合わせの方法が複数考えられる場合の例示です。
お好みに合わせた実装方法をお選び頂けたらと思います。

ただ、実際にはこうした広告ユニットを固めて配置することは少ないと思いますが、
他の既存divブロックとの関係など、レイアウトを行う上での参考になればと思います。

広告を固めた場合には、当然1ページ内の専有面積が増え、
スクロールしなければコンテンツが表示されないリスクが増えます。

コンテンツを押しやるような配置にならないようご留意ください。

※図をクリックすると設定詳細へスクロールします。

23_表題 01_3連レイアウト 03_<div align="center">3連レイアウト
05_<center>タグ3連レイアウト 15_3連<div class>レイアウト・CSSセンター 07_<div class>3連レイアウト・CSSなし
09_<div class>3連レイアウト・CSSセンター 11_<div class>3連レイアウト・CSS左寄回込み 13_<div class>3連レイアウト・CSS右寄回込み
17_3連<div class>レイアウト・CSS縦左寄回込み 19_3連<div class>レイアウト・CSS縦右寄回込み 21_<div class>段違レイアウト・CSSセンター

記述コードの例説明

以下で示すコードに示す[AD1][AD2][AD3]などの記号は、
以下のようなGoogleAdSenseから提供されるスクリプトコードブロックの1つを示します。

スクリプトコードブロックを挿入する上で、
その周囲をどのようなタグで囲み表示するかを例で示します。

コードを読まれる際には[AD1][AD2][AD3]の位置には、
以下のようなスクリプトコードが挿入されるとして読み替えてください。

HTML/JavaScript

スクリプトコード3連続記述

スクリプトコードをそのまま貼り付けた例

HTML/JavaScript

横に3つ並び、左寄せ配置になります。

02_3連レイアウト(pv)

レイアウト一覧へ 戻る

スクリプトコード<div align=”center”>レイアウト3連続記述

よく見る<div>タグに対するセンタリング指定例

この<div align=”center”>によるセンタリングはHTML内に
レイアウト要素を含まない形の設計思想ではおそらく利用されないようになっているでしょう。

昨今の主流な方法ではなくなっているものの、
手軽に実装できて便利な方法ではないかと思います。

HTML/JavaScript

スクリプトコードが並び、センタリングされます。

04_3連レイアウト(pv)

レイアウト一覧へ 戻る

スクリプトコード<center>タグレイアウト3連続記述

私はこのセンタリング方法は正直知りませんでした(汗)
とはいえ、これも<div align=”center”>同様にHTML内に
デザイン要素を記述する形になりますので、あまりお勧めはできないかもしれません。

また<center>タグに関しては、以下のようにHTML5で廃止となっています。
今後、リリースされる新しいシステムでは採用されない方が無難かと思います。

center 要素 – HTML | MDN

HTML のセンター要素 (<center>)はブロックレベルの要素で段落や他のブロックレベルの要素やインライン要素を含むことができます。含んでいる要素の中の全体のコンテンツを水平方向にセンタリングします 。このタグは HTML 4 (及び XHTML)で非推奨要素に指定され、HTML5 で完全に廃止されています。代替として CSS の text-align プロパティを用い、この属性値に centerを指定する事で同じ表現を実現可能です(※その際、対象とする要素のスタイルは display: block 等になっていなくてはなりません。インライン要素はテキストの中央寄せは出来ません)

とはいえ、各社ブラウザでは現状は正しくセンタリングは行えました。

HTML/JavaScript

06_タグ3連レイアウト(pv)

レイアウト一覧へ 戻る

以下、CSSレイアウト指定を併用します。

横3連センタリング指定

センター揃え

<div class=”gad”>[AD1][AD2][Ad3]</div>形式でまとめて囲みます。

HTML/JavaScript

CSS

16_3連レイアウト・CSSセンター(pv)

スクリプトコードレイアウト3連続記述

HTML/JavaScript

CSS指定なし

CSS

08_3連レイアウト・CSSなし(pv)

レイアウト一覧へ 戻る

CSSセンター揃え

CSSによってdivブロックに対してセンタリングする方法です。
CSS

10_3連レイアウト・CSSセンター(pv)

レイアウト一覧へ 戻る

CSSテキスト回り込み指定(左寄せ)

あまり利用するケースはないかもしれませんが。
3個配置はないにしても、1個配置で回り込みのパターンは、
クリック率が高かったという話も聞きます。

CSS

12_3連レイアウト・CSS左寄回込み(pv)

レイアウト一覧へ 戻る

CSSテキスト回り込み指定(右寄せ)

あまり利用するケースはないかもしれませんが。
3個配置はないにしても、1個配置で回り込みのパターンは、
クリック率が高かったという話も聞きます。

CSS

14_3連レイアウト・CSS右寄回込み(pv)

レイアウト一覧へ 戻る

縦3連回り込み指定

こんなことするかどうか別としてですが。
HTML/JavaScript

左寄せ指定

CSS

18_3連<div class>レイアウト・CSS縦左寄回込み(pv)

レイアウト一覧へ 戻る

右寄せ指定

CSS

20_3連<div class>レイアウト・CSS縦右寄回込み(pv)

レイアウト一覧へ 戻る

とは言え、こんなレイアウトはあまり利用しないでしょう。
現実的なのはこんな感じかと。

上部に配置した広告ユニットは、実際にはリンクユニットのようなものを配置し、
下部に広告ユニットを1つまたは複数配置するというイメージでしょうか。

センター揃えサイズ違い

<div class=”gad”>[AD1]</div>
<div class=”gad”>[AD2][Ad3]</div>形式でまとめて囲みます。
HTML/JavaScript

22_<div class>段違レイアウト・CSSセンター(pv)

レイアウト一覧へ 戻る

プロモーション(btm)

Google or AdMax Promotion (it)

さいごに

いろいろとレイアウトの調整は<div>タグを利用すると自在に調整ができます。

もし、<div>の利用でうまくいかないような場合には、
<p>タグによって指定する方法を試すのも一つかもしれません。

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

おそらく大半の人は何も考えずに、さくっと終わらせてしまう内容かと思います。
しかし、コミュニティーの中ではこうしたことでも、
お役にたてる場合もあるのだなとしみじみ感じます。

お互いに切磋琢磨して知識を深めていけたらと思います。


Google™はGoogle Inc. の登録商標(第4478963号及び第4906016号)です。
GoogleロゴはGoogle Inc. の国際登録商標です。
国際登録番号:881006及び926052及び1086299及び1091990及び1145934
Google AdSense™,AdSense™はGoogle Inc. の登録商標(第4899412号)です。
Google Analytics™はGoogle Inc. の商標です。
Google Chrome™ ブラウザはGoogle Inc. の登録商標です。
登録番号は商願2011-80184号および、商願2011-80187号です。
Google Chrome™およびロゴはGoogle Inc. の国際登録商標です。
国際登録番号:773982

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


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


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

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

Pitta Promotion

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

AdMax Promotion

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

Rakuten Promotion

 - AdSense , ,

  関連記事