Googleアドセンスの広告サイズを指定する方法

レスポンシブ広告は自動で広告サイズを調整してくれて便利ですが、意図しないサイズが表示され設置場所によってはレイアウトが崩れたり、想定以上に目立ってしまう場合もあってちょっと扱いづらい場面があります。

調べてみると、Googleアドセンスの公式ヘルプページ「レスポンシブ広告コードを修正する方法」にサイズ調整の方法が記載されていました。実際に試した手順を備忘録としてまとめておきます。

なお、広告のサイズ制限はポリシー変更により仕様が変わる可能性もあるので、あくまでも自己責任でお願いします。

広告サイズを指定する手順
アドセンスで使われている広告サイズ一覧

広告サイズを指定する手順

1.レスポンシブ広告を用意する

サイトからレスポンシブ広告を用意します。
以下のようなコードになっていたらOKです。

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=〇〇"
     crossorigin="anonymous"></script>
<!-- 広告名 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="〇〇"
     data-ad-slot="〇〇"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

2.コードからいらない記述を消す

用意したコードから必要のないコードを消します。
data-ad-format=”auto”とdata-full-width-responsive=”true”の２つを消してください。
data-full-width-responsive=”true”の横にある「>」は消さないでください。
ちなみに、前者は広告サイズの自動調整、後者は画面幅いっぱいに広告を表示させる記述になります。

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=〇〇"
     crossorigin="anonymous"></script>
<!-- 広告名 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="〇〇"
     data-ad-slot="〇〇"
     data-ad-format="auto"/* 消す */
     data-full-width-responsive="true"/* 消す */ ></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

3.コードに新しく記述を追加する

CSSでサイズを調整できるように新たにクラス名を追加します。
adsbygoogleの横に必ず半角スペースを空けて、クラス名を記述してください。

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=〇〇"
     crossorigin="anonymous"></script>
<!-- 広告名 -->
<ins class="adsbygoogle ここにクラス名を追加"
     style="display:block"
     data-ad-client="〇〇"
     data-ad-slot="〇〇"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

クラス名はなんでもいいです。
この記事ではわかりやすいように、koukoku-sizeにします。

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=〇〇"
     crossorigin="anonymous"></script>
<!-- 広告名 -->
<ins class="adsbygoogle koukoku-size"
     style="display:block"
     data-ad-client="〇〇"
     data-ad-slot="〇〇"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

4.広告サイズを指定する

追加したクラスにCSSで広告サイズを指定します。
スタイルシートを開いて追加したクラスを記述します。
あとは好きなサイズを指定します。

.koukoku-size {
  /* ここに好きなサイズを記述 */
}

例えば、一般的な300×250なら以下のように指定します。

.koukoku-size {
  width: 300px;
  height: 250px;
}

広告サイズを柔軟に指定する

さらに柔軟にするなら、例えば高さ100pxまでの広告を表示させる場合は以下のように記述します。
横幅も同じように記述すれば、その幅までの広告しか表示されません。

/* 高さ100pxまで */
 .koukoku-size {
  max-height: 100px;
}

/* 横幅300pxまで */
.koukoku-size {
  max-width: 300px;
}

レスポンシブにも指定可能

スマホ画面とPC画面で違うサイズの広告を使い分けるなど、画面幅に合わせてレスポンシブにすることも可能です。
以下は、一般的な長方形のバナー広告を画面幅に合わせて指定する例。


/* 通常*/
.koukoku-size {
  width: 728px;
  height: 90px;
}

/* タブレット（画面幅800px以下) */
@media (max-width: 800px) {
  .koukoku-size {
    width: 468px;
    height: 60px;
  }
}

/* スマホ（画面幅480px以下)  */
@media (max-width: 480px) {
  .koukoku-size {
    width: 320px;
    height: 100px;
  }
}