AdSenseには、レスポンシブ広告ユニットというものがあります。
アドセンスいわく、このレスポンシブ広告は、利用可能なスペースに合わせて、サイズを自動的に調節して表示してくれるとのこと。
この広告の存在を知ったとき、「これはいいな」と少し使ってはみたものの、パソコンなどでは、思ったような広告サイズが表示されず、すぐに利用を止めてしまいました。
ただ先日、ちょっとスタイルシートをいじれば、ある程度思い通りの広告サイズを表示できることに気づきました。
なので、以下ではレスポンシブ広告ユニットにおいて、「パソコンではレクタングル大広告」を「モバイルではレクタングル中広告」が、なるべく表示される簡単な設定方法を紹介したいと思います。
目次
レスポンシブ広告ユニットの難点
レスポンシブデザインサイトにおいて、レスポンシブ広告は、スマホの場合だと、「レクタングル中」広告や「レクタングル大」広告が表示され、ある程度意図通りに表示されます。
しかし、ある程度横幅のあるパソコンやタブレットで見たときは、バナー系の広告が表示されてしまいます。
画面幅の広い端末でのレスポンシブ広告表示
例えば、この本文カラム部分(横幅680px)にレスポンシブ広告タグを貼り付けたとすると、ほぼ以下のような468×60のバナー広告が表示されてしまいます。
その他のサイズの広告が表示されることも稀にありますが、ほとんどの場合こういった横幅の長い広告が表示されてしまいます。
パソコンなどで実際に表示させたいサイズ
ただ、出来るならば、どこに表示させても、ある程度のパフォーマンスを出す336×280のレクタングル(大)広告を表示させたいところです。
他のサイトで2日間ほどレスポンシブ広告コードを貼って実験したのですが、ある程度、横幅に余裕のある箇所にコードをそのまま貼り付けると、レクタングル広告が表示されることは一度もありませんでした。(※僕が見れなかっただけかもしれませんが)
これを今回は、横幅のあるところに貼り付けても、「レクタングル(大)」広告が表示されるような設定にしたいと思います。
レスポンシブ広告でレクタングル(大)を出す方法
上の方にも書きましたが、パソコンで表示させたときのように画面やカラムの横幅に余裕があると、レスポンシブ広告は「横長のバナー系の広告」を表示させてしまいます。
なので、「横幅(カラム)が広いのが原因なら、狭くしてやればいいんじゃないか?」と考え、試してみたら「レクタングル(大)」広告が表示されるようになりました。
パソコンでレクタングル(大)を出すスタイル設定方法
通常広告を貼るときは、以下のように広告タグをそのまま貼ると思います。(ラベルに関しては今回は割愛)
<!-- レスポンシブ広告ユニットタグ -->
ただ、今回はレスポンシブ広告表示領域の幅を狭くするために以下のようにタグを加えて貼り付けます。
<div class="responsive-unit"> <!-- レスポンシブ広告ユニットタグ --> </div>
この、.responsive-unitクラス要素に対して、以下のようにスタイルを指定してやります。
.responsive-unit{ max-width: 336px; }
このように、横幅の上限を336pxに絞ってやることで、ほぼ「レクタングル(大)」広告が出るように誘導することができます。
アドセンスが生成する広告コード自体のinsタグにクラスを追加しても同様のことを主なことができます。ただ、今回は無駄なコードを省いてわかりやすく書くために、上記のように書きました。
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- レスポンシブ広告 --> <ins class="adsbygoogle responsive-unit" style="display:block" data-ad-client="ca-pub-XXXXXXXXXX" data-ad-slot="XXXXXXXXXX" data-ad-format="auto"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>
どちらの書き方でも良いと思います。
実際はこんな感じで表示されると思います。
「スマホではどうなるんだ?」と思われるかもしれませんが、iPhone3のような横幅320pxの画面幅で表示させた場合は、336px幅の「レクタングル(大)」の表示できないので、「レクタングル(中)」がちゃんと表示されます。
画面幅が336px以上の広いスマホ端末で表示させると「レクタングル(大)」が表示され、横幅が300pxよりも狭い表示領域しかない場合は、それよりも「レクタングル(中)」よりも小さな広告が表示されます。
広告の形を直接指定したい場合は、以下の記事が参考になると思います。
大きさのイメージなどは、の広告サイズサンプルなどを参照してみてください。
広告を中央表示する場合
レスポンシブ広告を、カラムの真ん中、つまり中央表示させたい場合は、先程のスタイルシートに加えて、左右のマージンをオートに設定するだけです。
.responsive-unit{ max-width: 336px; margin-left: auto; margin-right: auto; }
やり方は、いろいろあるのかもしれませんが、僕の場合は、こんな感じで中央表示させました。
詳しくサイズを設定する
今回は、主に「レクタングル(大)」と「レクタングル(中)」をなるべく表示させる単純な例を書きましたが、メディアクエリなどを利用して詳細に表示をカスタマイズすることもできるようです。
詳しい設定方法などは、以下の記事を参照してください。
単に、「レクタングル(大)」と「レクタングル(中)」をメインに使うだけならば、今回紹介した方法で良いかもしれません。
まとめ
こんな感じで、レスポンシブ広告だったとしても、ある程度表示させる広告を意図通りに表示させることができます。
ということで、「レスポンシブ広告ユニットで、レクタングル広告をメインに使いたい」なんて場合には、それなりに手軽で良いかもしれません。
この設定を行ったからといって、必ずパフォーマンスが良くなるとは限りません。
simplicity使わせてもらっています。
この記事を参考にレスポンシブ広告をレクタングルで表示することができました。
ありがとうございました。
一点、広告をセンターに持っていくCSSをコピペしてもうまく動作しなかったのでなんでかな?と思ったら「margin-rigfht: auto;」になっていました。
単なるタイプミスだと思いますが、念のためレポートしました。