Googleアドセンスの広告を画面サイズに合わせて表示する方法！
photo by: Johan Larsson - CC BY 2.0
こんにちわは。モカです。
Googleアドセンスの広告をレスポンシブで表示いている場合、希望したサイズの広告を表示出来ない事ってありませんか？当ブログではレスポンシブ広告＆レクタングルを指定していますが、横長の広告が表示されてしまったりる事が多々あります。特にPCではその比率が高くなっている様にも感じています。
広告は美しく設置する事で良い結果を得られると言われていますので、広告を画面サイズによって表示を切り替える事にしました。
設置したい広告サイズ
まず、設定したい広告サイズを決めます。当ブログでは以下の様にしたいと考えています。
- 基本的に表示する広告サイズ：336*280
- 336*280が表示出来ない場合：300*250
「2」はiPhone5を意識しての事で、それ以外は338*280で表示したい訳です。
Googleアドセンスのヘルプ
Googleアドセンス以下の様に説明があります。
この例ではレスポンシブ広告コードを修正し、広告ユニットサイズをモバイル、タブレット、パソコンの 3 種類の画面の幅に合わせるように設定します。CSS メディアクエリを使用したことや、AdSense 広告コードを修正したことがなくても、この例を使って修正することができます。
▼修正するコードの雛形はこちらです。
|
1 2 3 4 5 6 7 8 9 10 11 |
<style type="text/css"> .adslot_1 { width: 320px; height: 100px; } @media (min-width:500px) { .adslot_1 { width: 468px; height: 60px; } } @media (min-width:800px) { .adslot_1 { width: 728px; height: 90px; } } </style> <ins class="adsbygoogle adslot_1" style="display:inline-block;" data-ad-client="ca-pub-1234" data-ad-slot="5678"></ins> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <script>(adsbygoogle = window.adsbygoogle || []).push({});</script> |
このコードでは以下の様に広告を表示する事になります。
- デフォルト：320*100
- 画面サイズ500以上：468*60
- 画面サイズ800以上：728*90
コードをカスタマイズします
以下の様に設置したい訳ですね。
- デフォルト：300*250
- 画面サイズ340以上：336*280
▼修正後のコード(赤字個所を修正)
|
1 2 3 4 5 6 7 8 9 10 |
<style type="text/css"> .adslot_1 { width: 300px; height: 250px; } @media (min-width:340px) { .adslot_1 { width: 336px; height: 280px; } } </style> <ins class="adsbygoogle adslot_1" style="display:inline-block;" data-ad-client="ca-pub-①貴方のコード" data-ad-slot="②貴方のコード"></ins> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <script>(adsbygoogle = window.adsbygoogle || []).push({});</script> |
尚、①＆②は皆さんの固有のコードに修正して利用して下さい。
まとめ
広告は綺麗に設置する事が「正義」だと言われていますので、同じページでも広告のサイズが違っていたり、PCで横長(縦も長いヤツ)のテキスト広告を表されてしまう事は避けた方が良いと思います。すなわちCTRにも影響する筈ですので。
勿論phpを直接書き換えても対応は可能ですが、プラグインなどを利用している方はこちらの方が簡単で便利ですね！当Blogもこの方法に変更して設置してみますので、結果はそのうち記事にしたいと思います。