インフィード広告の高さを設定する

AdSense では、利用可能なスペースにうまく収まるようにインフィード広告の高さが自動的に調整されるため、ほとんどの場合ご自身で高さを変更する必要がありません。ただし、インフィード広告の高さに固有の要件がある場合は、インフィードの広告コードを変更して必要な高さに設定することができます。フィードが表示されるサイトが非レスポンシブ サイトかレスポンシブ サイトかによって、高さに固定値または変数を設定します。

注: この記事で説明されている例は、AdSense 広告コードの許可されている変更方法です。この方法でインフィード広告コードを変更すると、AdSense プログラム ポリシーを違反することはありません。

高さに固定値を設定する方法（非レスポンシブ サイト）

インフィード広告の高さに固定値を設定するには、高さ属性（たとえば、height:120px）を広告コードに追加します。インフィード広告ユニットが固定コンテナ（非レスポンシブ）にある場合、このオプションを使用します。

設定する高さがわからない場合は、ブラウザのデベロッパー ツールを使用して、広告の空白なしの正確な高さを確認できます。詳しくは、フィードの画像のサイズを確認する方法についての記事をご覧ください。

この例では、インフィード広告の高さに 120 ピクセルの固定値を設定する方法を示します。

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<ins class="adsbygoogle"
     style="display:block;height:120px"
     data-ad-format="fluid"
     data-ad-layout="image-top"
     data-ad-layout-key="xxxxxxxx"
     data-ad-client="ca-pub-1234567890123456"
     data-ad-slot="123456"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

高さに変数を設定する方法（レスポンシブ サイト）

インフィードの広告ユニットの幅が画面の幅によって調整される（リスポンシブな）場合は、広告コードに CSS のメディアクエリを使用して、画面の幅ごとに異なる高さを指定する必要があります。

設定する高さを決めるには:

1. サイトのスクリーン幅を 350 ピクセル、500 ピクセル、1000 ピクセルなどに変更します。
2. 各幅については、ブラウザのデベロッパー ツールを使用して、広告の正確な空白なしの高さを確認します。詳しくは、フィードの画像のサイズを確認する方法についての記事をご覧ください。

この例では、インフィード広告を画面幅 350 ピクセル×高さ 180 ピクセル、画面幅 500～800 ピクセル×高さ 130 ピクセル、画面幅 800 ピクセル×高さ 200 ピクセルに設定する方法を示します。

<style>
  @media (min-width: 350px) {
    .infeed {
      height: 180px;
    }
 @media (min-width: 500px) {
    .infeed {
      height: 130px;
    }
  }
 @media (min-width: 800px) {
    .infeed {
      height: 200px;
    }
  }

</style>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<ins class="adsbygoogle infeed"
     style="display:block;"
     data-ad-format="fluid"
     data-ad-layout="image-top"
     data-ad-layout-key="xxxxxxxx"
     data-ad-client="ca-pub-1234567890123456"
     data-ad-slot="123456"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

重要: 上記の例では、広告コードで変更を加える必要のある箇所をハイライト表示しています。広告コード全体で同じクラス名（infeed など）を使用するようにしてください。

広告コードを変更したら、設定した高さがどのデバイスでも適切に表示されているかどうか、さまざまな画面サイズでインフィード広告をテストしてみることをおすすめします。

インフィード広告に空白やその他のボタンが追加されることがある理由

インフィード広告ユニットはレスポンシブで、さまざまなビューポートをサポートしています。収められるフィード コンテナの全幅に拡大することで、ページ レイアウトに合わせて自動的にサイズが調整されます。広告の高さは、広告自体のコンテンツと AdSense で選択したインフィード広告の設定に基づきます。

ユーザーのビューポート（スクロールせずに見える範囲）にインフィード広告が表示されると、広告の下に表示されるコンテンツのリフローを行うことで広告の高さを調整しなければならない場合があります。このような事態を回避するために、空白スペースを残すか、広告を展開するための [さらに表示] ボタンを表示することがあります。このようにして、優れたユーザー エクスペリエンスを提供しています。