「Google Adsence」の広告を規約に違反せず自分でサイズを変える方法

スマホなどの各端末ごとに自動で広告サイズを変えてくれるGoogle Adsenceの「レスポンシブ広告」。
このレスポンシブ広告を自分でサイズ決定できないものか?
今回はこのレスポンシブ広告を規約に反することなくサイズ変更できる方法を紹介します。

スポンサードリンク

レスポンシブ広告とは?

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

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

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

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

ただ基本的に横長の広告しか表示されないので、「300×250」といった大きめの広告は表示されにくいです。

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

広告の発行の仕方

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

やり方はGoogle Adsenceにログインして「広告」の「広告ユニット」から「新しい広告ユニット」をクリック。

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

最後に「広告サイズ」を「自動サイズレスポンシブ」に選択して、発行する広告の名前を入力して完了です。

あとは発行してもらった広告コードを横長の広告が表示されてもかまわない場所に貼りつけます。

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

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

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

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

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

・レスポンシブ広告に限定
・Google Adsenceで紹介されている通りの手順を踏む

この条件を守れば自分で広告サイズを変更してブログに貼ることができます。

※「300×250」といった固定サイズで発行してもらった広告はダメです。規約違反になるので気をつけましょう。

広告サイズの変更の仕方

では実際に広告サイズの変更の仕方の解説に移りますが、この方法はGoogle Adsenceが許可している方法で、手順に沿って作業すれば規約違反にはなりません。
実際Google Adsenceのページで紹介されてるやり方なので、安心して作業してください。

まずは通常のレスポンシブ広告のコードはこちら。
「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 Adsenceにおける広告サイズの変更の仕方の紹介を終わります。
今回紹介したコードの修正方法はあくまで「Google Adsenceのレスポンシブ広告」の場合に限ります。
別の固定サイズの広告や他の会社の広告で勝手にコードを修正すると規約違反になるので、充分に注意するようにしてください。
では。