端末に応じて広告サイズが切り替わるレスポンシブ・アドセンスの導入と、iPhone 向けの CSS 調整

遅ればせながら、ようやく当ブログに Google の広告配信サービスである Google アドセンスを設置しました。せっかくなので最近出たばかりの「レスポンシブ広告ユニット」を使ってみました。スマートフォンやタブレット、PC など、端末に応じて広告の大きさを柔軟に変えられるユニットです。iPhone で広告がはみ出さないようにするため、CSS の調整もしたので合わせてメモします。

レスポンシブ広告ユニットとは

レスポンシブ広告ユニットは、サイトを閲覧している端末の画面サイズによってサイトの見た目を切り替える「レスポンシブ・ウェブデザイン」の広告版といったところです。公式ヘルプでは次のように説明されています。

レスポンシブウェブデザインでは、表示されているデバイス（スクリーン）の機能に応じて、ウェブサイトの表示を動的に制御できます。レスポンシブ広告ユニットを使用すると、さまざまなデバイスで広告以外のページの要素のレイアウトを制御しながら、それに合わせて広告のサイズを制御できます。

via レスポンシブ広告ユニットを作成する – AdSense ヘルプ

レスポンシブ・ウェブデザインだと、CSS 3 のメディアクエリを使って、たとえばサイトを表示している端末のスクリーンサイズが横幅 768px 以上なら見た目をこんな風に変える、と指定していきます。

レスポンシブ広告ユニットも同様に、メディアクエリを使って広告のサイズを変化させます。PHP の条件分岐などを使わなくても済みますし、コードもシンプルになります。

レスポンシブ広告ユニットの存在は、ポンダッドさん (@pon_dad) の次の記事で知りました。

TwentyThirteen簡単カスタマイズ【レスポンシブ・アドセンス設置】

また、規約で気をつけるべきポイントやカスタマイズの方法も連載形式でまとめられていたので、すっごく参考になりました。

まずはコードを取得

コードの取得方法は通常の広告と一緒です。Google アドセンスにログインし、「広告の設定」→「新しい広告ユニット」をクリック。

名前を入力し、「広告タイプ」などを選びます。そして「広告サイズ」のところで「レスポンシブ広告ユニット（ベータ版）」を選択します。

下の方にある「保存してコードを取得」をクリックし、表示されるコードをコピーします。

広告のサイズを設定

取得したコードをテキストエディタに貼り付け、サイズの設定をします。変更するのはコードの最初に出てくる次の部分。

<style>
.my_adslot { width: 320px; height: 50px; }
@media(min-width: 500px) { .my_adslot { width: 468px; height: 60px; } }
@media(min-width: 800px) { .my_adslot { width: 728px; height: 90px; } }
</style>

デフォルトでは、広告サイズの初期値は横幅 320px、縦幅 50px で、デバイスの横幅が 500px 以上になったら広告を 468px x 60px に、800px 以上になったら 728px x 90px とするようになっていました。

自分はこんな風にしました。

<style>
.my_adslot { width: 300px; height: 250px; }
@media(min-width: 768px) { .my_adslot { width: 468px; height: 60px; } }
</style>

これだと通常（モバイル）は横幅 300px、縦幅 250px の広告が表示され、閲覧しているデバイスの画面サイズが横幅 768px 以上（タブレットや PC）の場合は広告サイズが横幅 468px、縦幅 60px に切り替わります。

サイズの設定に当たっては、ピクセル単位で指定することと、Google アドセンスでもともとサポートされている広告サイズに揃えることが必要とのことです。サイズの例は次のページで確認できます。

広告サイズに関するガイド – AdSense ヘルプ

サイトにコードを設置

続いて、このコードをサイトに設置します。今回はトップページなどは見送って、個別の記事ページの記事下にだけ入れてみました。

自分は WordPress で Twenty Twelve をベースにしたテーマを使っているので、個別の記事ページを出力する single.php に書き込みました。

まず、スタイリングをしやすいようにコード全体を <div> タグで囲みます。

<div class="ad-box">
	<style>
	.my_adslot { width: 300px; height: 250px; }
	・・・（省略）・・・
	<script>
	(adsbygoogle = window.adsbygoogle || []).push({});
	</script>
</div>

これを、single.php の次の場所に挿入します。

<?php get_template_part( 'content', get_post_format() ); ?>

<div class="ad-box">
・・・（省略）・・・
</div>

<nav class="nav-single">

WordPress のテーマに触るのが久しぶりすぎて、最初はどこに入れればいいのかすっかり勘が働かなかったのですが、Twitter で助け舟をくださったヤズさん (@816jw)、ありがとうございました。

iPhone ではみ出さないように CSS を調整

最後は CSS の調整です。iPhone で Twenty Twelve のサイトを閲覧すると、横 320px の表示領域の中で左右に 20px ずつ余白が入るので、横幅 300px の広告は収まりません。

左側の余白を 10px にすればちょうど真ん中に収まりますので、広告が入っているボックス（<div class="ad-box">）を左に 10px ずらします。

そのため、スタイルシート（style.css）に次のように書きました。

.ad-box {
	margin: -20px auto 40px;
	margin-left: -10px;
	width: 300px;
}

@media screen and (min-width: 768px) {
	.ad-box {
		margin-left: auto;
		width: 468px;
	}
}

モバイル用に margin-left: -10px; と記述し、タブレットと PC 向けのメディアクエリで margin-left: auto; に戻しています。

これまでアドセンスは表示サイズの切り替えや、きれいに配置するための CSS の工夫がおっくうで、ずっと後回しにしてきたのですが、これでようやくひと段落つきました。

レスポンシブ・アドセンスは、後から広告のサイズを変えたくなった時もすでに設置しているコードを修正するだけで済むので、メンテナンスが簡単そうです。

この記事が自分のような「おっくうタイプ」の人のお役に立てば幸いです。

Simple Living