この記事は約 2 分で読めます ( 約 946 文字 )
- 投稿
- アフィリエイト
この記事の最終更新日は 2016年7月28日 です。現在は状況が異なる場合がありますので予めご了承ください
可変
写真（右）の広告位置とサイズに変更して、収益があがったのはよかったが、ギズモードのサイトは解像度にあわせてアドセンスの広告が可変している。
PCで表示すると広告の幅が長くなっているが、アイポン5など解像度の小さいデバイスで表示すると、広告の幅も解像度に合わせて短くなっていた。
おれもデバイスによって、広告のサイズが変更されるようにしたかったから調べてみた。
|
1 2 3 4 5 6 7 8 9 |
<script async src=\"//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js\"></script> <!-- 320+50 --> <ins class=\"adsbygoogle\" style=\"display:inline-block;width:300px;height:50px\" data-ad-client=\"ca-pub-6721409712590583\" data-ad-slot=\"9474335353\"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> |
320+50
↑これがカスタムサイズ（320×50）で作った普通の広告ユニットのコードで
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<style> .my_adslot { width: 320px; height: 50px; } @media(min-width: 500px) { .my_adslot { width: 468px; height: 60px; } } @media(min-width: 800px) { .my_adslot { width: 728px; height: 90px; } } </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-6721409712590583\" data-ad-slot=\"8790860950\"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> |
レスポンシブ（アドバンス）
↑こっちがレスポンシブでモードを（アドバンス）にした広告ユニットのコード。
上3行にあきらかにサイズが変更されるような呪文が追加されてた。
このレスポンシブ（アドバンス）は、広告ユニットを作成するときに選択できる。
|
1 2 3 4 5 |
<style> .my_adslot { width: 320px; height: 50px; } @media(min-width: 500px) { .my_adslot { width: 468px; height: 60px; } } @media(min-width: 800px) { .my_adslot { width: 728px; height: 90px; } } </style> |
|
1 2 3 4 5 |
<style> .my_adslot { width: 320px; height: 50px; } 指定がない場合 @media(min-width: 500px) { .my_adslot { width: 468px; height: 60px; } } 解像度500px↑のデバイスの場合 @media(min-width: 800px) { .my_adslot { width: 728px; height: 90px; } } 解像度800px↑のデバイスの場合 </style> |
つまり、解像度500px↓の携帯とかだと320×50の広告サイズで表示されて、解像度が500px↑や800px↑タブレットやPCだと、指定している広告サイズで表示されるみたいだ。
ちなみにそのwidthとheightの数字はコード変更が必要って書いてたから、変更しても問題ないんじゃないかな。
おれは変える必要がないのでデフォの常態にした。
クロスブラウザチェックができるサイト
http://mattkersley.com/responsive/
これは昨日つくったサイトのブログ記事。
ブログの記事の上下にアドセンスが表示されるようになっている。
タイトル下のレスポンシブ（アドバンス）の広告を貼ったから、解像度にあわせて広告のサイズも変更された。
来月は月/2万を目指す！
ちなみに、そのチェックサイトはアナリティクスの解析に引っかかってた。
追記：2015 現在はこんな面倒なことをしなくてもよいみたい
現在のレスポンシブ広告は上のようなコードを吐き出さなくなってる。普通にコードをコピペすれば自動で最適な広告サイズが表示されるようになってるみたいだ。
