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

2013/11/21 2014/11/22

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

はじめに

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

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

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

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

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

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

ポリシーの確認のお願い

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

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

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

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

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

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

併せてマージンにも注意

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

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

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

CSS

div.gad {
	width: 100%;
	margin: 40px 0 40px auto;
}

div.gad {

width: 100%;

margin: 40px 0 40px auto;

}

上下マージン確保例

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

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

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

こうしたレイアウトの確認には、しっかりとした環境で確認しましょう。
以下で、ご紹介しています。
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ブロックとの関係など、レイアウトを行う上での参考になればと思います。

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

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

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

記述コードの例説明

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

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

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

HTML/JavaScript

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

<ins class="adsbygoogle"

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

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

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

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

</script>

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

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

HTML/JavaScript

[AD1]
[AD2]
[AD3]

[AD1]

[AD2]

[AD3]

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

レイアウト一覧へ戻る

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

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

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

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

HTML/JavaScript

<div align="center">
[AD1]
[AD3]
[AD3]
</div>

[AD1]

[AD3]

</div>

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

レイアウト一覧へ戻る

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

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

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

center 要素 – HTML | MDN

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

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

HTML/JavaScript

<center>
[AD1]
[AD3]
[AD3]
</center>

[AD1]

[AD3]

</center>

レイアウト一覧へ戻る

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

横３連センタリング指定

センター揃え

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

HTML/JavaScript

<div class="gad">
[AD1]
[AD2]
[AD3]
</div>

[AD1]

[AD2]

[AD3]

</div>

CSS

div.gad {
	width: 100%;
	text-align: center;
	margin: 0 auto;
}

div.gad {

width: 100%;

text-align: center;

margin: 0 auto;

}

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

HTML/JavaScript

<div class="gad">
[AD1]
</div>
<div class="gad">
[AD2]
</div>
<div class="gad">
[AD3]
</div>

[AD1]

</div>

[AD2]

</div>

[AD3]

</div>

CSS指定なし

CSS

CSS定義なし

CSS定義なし

レイアウト一覧へ戻る

CSSセンター揃え

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

div.gad {
	width: 100%;
	margin: 0 auto;
	text-align: center;
}

div.gad {

width: 100%;

margin: 0 auto;

text-align: center;

}

レイアウト一覧へ戻る

CSSテキスト回り込み指定（左寄せ）

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

CSS

div.gad {
	float: left;
}

div.gad {

float: left;

}

レイアウト一覧へ戻る

CSSテキスト回り込み指定（右寄せ）

CSS

div.gad {
	float: right;
}

div.gad {

float: right;

}

レイアウト一覧へ戻る

縦３連回り込み指定

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

<div class="gad_unit">
    <div class="gad">
    [AD1]
    </div>
    <div class="gad">
    [AD2]
    </div>
    <div class="gad">
    [AD3]
    </div>
</div>

[AD1]

</div>

[AD2]

</div>

[AD3]

</div>

左寄せ指定

CSS

div.gad_units {
	float: left;
}

div.gad_units {

float: left;

}

レイアウト一覧へ戻る

右寄せ指定

CSS

div.gad_units {
	float: right;
}

div.gad_units {

float: right;

}

レイアウト一覧へ戻る

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

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

センター揃えサイズ違い

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

<div>
    [AD1]
</div>
<div>
    [AD2]
    [AD3]
</div>

<div>

[AD1]

</div>

<div>

[AD2]

[AD3]

</div>

レイアウト一覧へ戻る

さいごに

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

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

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

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

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

Google™はGoogle Inc. の登録商標（第４４７８９６３号及び第４９０６０１６号）です。
GoogleロゴはGoogle Inc. の国際登録商標です。
国際登録番号：８８１００６及び９２６０５２及び１０８６２９９及び１０９１９９０及び１１４５９３４
Google AdSense™,AdSense™はGoogle Inc. の登録商標（第４８９９４１２号）です。
Google Analytics™はGoogle Inc. の商標です。
Google Chrome™ ブラウザはGoogle Inc. の登録商標です。
登録番号は商願２０１１－８０１８４号および、商願２０１１－８０１８７号です。
Google Chrome™およびロゴはGoogle Inc. の国際登録商標です。
国際登録番号：７７３９８２