レスポンシブ広告ってスマホの画面で見るとレクタングルになりますよね？僕だけ？レスポンシブは使いやすいから良いのだけど、あまりレクタングルばかりは僕は好きじゃない。
それをGoogleで検索かけて調べると@media / メディアクエリを使うと良いと出てくるのですが、何故か変わらなくて横長で表示させたくてもレクタングルになってしまいました。
メディアクエリのやり方はAdSenseヘルプにもあるのですが、どうせ僕のブログだと「横長になってくれないしー」なんて思っていました。
見落とし。
結果から言うと僕の見落としなので、こうやって書くと覚えことも出来ると思うので記事にします。また、メディアクエリを推奨して紹介しているサイトの中にはコードの抜けもありました。参考までに。
横長で自由自在な広告を表示させたい
<style> .example_responsive_1 { width: 320px; height: 100px; } @media(min-width: 500px) { .example_responsive_1 { width: 468px; height: 60px; } } @media(min-width: 800px) { .example_responsive_1 { width: 728px; height: 90px; } } </style> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- example_responsive_1 --> <ins class="adsbygoogle example_responsive_1" style="display:inline-block" data-ad-client="ca-pub-XXXXXXX11XXX9" data-ad-slot="8XXXXX1"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>
AdSenseヘルプに説明されているのは上記のコードです。いくつかパターンがあるのですが、僕はこれを使ってます。
例としてレスポンシブのコードを取得すると下記のようなものが取得できると思います。
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- mikotohodotest1 --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-1234567890123456" data-ad-slot="1234567890" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>
下記の様に変更します。
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- mikotohodotest1 --> <ins class="adsbygoogle mikotohodotest1" style="display:inline-block" data-ad-client="ca-pub-1234567890123456" data-ad-slot="1234567890"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>
変更箇所はins class="adsbygoogleの横に広告の名前を持ってきました。コピペで大丈夫です。 data-ad-format="auto"とdata-full-width-responsive="true”は削除。 data-ad-slot=の最後はしっかりと/insで閉じてください。見落としそうなのはstyle="display:block"が style="display:inline-block"に変わっている所です。見落としてそのままでも表示されますけどね。
次に下記のコードを変更します。
<style> .example_responsive_1 { width: 320px; height: 100px; } @media(min-width: 500px) { .example_responsive_1 { width: 468px; height: 60px; } } @media(min-width: 800px) { .example_responsive_1 { width: 728px; height: 90px; } } </style>
example_responsive_1と書かている箇所を上記でコピペした広告名に変更します。次に僕の場合はmin-width: 800pxの部分を1280に変更します。更に一行目のwidth: 320pxをwidth: 300pxに変えます。僕の場合なので、そのまま320で問題無いのならそのままで良いです。変更した結果は下になります。
<style> .mikotohodotest1 { width: 300px; height: 100px; } @media(min-width: 500px) { .mikotohodotest1 { width: 468px; height: 60px; } } @media(min-width: 1280px) { .mikotohodotest1 { width: 728px; height: 90px; } } </style>
- 横幅500px未満で300*100
- 横幅500px~1279pxで468*60
- 横幅1280px以上で728*90
画面サイズによって広告がサイズ変更して表示してくれます。
変更した広告コードを合わせると下記の様になります。
<style> .mikotohodotest1 { width: 300px; height: 100px; } @media(min-width: 500px) { .mikotohodotest1 { width: 468px; height: 60px; } } @media(min-width: 1280px) { .mikotohodotest1 { width: 728px; height: 90px; } } </style> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- mikotohodotest1 --> <ins class="adsbygoogle mikotohodotest1" style="display:inline-block" data-ad-client="ca-pub-1234567890123456" data-ad-slot="1234567890"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>
ごちゃごちゃしてて何言ってるか分からないという場合は、最後のコードを元に自分が所持しているコードと、コードを取得する際に設定した広告名を置き変えたら良いと思います。
@mediaの三行目を1280pxにした理由は、タブレット等の解像度が1024pxの場合だと実際に表示したいコンテンツ幅が1024pxあるとは限らないからです。実際に僕のブログの場合だと1024pxの解像度で閲覧するとコンテンツ内の横幅がおよそ660pxになり、728*90の広告は突き抜けてしまいます。
それならフルスクリーンで見てる時のみ728*90の表示で良いかなと思いました。
レスポンシブ広告コードを修正する方法 - Google AdSense ヘルプリンクあるなら最初から貼っておけよって話でもあります。【BAS】Better Ads Standardsによって苦しい思いをしないように広告の占有率を見直すにも良いかもしれません。