節約投資のススメ

【続-AdSense】レスポンシブ広告ユニットをCSSを使って正確なサイズに指定する手順・方法


この記事を読むのに必要な時間の目安: 11分ぐらい

Google AdSense成功の法則

先日、久々にレスポンシブ広告ユニットを作成する機会が有ったのですが、僕が以前書いた「レスポンシブ広告ユニットの作成方法」とは、ちょっとやり方が変わっているようでしたので、今日はその補足記事です。(やり方が変わっていたと言っても、コードへ行う改変は同じです。)

以前の記事と読み比べながら見て貰うと、分かりやすいと思います。

レスポンシブ広告を使ってPCとスマホで別サイズの広告を出す!

スポンサーリンク

現在(2015年4月時点)と以前で何が変わったか?

以前(2014年12月の時点)では、レスポンシブ広告ユニットの広告コードを作成すると、以下の様な画面になりました。

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

上記画面のように「スマートサイズ」「アドバンス」の2つから、コードを選択できたのです。しかし、現在(2015年4月現在)レスポンシブ広告ユニットを作成しようとすると、下記のようになります。

新しいレスポンシブ広告

違いが分かるでしょうか?

現時点ではレスポンシブ広告を作った時に「スマートサイズ」と「アドバンス」の選択が出来ないようになっています。この時、生成される広告コードがこちら。

<script async src="//pagead2.googlesyndication.com/pagead/
js/adsbygoogle.js"></script>
<!– 節約テストぅ –>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

ちょっと、僕覚えていないんですけど、以前の「スマートサイズ」のコードがコレなのかしら?

僕が以前見せたやつとは全然違いますね。あまり良く分かっていない人なら別にこのまま掲載しても良いと思いますけど、いかんせんこのコードをそのまま挿入すると、PC表示の時は「ビッグバナー(728 x 90)」、スマホ表示の時は「ラージ モバイル バナー(320 x 100)」が優先的に表示されるようで、なかなか収益の最大化は図れません。

特にスマホ表示の時に「レクタングル大(336×280」では無く、「ラージモバイルバナー」を出されると、広告の視認性がかなり落ちてしまうので収益的には半分以下になるんじゃないでしょうか。

では、どうしたらいいのでしょうか?次セクションで説明します。

正確なサイズを指定する事でレクタングル大を表示させる

意図した通りに「レクタングル大」を表示させるためには与えられた広告コードを改変し、それを自分のブログやWEBサイトに埋め込むようにして下さい。

コードの修正は基本的にポリシー違反になりますが、レスポンシブ広告の場合でちゃんとグーグルの指示に従ってやる場合は大丈夫です。

私の場合は、下記AdSenseヘルプで記載されている広告コードの改変の「CSSを使って正確なサイズを指定する」という方法を使っています。

レスポンシブ広告ユニットを作成する | Adsenseヘルプ

手順は以下の通りです。まず、先ほどのコードを再掲します。コードの中で赤文字にしてる部分、赤文字で追記した部分が改変する所です。

ここに①を追加
<script async src="//pagead2.googlesyndication.com/pagead/
js/adsbygoogle.js"></script>
<!– 節約テストぅ –>
<ins class="adsbygoogle"
     style="display:block"(②)
     data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"
     data-ad-format="auto"(③)></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

■「ここに①を追加」について
ここには、「デバイスがこのサイズの時は、このサイズの広告を出します」「このサイズを超えたら、また別のこのサイズの広告を出します」というのを指定する部分です。私は、ここには下記文言を入れています。

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

これで、デバイスの横幅が340pxを超えたらレスポンシブ広告(大)を出して、それ以下ならレクタングル(中)を表示させるという指定をしている事になります。

厳密にヘルプに従えば、開始タグの<style>の部分は<style type="text/css">に変えないとダメなのでしょうが、私は<style>で表示させています。(以前がこの表記だったので。)

僕はCSSの事は分からないので、この表記がデザイン上正しいのかどうかは分かってません。が、まぁそれで上手く行っているので問題無いと思っています。

■"display:block"(②)について
ここは「block」の部分を「inline-block」に変えます。blockのままだと上手く行きませんでした。inline-blockとblockの違いを知りたい方はググって調べてみてください。

再三言いますが、僕はデザイン分かってないので上手くいった方法を書いてるだけですよ。ちなみにコレはAdSenseヘルプの表記に従っているので、何も問題は無いと思います。

■③ data-ad-format="auto"(③)について
これは全部削除。「date-ad-format」は広告の表示形式(サイズ等)の事ですが、既にスタイルタグで指定していますから、僕の方法でレスポンシブ広告を出すならこの部分は不要になります。


上記3点について修正を加えた結果がこちら。

<style>
.my_adslot { width: 300px; height: 250px; }
@media(min-width: 340px) { .my_adslot { width: 336px; height: 280px; } }
</style>
<script async 
src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!– サンプル –>
<ins class="adsbygoogle my_adslot"
     style="display:inline-block"
     data-ad-client="ca-pub-xxxxxxxxxxxxxx"
     data-ad-slot="xxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

僕はこのコードを貼り付けています。また、以前の記事で掲載したコードもこれです。

特に、最初のうちはhtmlタグとか全く良く分からないと思うので、この記事通りに改変すればOKかなと思います。

スポンサーリンク