Google の広告配信サービスであるアドセンスは、広告のサイズをレスポンシブ形式で変更することができます。 しかしながら、広告のサイズが上手く変更できないパターンがあったので紹介します。 例えば、広告サイズを 300x250 で設定するように CSS を調整したのに、300x600 サイズの広告が表示される場合があります。

レスポンシブサイズの広告を選択するとおおむね次のようなコードを張り付けるように示されます。 このとき、data-ad-format=auto パラメータ (属性) があると、広告のサイズを設定するような style(CSS) が JavaScript によって挿入されるようです。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 広告名 -->
<ins class="adsbygoogle"
     style="display:block;"
     data-ad-client="固有の番号"
     data-ad-slot="固有の番号"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<?php endif; ?> 

この問題を解決するためには、単に data-ad-format=auto を削除すれば良いです。 例えば、300x250 の広告だけを表示して、画面サイズに応じて広告サイズを変更するときは、次のようになります。

<style>
.class-a { width: 300px; height: 250px; }
@media(max-width: 999px) { .class-a { 適当なサイズ } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 広告名 -->
<ins class="adsbygoogle class-a"
     style="display:block;"
     data-ad-client="固有の番号"
     data-ad-slot="固有の番号"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

ちょっと前までのサービスではこういうことは無かったはずなのですが、何時の間にか仕様が変わったのでしょうかね。