「ブログにGoogle AdSenseを貼ったのに、肝心の広告がなかなか出てこない」「表示される直前に、なぜか黄色い背景がチラッと見える」。そんなモヤモヤを抱えていませんか。
実はこの黄色い背景、私も昔このブログで体験して頭を悩ませた現象なんです。WordPressのテーマを変えたとたん、AdSenseが表示される前に一瞬だけ黄色い四角がパッと出るようになって、どうにも目障りで仕方ありませんでした。最初は自分の環境だけかと思ったのですが、別のPCやブラウザで見ても同じ。これは何かおかしいぞ、と本腰を入れて調べることになりました。
結論から言うと、AdSenseの黄色い背景はテーマ側のCSS（insタグの背景色指定）が原因で、今でも条件がそろえば普通に起こりますが、たった1行のCSSで消せます。
ただ、この記事を開いてくれた方の本当の関心は、もしかすると「黄色い背景」だけではないかもしれません。そもそも広告が表示されない、表示が遅い、空白のまま出てこない。AdSense初心者がぶつかりがちなトラブルは、ほかにもいろいろあります。
そこでこの記事では、まず昔ながらの「黄色い背景」現象の正体と直し方を、当時の経験を交えてかみくだいて解説します。そのうえで、今のAdSenseでよくある「広告が出ない・遅い・空白」といった表示トラブルの原因と対処法を、最新の情報をもとにまとめ直しました。WEB制作を25年やってきた私が、専門用語をなるべく避けて初心者目線で書いていきます。読み終わるころには、自分のサイトの広告トラブルがどこに当たるのか、見当がつくはずです。
黄色い背景の正体は「insタグ」の背景色だった
まずは、この記事のきっかけになった黄色い背景の話から。AdSenseの広告コードを貼ると、画面にはこんなふうなinsタグが書き出されます。
<ins class="adsbygoogle" style="..."></ins>このinsというタグ、もともとは「あとから追加された内容」を示すためのHTMLタグです。AdSenseは広告の入れ物としてこのタグを使っているんですね。
問題は、一部のWordPressテーマやリセットCSSが、このinsタグに対して背景色を指定していることにあります。たとえば当時の私のブログでは、こんなCSSが効いていました。
ins { background-color: #ff9; color: #000; text-decoration: none; }つまり「黄色い背景」は広告そのものの不具合ではなく、テーマ側のCSSがAdSenseのinsタグにまで色をつけてしまっていたのが原因だったわけです。
広告のJavaScriptが読み込まれて中身が表示される直前、空っぽのinsタグだけが先に置かれます。そのわずかな瞬間に、CSSの黄色だけがチラッと見えてしまう、という仕組みでした。原因がわかってみれば単純な話です。
黄色い背景を消す方法：CSS1行で解決
原因がわかれば対処はかんたんです。やり方は大きく2つあります。
1つめは、テーマのCSSにあるinsへの背景色指定そのものを削除する方法。当時の私はこのタグを記事中で使う予定がなかったので、思いきって設定ごと消して解決しました。手っ取り早いですが、記事の中でinsタグ（取り消し線や追記の表現）を使っている場合は、そちらの見た目まで変わってしまう点に注意です。
2つめは、AdSenseのinsだけをピンポイントで透明にする方法。こちらのほうが安全でおすすめです。AdSenseのinsタグには必ずstyle属性がついているので、それを目印にしたCSSを1行足すだけです。
ins[style] { background-color: transparent; }この書き方なら、AdSenseの広告枠だけ背景を透明にでき、記事中で使っている普通のinsタグの見た目はそのまま残せます。
「黄色い背景が消えない」という場合は、テーマ側の指定が強くて打ち消せていないことが多いです。そのときはins.adsbygoogle { background-color: transparent !important; }のように、AdSense専用のクラスを狙って指定すると効きやすくなります。CSSは後から書いたものや、より具体的に指定したものが優先されるので、この性質をうまく使うのがコツです。
参考： Google AdSenseの表示前に背景が黄色になるのはinsタグが原因（KUMALOG）
そもそも広告が表示されない時に最初に疑うこと
黄色い背景以前に、「広告そのものが出てこない」という相談もよくいただきます。これはAdSenseを始めたばかりの方が、いちばん最初にぶつかる壁かもしれません。
まず落ち着いて知っておいてほしいのは、広告コードを貼ってすぐに表示されるとは限らない、ということです。Googleがサイトの内容をチェックして広告を出すまでには時間がかかります。通常は1時間ほどで表示されることが多いですが、新規サイトや審査の状況によっては、もっと待つこともあります。
「貼った直後に出ない＝壊れている」と焦って何度もコードを貼り直すと、かえってコードが二重になったり壊れたりして、トラブルのもとになります。まずは数時間から1日ほど、ゆったり待ってみてください。
そのうえで、いつまでたっても出ない場合は、次のような点を順番に確認していくとよいです。
- 広告コードをコピーするときに一部が欠けていないか
- キャッシュ系のプラグインがコードを書き換えていないか
- 自分のブラウザに広告ブロック拡張機能が入っていないか
- ブラウザのJavaScriptが無効になっていないか
意外と多いのが、最後の2つです。自分の環境だけ広告ブロックが効いていて「表示されない」と勘違いしているケースは、本当によくあります。一度、拡張機能をオフにしたシークレットウィンドウや別の端末で確認してみてください。それだけで解決することも珍しくありません。
参考： Googleアドセンス広告が表示されない原因とは？（Xserver公式ブログ）
関連記事：Google AdSense広告サイズと配置の最適解！収益を伸ばす実践ガイド
ads.txtとポリシー違反：見落としがちな2大原因
「コードは正しいはずなのに、なぜか広告が空白のまま」という場合、技術的なミスではなく、AdSense側のルール周りに原因があることがあります。代表的なのがads.txtとポリシー違反の2つです。
ads.txtは、そのサイトで広告を出していいのは誰かをはっきりさせるためのファイルで、設置していないとAdSenseの管理画面で警告が出て、収益や表示に影響することがあります。
AdSenseの管理画面に「収益に重大な影響が出ないよう、ads.txt ファイルの問題を修正してください」といったメッセージが出ていたら要注意です。指示どおりのファイルをサイトの一番上の階層（ルートディレクトリ）に置けばOKですが、反映までに数日かかることもあるので、慌てずに待つことも大切です。
もう1つがポリシー違反です。広告の量に対してコンテンツが極端に少ないページ、規約で禁止されている内容を含むページなどでは、広告が止められたり空白になったりします。自分や知人による不正なクリック（無効なトラフィック）も、アカウント全体の広告配信に響くことがあるので、絶対にやめましょう。
AdSenseの管理画面には「ポリシーセンター」という項目があり、問題があればそこに具体的な内容が表示されます。広告が急に出なくなったときは、まずここを確認するのが近道です。
参考： Googleアドセンス広告が表示されない原因とは？（Xserver公式ブログ）
自動広告が出ない・表示が遅い時の対処法
今のAdSenseは、自分で広告枠を1つずつ貼らなくても、Googleが自動でいい位置に広告を差し込んでくれる「自動広告」が主流になっています。便利な反面、これはこれで独特のつまずきポイントがあります。
自動広告が表示されないときに多いのが、サイトへのアクセスがまだ少なく、Googleがページ構造をうまく解析できていないケースです。自動広告はクローラーがサイトを巡回し、内容を分析したうえで広告を置くため、立ち上げたばかりのブログだと、しばらく広告がまばらにしか出ないことがあります。これは故障ではなく、いわば「様子を見られている」状態なので、コツコツ更新しながら待つのが正解です。
また、自動広告は便利な一方で、ページの表示が重くなりやすいという声もよく聞きます。広告のためのJavaScriptがあちこちで読み込まれるぶん、どうしても表示速度に影響が出るんですね。
少しでも軽くしたいときは、次のような工夫が効果的です。
- 広告関連のドメインをあらかじめ読み込む「DNSプリフェッチ」を設定する
- 1ページに詰め込む広告の数を欲張りすぎない
- ファーストビュー（最初に見える範囲）の広告は控えめにする
とくに最近は、ページの表示速度や、読み込み中にレイアウトがガクッとずれる「レイアウトシフト」が、サイトの使い心地の評価に関わると言われています。広告枠の高さをCSSであらかじめ確保しておくと、広告が出た瞬間に文章が下にずれるのを防げて、読者にとっても親切です。収益と読みやすさのバランスを取るのが、長く続けるコツだと私は思っています。
参考： Googleアドセンスの自動広告が重くサイト表示が遅い問題を解消する方法（たにログ）
関連記事：WordPress高速化のおすすめプラグイン｜SEOにも効く厳選と選び方【最新版】
まとめ：黄色い背景はCSS1行、それ以外は焦らず原因を切り分け
ここまで、昔ながらの「黄色い背景」現象から、今どきのAdSense表示トラブルまで、まとめて見てきました。最後にもう一度おさらいしておきましょう。
- 黄色い背景はテーマCSSの
ins背景色が原因。ins[style] { background-color: transparent; }で解決 - 広告が出ないときは、まず数時間～1日待つ。広告ブロックやJavaScript無効も疑う
- 空白のままなら
ads.txtとポリシーセンターをチェック - 自動広告はアクセスが増えると安定。重いときは数を絞り、表示速度に配慮する
黄色い背景のようなCSS由来の見た目トラブルはコード1行で直せますが、表示されない・空白といった問題は、原因を1つずつ切り分けていくのが解決への近道です。
私もそうでしたが、広告がうまく出ないと、つい「自分のやり方が根本から間違っているのでは」と不安になってしまうものです。でも、ふたを開けてみれば「待てば表示された」「自分のブラウザの広告ブロックが原因だった」という、拍子抜けするほど単純な答えだったりします。だからこそ、あれこれ手を加える前に、一度立ち止まって原因を整理してみるのが大切です。
AdSenseは設定が細かくて、最初はとっつきにくく感じるかもしれません。それでも、トラブルの場所さえ見当がつけば、対処はそれほど難しくありません。この記事が、あなたのサイトの広告を気持ちよく表示させる手助けになればうれしいです。焦らず、ひとつずつ確認していきましょう。
