ブログ広告の代名詞といってもいいくらいメジャーなGoogleアドセンス。

最近は、ほとんどがレスポンシブコード広告が多いと思いますが、意図していないサイズの広告が表示されてしまい、はみ出るケースに度々遭遇します。今回は、この広告のカスタマイズ方法紹介します。

よく見かけるカスタマイズ方法

ウェブサイト自体がレスポンシブ化しているため、アドセンスも同様にレスポンシブタイプの広告が推奨されるのは、必然かと思います。それに、広告コードを固定サイズにすると、表示したいサイズだけ広告コードを管理しないといけないですしね。

まず、何もカスタマイズしない状態のレスポンシブコードは、次のような形式です。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- unit_name -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-*****"
data-ad-slot="*****"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

 

上記コードの中で、

data-ad-client="ca-pub-*****"data-ad-slot="*****"

この部分は、自分の広告コードの数字を入れてください。

そして、キモとなるのが、

data-ad-format="auto"

この autoの部分を変更することで、サイズを指定することができるようになります。
指定の方法は以下のとおりです。

レクタングル

data-ad-format="rectangle"

いわゆる四角形タイプ。スマホの広告やサイドバーではよく見かけます。

横長

data-ad-format="horizontal"

 

縦長

data-ad-format="vertical"

たったこれだけ!!
自分が表示させたいレイアウトに合わせてコードを置き換えればオーケーです。

サイズを指定してぴったり合わせる方法

この広告は、横幅○○px 縦は〇〇pxじゃないと!
そういう場合のカスタマイズは次のような形になります。

<style>
.ex_responsive_1 { width: 300px; height: 250px; }
@media(min-width: 500px) { .ex_responsive_1 { width: 468px; height: 60px; } }
@media(min-width: 800px) { .ex_responsive_1 { width: 728px; height: 90px; } } 
</style>
<script async
src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- ex_responsive_1 -->
<ins class="adsbygoogle ex_responsive_1"
style="display:inline-block"
data-ad-client="ca-pub-XXXXXXX11XXX9"
data-ad-slot="8XXXXX1"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
data-ad-client="ca-pub-*****"
data-ad-slot="*****"

先程と同様にの部分は、自分の広告コードの数字を入れてください。
また、.ex_responsive_1の部分は、広告作成時につけたユニット名となります。

ポイントは、上部に記載の <style>〜</style> の間に記載されるCSS。

上記の場合、
画面のサイズ(横幅)によって、
・〜500px     → 300px ×250px
・500px 〜 800px → 468px ×60px
・800px 〜    → 728px × 90px

このようなサイズ指定となっています。

指定するサイズは、アドセンス広告のデフォルトサイズである必要はなく、任意で指定可能です。自分のサイトのレイアウトに合わせた指定が可能です。

まとめ

レスポンシブ広告のサイズについてカスタマイズする方法を紹介しました。
デフォルトのままで問題のないケースもありますが、表示が崩れてしまった場合など、一度紹介した方法試してみてください。

なお、今回紹介したカスタマイズは、公式ページにも載っている内容となります。
自分でも一度目を通しておくことをオススメします。