アドセンス広告のサイズを大きく・小さくする方法。Google AdSenseのレスポンシブ広告
アドセンス広告のサイズは大きいほどクリック率が上がる傾向にあります。
しかしスマホといった小さい画面では、大きい広告だと邪魔に感じることも。
そんなときにパソコンとモバイル端末ごとに広告サイズを変更できれば、画面の見映えやクリック質の改善につながります。
しかし広告のサイズを勝手に変えると規約違反となり、ペナルティや提携解除といった罰則が科せられる危険が。
そこで活用したいのがGoogle AdSenseで提供している「レスポンシブ広告」というアドセンス広告です。
レスポンシブ広告は標準で画面サイズに合わせた広告サイズになりますが、自分の好みの広告サイズに変えることができます。
今回はこのレスポンシブ広告を規約に反することなくサイズ変更できる方法を紹介していきます。
レスポンシブ広告とは？
レスポンシブ広告ではパソコン・スマホなどの各端末ごとに自動で広告サイズを変えてくれる広告です。
例えばパソコンなら「728×90」といった横長のバナーで広告が表示され、スマホなら「310×100」といった小さめのバナーに変化します。
こちらで画面サイズに合わせてサイズ変更をしなくても、発行されたコードを貼りつけるだけなので作業がラクです。
以前は縦幅が大きい広告にはなりませんでしたが、現在では表示される媒体の画面に合わせて最適なサイズの広告が表示されます。
広告を発行してもらう手順は他の広告とほぼ変わらず、「レスポンシブ広告」という広告を選択するだけです。
やり方はまずはGoogle Adsenceにログインしてダッシュボードの「広告」の「サマリー」をクリックします。
そうすると画面の真ん中あたりに「広告ユニットごと」があるのでここをクリック。
次の画面で「テキスト広告とディスプレイ広告」の広告タイプを選択。
広告作成画面に入るので右上の「広告サイズ」で「レスポンシブ」に指定します。（おそらく初期値になってます）
※ちなみに「固定」を指定すると自分で指定したサイズの広告を発行してもらえます。
あとは発行してもらった広告コードを表示したい場所に貼りつけます。
先ほど説明した通り広告がパソコン・スマホなどの画面サイズに自動的に合わせたサイズになるので、広告の大きさに拘らないのならこのままでも充分利用できます。
サイズ変更は規約違反にならないのか？
多くのアドセンス広告では勝手に広告コードを改変して広告サイズを変更するのは規約違反になります。
しかしGoogle AdSenseでは広告のクリック率を増やすためなのか、広告サイズの変更を許可しています。
ただし広告サイズを変更するには条件があります。
・Google AdSenseで紹介されている通りの手順を踏む
この条件を守れば自分で広告サイズを変更してブログに貼ることができます。
現在のレスポンシブ広告は、標準のコードだと縦幅280pxといった、大きめの広告が表示されやすくなってます。
クリック率で見れば大きい方が良いのは事実ですが、中には邪魔に感じる人も多いでしょう。
あるいは広告サイズを自分の好みに固定して、パソコン・モバイル両方で共通サイズで運用したい人も。
そんな人がレスポンシブ広告を使っていくことになるかと。
レスポンシブ広告自体がかなり使いやすいため、Google Adsenseではレスポンシブ広告を扱うことを推奨してるくらいです。
広告サイズの変更の仕方
では実際に広告サイズの変更の仕方の解説に移りますが、この方法はGoogle AdSenseが許可している方法で、手順に沿って作業すれば規約違反にはなりません。
実際Google AdSenseのページで紹介されてるやり方なので、安心して作業してください。
ただ先ほども書いたように現在ではパソコン・モバイル問わず大きめの広告が自動で表示されるようになっているため、意図的にもっと大きい・小さいサイズにしたいときに使うことになると思います。
まずは通常のレスポンシブ広告のコードはこちら。
「XXX～」となっている部分はあなたのIDコードなのでそのままに。
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- レスポンシブ -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="XX-XXX-XXXXXXXXXXXXXXXX"
data-ad-slot="XXXXXXXXXX"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>これにクラスを追加して、いくつかのコードを修正・削除します。
/*追加クラス*/
.ads-responsive{/*スマホ用サイズ*/
width: 320px;
height: 100px;
}
@media(min-width: 500px){/*iPad用サイズ*/
.ads-responsive{
width: 468px;
height: 160px;
}
}
@media(min-width: 800px){/*パソコン用サイズ*/
.ads-responsive{
width: 728px;
height: 280px;
}
}
/*広告コード*/
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- ads-responsive -->/*一応名前変更*/
<ins class="adsbygoogle ads-responsive"/*クラス追加*/
style="display:inline-block"
data-ad-client="XX-XXX-XXXXXXXXXXXXXXXX"
data-ad-slot="XXXXXXXXXX">
data-ad-format="auto"/*削除*/
data-full-width-responsive="true"></ins>/*削除*/
<script> (adsbygoogle = window.adsbygoogle || []).push({});
</script>まずはサイズを変更するための「ads-responsive」というクラスを作成。（名前は自由）
次に各画面サイズで適用するクラス内容を変えるため「@media」というものを使います。
例えば@media(min-width: 500px)と書けば「画面サイズが500px以上」のときに記述したクラスを適用します。
「min-width:～px」なら「～px以上」、「max-width:～px」なら「～px以下」となります。
これは他にも画面サイズごとに適用したいクラスがある場合使える方法なので、覚えておいて損はありません。
後は広告コードを上記のように変更します。
・「display:block」を「display:inline-block」に変更
・「data-ad-format="auto"」と「data-full-width-responsive="true"」を削除。
どれか一つでも修正してないとサイズ変更がされないので注意。
これで画面サイズごとに自由に広告サイズを変えることができるようになります。
今回は以下のような条件のときに広告のサイズが変わるようにしてあります。
・画面サイズが500px以上の場合、468×160のサイズの広告を表示（iPad用）
・どちらにも当てはまらない画面サイズの場合、320×100のサイズの広告を表示（スマホ用、基本表示）
媒体ごとに広告のサイズが変わるようにしているためこうなっています。
条件付け無しで300×250といったサイズに固定することもできます。（そうする場合は固定サイズの広告を発行してもらったほうがいいですが…）
あとは自分好みの広告サイズに
上記のようにコードを修正してしまえば、広告サイズを自分で自由に設定できるようになります。
基本的にはスマホなどの各端末の画面サイズに収まるように広告のサイズを変えたいところです。
サイトによっては微妙に記事のスペースが狭い場合もあるので、一度どう広告が表示されるか確認しましょう。
WordPressを使っている人なら、「外観」→「カスタマイズ」で画面サイズをパソコン・iPad・スマホに切り替えられます。
Google Chromeといったブラウザなら「画面右クリック」→「検証」で画面サイズを変えられます。
ただこれらの確認方法で注意したいのが、広告を貼ったページを表示した後に画面サイズを変えると広告サイズが変更されません。
ページを表示する前に画面サイズを変更しておかないとコードが適用されないので、「あれ？ サイズが変わらない？」と思わずしっかり確認してみてください。
最後に
これでGoogle AdSenseにおける広告サイズの変更の仕方の紹介を終わります。
今回紹介したコードの修正方法はあくまで「Google AdSenseのレスポンシブ広告」の場合に限ります。
別の固定サイズの広告や他の会社の広告で勝手にコードを修正すると規約違反になるので、充分に注意するようにしてください。