今回はアドセンスのレスポンシブ広告がはみ出る場合のサイズ指定方法について詳しくご紹介していきます。
レスポンシブ広告を利用していて、スマホで見た時に広告がはみ出している！といったトラブルがあって、私に良く問い合わせが来たりします。
きっとあなたも経験した事があるのではないでしょうか？
しかし、どう設定したら良いのか？………迷いますよね。
スマホに合わせたら小さく…、PCに合わせたら大きく…、両方に合わせる方法はないの！？と思っている方も多いのでは？！
そんな今回は、レスポンシブ広告の表示を変える手順や、より細かく設定したい人向けのサイズ指定方法について詳しく解説していきますので、初心者の方はまずカスタマイズで「レクタングル」に設定をする方法を試してみて下さいね。
この記事で書かれている内容
アドセンスのレスポンシブ広告とは？
“レスポンシブ”の特徴としては大きく分けて2つあります。
1つ目は「利用可能なスペースに合わせてサイズを自動調整」してくれるという事です。
レスポンシブ広告コードを使用すると、ページのレイアウトに合った広告ユニットのサイズが自動的に指定されるので、コードがシンプルになり、時間短縮に効果を発揮してくれます。
もう少し平たく言うと、デバイスやブラウザの広告が表示できるスペースに合わせて、自動でサイズを決めて表示してくれるという事です。
PCから見ても、スマホから見ても的確なサイズで表示されるのでとても便利です。
2つ目の特徴は、「画面の向きに合わせて広告のサイズを変更できる」という事。
端末の向きが変わってレスポンシブ広告が表示されているページのレイアウトが変化した場合に、新しいページに合った適切なサイズの広告を新たに表示してくれます。
分かりやすいのは、例えばスマホで閲覧していて、縦持ちから横持ちに変えた場合、自動で画面も横長に表示が変わったりします。
その時に、レスポンシブが広告の表示も的確なサイズで表示し直してくれるという事です。
今やインターネットを見ている人の半数以上はスマホから閲覧しています。
スマホ画面に合わせた広告表示をさせる事で広告のクリック率をより上げてくれます。
スマホからの閲覧の場合に役立つ機能とは？
パソコンでは「336×280 レクタングル(大)」、スマートフォンでは「300×250 レクタングル」を使用するのが一般的となっています。
しかし、最近発売されているスマホは画面サイズが以前に比べて大きくなってきていますよね。
そのため、iPhone6以降の端末ではパソコンと同じ「336×280 レクタングル（大）」を使用しても、広告が見切れることなく全て表示される場合が多いようです。
Androidについても以前から画面が大きいので同様です。
しかし、iPhone5などiPhone6以前の機種で「336×280 レクタングル(大)」を表示させようとすると、画面からはみ出してしまい、広告全体を一目で認識する事ができません。
そのためiPhone6以前の端末の場合、「300×250 レクタングル」で表示させなければなりません。
そういったデバイス（端末）毎の広告表示の切り替えもレスポンシブであれば自動でやってくれます。
設定が難しいと感じる方や、ご自身のサイトのアクセス端末を調べた時にスマホの方が多い方はとても便利に感じる事ができる機能です！
見やすいサイズの広告でクリック率アップ！？
そもそもなぜ、アドセンス広告で収益を上げている人は、端末に合わせてサイズを変更しているのか？
例え端が少しはみ出たとしても、広告が表示されているのであればクリックされる可能性はあるのでは？
まぁ細かい性格でもない限り、画面上に何の広告なのか商品名は見えているしこのままでもいいか…と思ってしまいがちなのですが、閲覧している端末に合わせて広告の表示サイズを合わせる事でクリック率に大きく影響してくるわけです。
広告は大きいサイズの方が目立ち、目に留まりやすくクリックされやすい傾向にありますが、スマホ画面で大きな広告がドーンと出現したら邪魔ですよね？
それゆえに見にくい！と判断して記事を読む事を辞め、あなたのブログ（サイト）を離脱してしまったりします。
それがあるが故に、それらを回避するためにも、端末で表示する広告のサイズは重要になってきます。
大きく目立てばいいというわけではなく、あくまでも記事を読んでもらえる事が前提ですので、無駄な主張は抑えていかなければなりません。
それらの煩わしい設定を自動で請け負ってくれるレスポンシブはアドセンス広告を掲載している人なら絶対に必要になってきます。
アドセンスの横長のレスポンシブ広告をカスタマイズする方法は？
レスポンシブが、利用可能なスペースに合わせ、PCとスマホそれぞれに最適なサイズでアドセンスを自由選択してくれる広告サイズだということはお分かり頂けたと思います。
でもいざ利用してみると、『レスポンシブ』自由度が高すぎて、思ったとおりの広告サイズで表示してくれない事があったりします。
「レクタングル」という四角形の広告を表示をさせるのがオススメなのですが、記事の途中に挿入した場合、横長の広告が表示されてしまう事がよくあるのです。
横長でも表示されているのなら良いのではないか？と思われるかもしれませんが「レクタングル」がオススメなのには理由があります。
「レクタングル」にカスタマイズするメリット
横長の「ビックバナー」でも広告全体が表示されているなら問題はないか…と思われるかもしれませんが、「レクタングル（大）」にする事でクリック率や収益がアップする傾向があります。
というのは、アドセンス広告は「レクタングル（大）」のサイズタイプが一番クリック率が高いと言われています。
同じ「レクタングル」タイプよりも「レクタングル（大）」の方が、若干大きいためにワンクリック当たりの広告単価が高くなるとも言われているためです。
それなら全てを「レクタングル（大）」に設定してしまおうと思う方もいるかもしれませんが、上記でもご紹介した通りiPhone5などの画面が小さなスマホでははみ出てしまうんですよね。
はみ出してしまっては、収益に大きく影響を及ぼしてきます。
レスポンシブの場合、広告の表示を「レクタングル」にするという設定を行うと、サイズは端末やブラウザによって自動で調整してくれます。
なので、横長の広告を表示させずに「レクタングル」で表示をするように設定をするだけでどの端末でもぴったりの広告が表示されるというわけです。
それでは、その手順について解説していきます。
レスポンシブ広告を「レクタングル」にする方法
『レクタングル』を指定する設定はとても簡単です！
アドセンスコードの中の、
「data-ad-format=”auto”」
の「auto」を変更します。
- rectangle(レクタングル)
- horizontal(横長)
- vertical(縦長)
上記でご説明した通り、広告は「レクタングル」がオススメですので、
「data-ad-format=”rectangle”」
に、変更するだけでOKです。
サイズに関しては自動調整を行ってくれるのでひとまず設定の必要はありません。
上記の広告コードをコピーしたら、投稿したい記事の投稿したい場所に広告コードを貼り付けて広告を表示させます。
まず最初は、この状態でサイトでどのような表示がされるのかを確認してみてくださいね。
その時はパソコンとスマホ、それぞれから確認してどちらも適切に表示されているかを確認するのがオススメです。
アドセンスのレスポンシブ広告がはみ出る！サイズ指定の方法は？
レスポンシブ広告をスマホで見たときに右側が切れてしまっている事はよくありますね。
レクタングルを指定すると、サイズは自動調節に任せる事になるので、多くの場合は改善されますが、それでもしっかりと収まらないという場合があります。
その場合は、もう少し細かくサイズに関しての設定を行っていくのがオススメ。
この方法だと、『この大きさまでの画面の場合は、〇〇×〇〇のサイズで表示させて、それ以上の大きさの画面の場合、△△×△△のサイズで表示させる』というように、画面の大きさによって広告を決める事ができるのです。
上記のレクタングルを試しても上手く表示されない場合や、閲覧するデバイスの画面の大きさに合わせて細かく設定したいという方は、下記でご紹介するサイズ指定の方法をお試しください。
画面の幅に合わせてサイズ指定をする方法
まず広告ユニットを作成し、広告コードを取得しましょう。
グーグルアドセンスのメニューから「広告」→「広告ユニット」→「新しい広告ユニット」の順に進みます。
広告ユニットはいずれ複数個作る場合も多く、そのたびに増えていきます。
そこで適当な「名前」を付けてしまうと後々わかりにくくなってしまうため、「ドメイン名01」「ドメイン名02」とサイトの名前と数字で分かりやすく設定しておくのがオススメです。
この時設定する「名前」は、後に行うコードの編集の時に入力が必要になりますので、わかるようにしておきましょう！
広告ユニットを作成する時の注意点としては、サイズは「レスポンシブ」を選択することです。
広告ユニットを作成しコードを取得したら、広告コードの上に以下のようにサイズ指定をするためのコードを追加します。
<style>
.unitname-test { width: 320px; height: 100px; }
@media(min-width: 470px) { .unitname-test { width: 468px; height: 60px; } }
@media(min-width: 730px) { .unitname-test { width: 728px; height: 90px; } }
</style>
こちらは、一例ですが、
- 基本の広告サイズ：320×100
- 画面の大きさが470px以上の場合：468×60
- 画面の大きさが730px以上の場合：728×90
の広告を表示させるという意味のコードです。
このようにレスポンシブ広告では基本的な広告サイズを設定した上で、「画面のサイズがこれを超えるとこちらの広告サイズに切り替える」という設定が出来ます。
指定するサイズはアドセンスの広告サイズのデフォルトにないサイズでもOK。
好みに合わせて、「800px〜 → 750 x 200」など、好きなサイズに変更してください。
もしサイズが分からないという方は、アドセンスのヘルプにある広告サイズの見本を見ながら考えると分かりやすいと思いますよ。
コードの編集方法
では、実際に上記の例でコードを編集する手順を見ていきましょう。
<style>
.unitname-test { width: 320px; height: 100px; }
@media(min-width: 470px) { .unitname-test { width: 468px; height: 60px; } }
@media(min-width: 730px) { .unitname-test { width: 728px; height: 90px; } }
</style>
まず赤字で表示した「unitname-test」の部分には、上記の画像で作成した広告ユニットの「名前」を入力します。
さらに数字の部分を調整して、画面の表示やサイトのレイアウトに合わせて広告サイズを決めていきます。
上記の通りサイズが決まったら、最初に取得したレスポンシブ広告コードを一部変更していきましょう。
変更する箇所は全部で3つです！
<ins class=”adsbygoogle unitname-test“
「adsbygoogle」の後に半角スペース1つ空け、広告ユニットの「名前」を入力しましょう。
style=”display:inline-block“
最初は「display:block」になっている箇所を、「display:inline-block」に修正します。
data-ad-format=”auto”></ins>
「data-ad-format=”auto”」の部分を消します。
上記3点を修正したコードと、サイズ指定をしたコードを組み合わせれば完成です！
コードを組み合わせた完成例
このように組み合わせて、変更箇所に間違いがないかを確認してください。
この作業を行った後は、実際にどのように表示がされているか記事をチェックしてみて微調整を行ってみてくださいね。
『アドセンス レスポンシブ広告 はみ出る サイズ指定方法』まとめ
今回は、アドセンスのレスポンシブ広告がはみ出る場合のサイズ指定方法について詳しくご紹介してきました。
設定にあまり詳しくない方にとってはどうなってしまうのか、少し心配になる設定でしたよね。
でも、実際に設定ができているかどうかは記事を見れば一目瞭然です。
取得したコードを実際に表示させたい場所に貼り付けて、間違った表示になっていないか？画面からはみ出ていないか？をしっかりと確認してみてくださいね。
この設定をマスターされている詳しい方は、サイトの中の表示される場所に合わせてサイズ変更を行い、見やすいようにカスタマイズを行っているようです。
最初のうちはそこまでできなくて当然ですが、この広告サイズによって収益に大きな影響が出る場合もあるので、できる事は行っておきたいですね。
まずは横長の広告を「レクタングル」に設定して自動でサイズを合わせてもらう方法が簡単だと思いますので、その方法で試してみてください。
もしそれでも画面から広告がはみ出るなどの問題があれば、サイズを指定してみてくださいね。
パソコンで問題なくても、スマホだとダメというパターンも多々あるので、徹底していきましょう！
豪華特典をプレゼント実施中！
