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

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

icons-google

テーマによってですが、

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

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

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

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

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

さてさて、

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

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

しばらく待つ・・・・

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

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

adsense-responsive-unit

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

公式adsenseヘルプに改善策が

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

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

レスポンシブ広告ユニットを作成する
https://support.google.com/adsense/answer/3543893#adv

高度な機能

CSSを使って正確なサイズを指定する場合

の項目です。

adsense-responsive-unit02

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

<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クラスのみ割り当てられていますが、ここに任意のクラスを追加して、メディアクエリでサイズを指定します。

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

めでたしめでたし!

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

コメントをどうぞ

  1. こちらの記事を参考に一度はあきらめたアドセンスのレスポンシブ広告を表示することができました。
    わかりやすくて助かりました。
    ありがとうございます!

  2. 志摩様
    コメントありがとうございます!
    自分が躓いたところを備忘録として残しておりましたが、
    お役に立てた様で、嬉しく思います。
    こうしてコメントを頂けると大変励みになります^^
    ありがとうございました!

コメントを残す

メールアドレスが公開されることはありません。

スパム対策にご協力ください *

コメントの前にご確認ください。なにか不具合などあればtwitterまでご連絡ください

  • 具体的なエラー画面などがある場合は添付してください。(1ファイルの上限は2メガバイト・3枚までUP可能です。)
  • メールアドレス等の入力も必須ではありませんので入力の必要はありません。お気軽にどうぞ。(冷やかしは止めてね!)
  • コメントや返信があっても通知は届きませんのでご注意下さい。
  • 忙しい時はレスが遅れることもあります。
  • 実作業は行いません。ご依頼の場合はお問い合わせからお願い致します。
  • コメントの回答による一切の不利益および損害に関し、責任を取ることはできません。(実作業をご依頼いただいた場合は別です。)