［Googleアドセンス］レスポンシブのサイズカスタマイズとはみ出るなどの対処法

夏といえば祭り！ってことで、各地で開催されていてウキウキ気分。

大阪でも先日に杭全祭りがあって、7月には天神祭のビッグイベントも控えている！

そして、今日14日は僕の会社があるアメ村でも神輿でワッショイ！っやってました。何のイベントだったんだろ？大人も子供も神輿担いでアメ村内をまわっていたな〜。

そんな掛け声をバックミュージックにしながら、今日はGoogleアドセンスのレスポンシブコード広告。この広告のカスタマイズ方法とはみ出るなどの対処法を書こうと思います！

レスポンシブとは？

今更だけどレスポンシブは、ブラウザやデバイスのサイズに合わせて幅などの調整をしてくれる素晴らしい仕組み。

この形でサイトを制作すればパソコン用、スマホ用、タブレット用など、複数のパターンを制作しなくてもほとんどCSSでケリがつく。

そんなありがたい仕組みがGoogleアドセンスの広告にも存在する。これがレスポンシブサイズ。

しかしながらこのコード。幅や広告サイズの調整を自動でやってくれるのは嬉しいんだけど、スマホの場合だとたま〜に広告がはみ出てしまったり、左右の余白以上に広告が画面横幅いっぱい表示されたり。

嬉しい半面、うわ〜なにこれ？こんなはずでは？みんなはどうやって対処してるの？って人もいるはず！

CSSで左右の余白を調整しても効かないパターンもあり、お手上げ状態で放置しているサイトもチラホラ。でもそれではもったいない。

せっかく広告を掲載するのに、適切な方法、そしてなるべくならクリックされやすく、ユーザーの邪魔にならないように創意工夫をして、広告効果を検証するのがベストと思うわけです。

そこで今日はそのレスポンシブコードのカスタマイズやサイズ調整について。

よくあるパターンのカスタマイズ解決方法

レスポンシブのメリットは1つのテーマで全てのデバイスをまかなえる所。アドセンスでも同じ仕様にしたい！なるべくなら管理する広告コードの数も増やしたくない！っていうのがあると思う。

だからレスポンシブ広告は推奨されているわけでもあり、オススメできるので是非活用しよう！

横幅いっぱい（泣）余白がない…

このパターンは広告コードにCSSを追記で解決する方法もあるんですが、大抵この場合は以下の方法で解決！

まず、通常のレスポンシブコードが、

<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

この部分を変更すると解決する場合が多い。

Googleアドセンス公式にも記載があるんだけど、自分のイメージした形と違う形の広告が掲載されてしまった場合、以下の方法でサイズを指定することができるとある。

レクタングル

data-ad-format="rectangle"

横長

data-ad-format="horizontal"

縦長

data-ad-format="vertical"

これだけでオッケー。

自分が表示させたいレイアウトを選んでそのコードに置き換えれば完了。

画面の幅ごとに広告ユニットをピッタリサイズで指定したい！

俺＆私の求めるサイズは横幅◯◯pxで縦は◯◯px！

それ以外は一切認めない！そういう場合のカスタマイズがこちら。

<style>
.unit_name { width: 300px; height: 250px; }
@media(min-width: 500px) { .unit_name { width: 468px; height: 60px; } }
@media(min-width: 800px) { .unit_name { width: 728px; height: 90px; } }　
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- unit_name -->
<ins class="adsbygoogle unit_name"
     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="*****"

ここは自分の広告コードの数字を入れる。

この様な形でcss調整を入れる。

黄色の部分は、自分がレスポンシブサイズの広告コードを作成した際につけたユニットネームに入れ替える場所。

上記の例だと、

画面横幅のサイズが

こんな感じでサイズをピンポイントで指定できる。

指定するサイズはアドセンスの広告サイズのデフォルトにないサイズでも全然可能なので、

例えば、

800px〜 → 750 x 200

とか、こんな自分の好きな＆サイトのレイアウトに合わせたサイズ指定も可能。

僕のこのサイトだと、カテゴリページの下部にあるアドセンスが自分好みのサイズに指定している例。

こんな感じで自分のサイトに合わせたレイアウト、サイズを展開できる。

まとめ

レスポンシブ広告のサイズ表示で問題を抱えているパターンは、今回の方法で大抵は解決できるはず。

今回のカスタマイズはもちろんGoogleがオッケーしている正規の方法なので、アドセンスのヘルプページもチェックしながら広告の最適化ができれば最高！

様々な最適化があるので、作成して貼るだけではなく、アドセンス管理画面の最適化ページをチェックしながらいざ実施！この流れで自分のブログをより良いものに変えていきましょう！

今回のカスタマイズの詳細は公式ページでも記載があるのでよくチェックしてから実施を!

CHECK管理人サイト YUICHI FUKUDA.COM