アドセンス広告のサイズを自分で大きく・小さく変更する方法。Google AdSenseのレスポンシブ広告

基本的にアドセンス広告のサイズを勝手に変えることは規約違反となり、ペナルティや提携解除といった罰則が科せられる危険もあります。

しかしパソコンとスマホなどのモバイル端末ごとに広告サイズを変更できれば、画面の見映えやクリック質の改善につながります。

そこで活用したいのがGoogle AdSenseで提供している「レスポンシブ広告」というアドセンス広告です。

このレスポンシブ広告は標準機能として画面サイズに合わせた広告サイズになりますが、自分の好みの広告サイズに変えることができます。

今回はこのレスポンシブ広告を規約に反することなくサイズ変更できる方法を紹介していきます。

レスポンシブ広告とは?

画面サイズに合わせて広告サイズが変わる

レスポンシブ広告ではパソコン・スマホなどの各端末ごとに自動で広告サイズを変えてくれる種類の広告です。

例えばパソコンなら「728×90」といった横長のバナーで広告が表示され、スマホなら「310×100」といった小さめのバナーに変化します。

こちらで画面サイズに合わせてサイズ変更をしなくても、ただ発行されたコードを貼りつけるだけなので作業がラクです。

以前は縦幅が大きい「300×250」といった広告にはなりませんでしたが、現在では表示される媒体の画面に合わせて最適なサイズの広告が表示されます。

今回の記事はこの広告サイズを自分で変更する方法の紹介になります。

広告の発行の仕方

広告を発行してもらう手順は他の広告とほぼ変わらず、「レスポンシブ広告」という広告を選択するだけです。

やり方はまずはGoogle Adsenceにログインしてダッシュボードの「広告」の「サマリー」をクリックします。

そうすると画面の真ん中あたりに「広告ユニットごと」があるのでここをクリック。

次の画面で「テキスト広告とディスプレイ広告」の広告タイプを選択。

広告作成画面に入るので右上の「広告サイズ」で「レスポンシブ」に指定します。(おそらく初期値になってます)

※ちなみに「固定」を指定すると自分で指定したサイズの広告を発行してもらえます。

あとは発行してもらった広告コードを表示したい場所に貼りつけます。

先ほど説明した通り広告がパソコン・スマホなどの画面サイズに自動的に合わせたサイズになるので、広告の大きさに拘らないのならこのままでも充分利用できます。

サイズ変更は規約違反にならないのか?

多くのアドセンス広告では勝手に広告コードを改変して広告サイズを変更するのは規約違反になります。

しかしGoogle AdSenseでは広告のクリック率を増やすためなのか、広告サイズの変更を許可しています。

ただし広告サイズを変更するには条件があります。

・レスポンシブ広告に限定
・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以下」となります。

これは他にも画面サイズごとに適用したいクラスがある場合使える方法なので、覚えておいて損はありません。

後は広告コードを上記のように変更します。

「class="adsbygoogle"」内に新しくつくったクラス「ads-responsive」を追加。
「data-ad-format="auto"」「data-full-width-responsive="true"」を削除。

これで画面サイズごとに自由に広告サイズを変えることができるようになります。

今回は以下のような条件のときに広告のサイズが変わるようにしてあります。

・画面サイズが800px以上の場合、728×280のサイズの広告を表示(パソコン用)
・画面サイズが500px以上の場合、468×160のサイズの広告を表示(iPad用)
・どちらにも当てはまらない画面サイズの場合、320×100のサイズの広告を表示(スマホ用、基本表示)

媒体ごとに広告のサイズが変わるようにしているためこうなっていますが、条件付け無しで300×250といったサイズに固定することもできます。(そうする場合は固定サイズの広告を発行してもらったほうがいいですが…)

あとは自分好みの広告サイズに

上記のようにコードを修正してしまえば、広告サイズを自分で自由に設定できるようになります。

基本的にはスマホなどの各端末の画面サイズに収まるように広告のサイズを変えたいところです。

自分のブログのテーマによっては微妙に記事のスペースが狭い場合もあるので、一度どう広告が表示されるか確認しましょう。

WordPressを使っている人なら、「外観」→「カスタマイズ」で画面サイズをパソコン・iPad・スマホに切り替えられます。

Google Chromeといったブラウザなら「画面右クリック」→「検証」で画面サイズを変えられます。

ただこれらの確認方法で注意したいのが、広告を貼ったページを表示した後に画面サイズを変えると広告サイズが変更されません。

ページを表示する前に画面サイズを変更しておかないとコードが適用されないので、「あれ? サイズが変わらない?」と思わずしっかり確認してみてください。

最後に

これでGoogle AdSenseにおける広告サイズの変更の仕方の紹介を終わります。

今回紹介したコードの修正方法はあくまで「Google AdSenseのレスポンシブ広告」の場合に限ります

別の固定サイズの広告や他の会社の広告で勝手にコードを修正すると規約違反になるので、充分に注意するようにしてください。