Google AdSense の レスポンシブ広告ユニット を使って広告を表示していたのですけど、広い画面だと大きめな横長広告バナーがそれだけ微妙に中央表示されてしまって、本文に馴染まず目立って表示されてしまってました。

そこで少しでも記事に馴染んで邪魔にならないように 表示位置やサイズを調整してみる ことにしました。

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

ちなみに Google AdSense のレスポンシブ広告ユニットというのは、ブログの表示サイズに合わせて適切な広告を表示する仕組みです。

これを使うと、広告ユニットを作成してソースコードを一度白てしまえば、後は PC からのアクセスとかスマートフォンからのアクセスとかに合わせて 自動で広告サイズを調整 してくれるので、広告設置の負担がとても少なくなります。

ただ、完全にお任せすると表示がしっくりこない場合もあるので、ちょっと最初に手間を加えて、表示方法を指定しておくのが良さそうです。

広告の種類を指定する

レスポンシブ広告ユニットは、画面サイズに応じて表示する広告サイズを完全にお任せできるようになってますけど、もう少し種類を絞って 広告の種類 を次の３つのどれかに限定することができます。

これらのどれかを AdSense 広告コードの data-ad-format に指定します。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-nnnnnnnn"
data-ad-slot="nnnnnnnn"
data-ad-format="auto"></ins>
<script>

ちなみにここに auto を指定すると 種類が自動で選ばれる ことになるようですが、実際のところは横長バナーが指定されているのと同じ動きをしているような感じがしました。

広告の表示位置を調整する

広告の種類を調整しても、そのままだと余白が大きく取られて、その中央に広告が表示されたりしました。

敢えて本文と広告の表示位置をずらすことで広告に目が行きやすくなるという手法もあるみたいですけど、揃っていないと気が散って肝心の本文が読み難いような気がしたので、表示位置を調整してみることにします。

表示位置の調整には スタイルシート を使います。

具体的には AdSense のレスポンシブ広告コードの ins タグを、スタイルシートで味付けします。このタグにはクラスとして adsbygoogle が指定されているので、それに対してスタイルを指定できます。複数の広告コードを貼っていて、それぞれに違うスタイルを指定したい場合は、各 ins タグにクラスを追加して、それに対してスタイルを指定するのが良さそうです。

広告のサイズを指定する

最大サイズで制御する方法

広告の表示サイズを調整したい場合には、まず、横幅の最大値を max-width で指定する方法があります。

ins.adsbygoogle {
	
	max-width: 728px;
}

たとえば、広告の種類を horizontal にして、スタイルシートで max-width: 728px を指定すれば、最大でもいわゆる ビッグバナー サイズで掲載されて、余白をセンタリングされることはなくなる様子でした。

この方法は、あくまでも広告の最大サイズを指定するだけなので、それより小さい画面では融通が利かないようにも感じますけど、その場合だと画面いっぱいに広告を表示しようとするためか、案外不自由なく掲載されてくれる印象でした。

サイズ指定で広告サイズを選ぶ方法

他にも、広告の横幅を width で指定する方法もあります。

ins.adsbygoogle {
	
	width: 728px;
}

この方法だとある意味、広告の種類を決め打ちしているのと同じことになりますけど、AdSense の管理画面で選択する方法と違って、このレスポンシブ広告に幅を指定する方法の場合は 貼り付けるコードはそのまま、スタイルシートで広告サイズを制御できる ところです。

スタイルシートには media を使った メディアクエリ という仕組みがあるので、それを使って PC 向けサイトとスマートフォン向けサイトとで、表示する広告サイズを簡単に切り替えられます。

表示位置を整える

広告の表示位置を整えたい場合は、広告コードの ins タグに対して、スタイルシートで余白を margin: 0px 0px 0px 6px みたいに指定すれば大丈夫そうでした。

ins.adsbygoogle {
	
	margin: 0px 0px 0px 6px;
}

広告ユニットの標準サイズ

上記の通りで、おおよそ良い感じに広告の表示サイズを調整できるようになりました。

こんな感じで、サイズを調整するのに種類と幅と表示位置を指定することになりますけど、希望のサイズの広告を選択するために、用意されている広告ユニットの種類の横幅で指定することが大事になってくる様子です。

そこで、最後に 2016-01-02 時点で用意されている、既存の広告ユニットサイズをリストアップしておくことにします。ここから幅の目星をつけると、選びやすいかもしれません。