アドセンスのレスポンシブ広告の設定方法

グーグルアドセンスでレスポンシブ広告の設定方法を
紹介いたします。

アドセンスよりレスポンシブコードを取得して
そのまま貼り付けてもいいのですが、
レスポンシブコードに関しては必要なコードの改変が
認められているので、理想的な広告が出るように
改変しちゃいましょう。
※他のコードは改変は規約で禁止されていますので、
しないように!!

コードを付け加える

コードを付け加えることによって
スマホで見られた場合にちょうど良い大きさになったり
タブレットで見られた場合、PCで見られた場合に
ちょうど良い大きさで広告が出るように
設定することができます。

レスポンシブコードを取得したら、
そのコードの上に下記のコードを付け加えるだけで
理想的な大きさの広告が表示されるようになります。

<style>
.my_adslot { width: 300px; height: 250px; }
@media(min-width: 340px) { .my_adslot { width: 336px; height: 280px; } }
@media(min-width: 730px) { .my_adslot { width: 728px; height: 90px; } }
</style>

これを、取得したコードの上に付け加えるだけです。
これは、通常は300px×250pxの広告(レクタングル中)で
表示するんだけど、
340px以上の端末で見られた場合は、
336px×280px(レクタングル大)で表示、
730px以上の端末で見られた場合、
728px×90px(ビッグバナー)で表示しますよ
という設定になります。

が、実際は、730px以上の端末で見られた場合、
レクタングル大やビッグバナーよりも縦が長い広告が
表示されたり、その時によって異なるようです。

コードの”AUTO”の部分を改変する

レスポンシブコードの中に”AUTO”と書かれているところが
あるかと思いますが、これは広告のサイズは自動で選択する
ということを意味しています。

ですので、ここを改変し自分好みの広告が表示されるように
設定してあげると、変なサイズの広告がでなくなります。

image

広告をレクタングルに設定するのか?
縦長に設定するのか?横長に設定するのか?
その場所によって設定したい大きさは異なるかと思います。

たとえば、記事タイトル上に設定したい場合は、
横長広告にする必要があったり、
サイドバーに表示したい場合は、縦長に設定したい
など表示したい広告は異なりますよね?

その場合、
”auto”ではなく

  • レクタングル ⇒ rectangle
  • 縦長 ⇒ vertical
  • 横長 ⇒ horizontal

と設定することによって
出したい広告タイプを選ぶことができます。

なお、
”rectangle, horizontal”というようにカンマで区切ると
レクタングルと横長の広告が表示されるようになるなど、
好みに合わせて設定が変更できます。

moreタグ下や記事の途中に設定する場合

moreタグ下や記事の途中にアドセンス広告を設定するときは
おそらくプラグインを用いて設定すると思いますが、
レスポンシブ広告の場合、うまく表示されない
という声を結構聞きます。

今までの広告だと、非同期ではなく同期でコードを取得して
貼り付けることでうまく表示させることができていたのですが、
レスポンシブ広告の場合は、同期も非同期もありません。

なぜ表示が崩れるのか?

まず設定方法の前になぜ表示が崩れてしまうのか?
について説明します。

これは、非同期広告の時もそうだったのですが、
そのまま貼り付けてしまうと
勝手に行が変わるところに<br />タグが挿入されることが
問題だったのです。

犯人は<br />・・・・。勝手に入ってしまい
崩れてたんですね。

image

なので、勝手に入る<br />タグを何とかしなければいけません。
一応勝手に挿入される<br />を挿入されないようにする
プラグインがあるのですが、それだとうまくいかなかったので、
ここでは、改行をなくして1列になるようにタグを改変していきます。

すると、こんな感じになります。

image

なお、上部に付け加えるコードは何もいじらなくていいです。
※取得したレスポンシブコードのみ改行をなくす

ここで注意が必要なのは、
<ins class=”adsbygoogle”
style=”display:block”
などの改行をなくす際に半角スペースまで消さないということです。
なので、わかりやすく書くとこのようになります。

<ins class=”adsbygoogle” style=”display:block”

こんな感じですね。
”adsbygoogle”とstyle=”の間に半角スペースが入っています。
これを<insの中すべてに施します。

<ins class=”adsbygoogle” style=”display:block” data-ad-client=”ca-pub-**************” data-ad-slot=”********” data-ad-format=”auto”></ins>

こんな感じになります。
わかりにくいですが、改行をなくした部分すべてに半角スペースが
入っています。
半角スペースを入れるところはこの部分だけで、
あとは、そのまま詰めていったらOKです。

これを、プラグインの設定時にコードをペーストすれば
うまく表示されるかと思います。

なお、この改変について規約に抵触しないか
アドセンスチームに問い合わせたところ
広告は表示されているので、問題ありません
というコメントを頂いたので、アドセンスお墨付きです。

お問い合わせはこちら

お名前 (必須)

メールアドレス (必須)

題名

メッセージ本文

 確認ページはございません。内容をご確認の上チェックを入れてください。

コメントを残す




6 − 二 =

CAPTCHA