google adsenseのレスポンシブ広告ユニットがテーマによって表示されない時の対処法

クライアントワークではadsenseの広告を貼る機会なんてほぼありませんが、自分で広告貼ろうとしたときに躓いた点をまとめます。
なぜかgoogle adsenseのレスポンシブ広告ユニットだけ表示されないという現象になってしまったためです。

テーマによってですが、

レスポンシブ広告ユニットが表示されない

普通の広告は表示されるのに・・・

コードのコピペミスはないのに・・・

という現象が起こると思います。

かなり久々の更新です。
はー、忙しかった。。
どんなに忙しくても月に一回は更新しようと思っていたのですが、忙殺されていました。

さてさて、

レスポンシブ広告ユニットが表示されない

あれ、表示されない。。。
審査中？？

しばらく待つ・・・・

表示されない・・・・なんでだ・・・・・

と思ったらエラーでした。
開発者ツールで確認すると、コンソールに
Uncaught Error: Cannot find a responsive size for a container of width=0px and data-ad-format=auto
の文字が。

なるほど、レスポンシブテーマでwidthを認識できない時に起こるエラーのようです。

公式adsenseヘルプに改善策が

色々ググったら公式に解決策が載ってました。

現在のレスポンシブ広告コードではご希望どおりの広告ユニットを作成できない場合は、広告コードを修正して、一般的な形状（横長、縦長、レクタングル）のいずれかを指定して使用するか、または正確な広告ユニットのサイズを CSS で指定して使用することができます。

レスポンシブ広告ユニットを作成する
https://support.google.com/adsense/answer/3543893#adv
↓
高度な機能
↓
CSSを使って正確なサイズを指定する場合

の項目です。

要するに任意のクラスを設けてメディアクエリでサイズを指定してあげればいいんですね。

<style type="text/css">
.任意のクラス { width: 320px; height: 100px; }
@media (min-width:500px) { .任意のクラス { width: 468px; height: 60px; } }
@media (min-width:800px) { .任意のクラス { width: 728px; height: 90px; } }
</style>
<ins class="adsbygoogle 任意のクラス"
    style="display:inline-block;"
    data-ad-client="ca-pub-1234"
    data-ad-slot="5678">
</ins>

adsenseでコードを生成すると、insタグにはadsbygoogleクラスのみ割り当てられていますが、ここに任意のクラスを追加して、メディアクエリでサイズを指定します。

もちろん、メディアクエリのサイズは利用中のテーマにもよると思いますが、この例を参考にしてスタイルを追加したら無事広告が表示されました。

めでたしめでたし！

ネタだけはたまっているので時間のあるうちに更新がんばろうと思います！
あとサイトのリニューアルもしたいな～。