お問い合わせはコチラから

Google アドセンスが表示されない時にiframeの高さを0にする方法

サイト運営

Google adsenseを記事内に表示している時に、広告が表示されない時があります。広告が表示されない理由は様々でしょう。

アドセンスは、そのページの表示回数が少なかったり(低価値)、もしくは1ページに沢山の広告がある場合など、アドセンス広告が表示されないことが多々あります。

この記事ではアドセンスが表示されない時に広告領域が記事に重なってしまう場合の対処方法について書かれています。この記事を読むことで記事内広告などでリンクがクリックできない現象を解決することができます。

アドセンス広告が表示されなかった時にその広告領域はどうなるでしょうか?

アドセンス広告が表示されなかった時にその広告領域はどうなるでしょうか?

広告領域がそのまま残って広告が表示されない(空白)ケースと、広告領域そのものが無くなるケースがあります。

広告領域が残っている場合は問題ありません。

問題なのは、広告領域が無くなった(高さ0)にも関わらず、子要素のiframeが高さをもって残ってしまうケースです。

本来、iframeは記事の他の要素と重ならないのですが、広告領域(親要素)が0になっているので、iframeが記事と重なってしまう現象が起きます。

この現象は通常あまり気になりませんが、目次の上にアドセンス広告を表示している時に問題となります。広告が表示されていないにも関わず透明なiframeが目次の上にカバーされて邪魔をして目次をクリックできない時があります。

アドセンスのiframeが親要素の高さを超えてしまう理由

単純にアドセンスで自動的に挿入されるiframeタグにstyleとしてheightが直接書かれているためです。

iframe自体は中身は空っぽで透明なので見えないのでサイトの表示としては影響がありません。

レイヤーの優先順位の問題のように見えるので、z-indexを指定すればその下の要素をクリックできるような気がしますが、z-indexを指定してもうまくいきません。

アドセンスのiframeを親要素の高さが0の時に高さを0に揃える方法

iframe自体の高さが親要素の高さを超えないようにすればiframeが邪魔になることはないので、本来はそのように解決するのが筋です。

アドセンス広告内のiframeのheightをimportantで指定してやります。それだけです。

.adsbygoogle iframe {
    height: 100%!important;
}

まとめ

今回の問題の解決方法はz-indexの指定でどうにかならないか?とおもって散々やってもダメで、しばらく放置していた内容でした。

アドセンスのiframeの高さをimportant指定することであっさり解決して、一つ謎が解けてだいぶスッキリしました。

おそらく同じ問題がある人は多いと思いますので、参考にしてみてください。

この記事が気に入ったら フォローしよう
最新情報をお届けします。
この記事を書いた人
ブーン

はるばる日本よりオランダ王国へやってまいりました。
自分の経験が少しでも参考になれば嬉しいです。
お問い合わせは、『こちら』からお願い致します。

\ブーンをフォロー/
スポンサーリンク
サイト運営
\シェアお願いします!/
\ブーンをフォロー/

失敗しないレンタルサーバーランキング

mixhost

不正アクセスに強くて使いやすいおススメサーバー
\本サイトで利用中/
メリット①:自動ウィルス駆除対応
メリット②:サイトの表示速度が速い!
メリット③:転送量の上限が多い!
メリット④:自由にプラン変更ができ、アクセス増にも対応できる!
メリット⑤:バックアップデータが無料で復元できる!
メリット⑥:Wordpressが簡単にインストールできる!
メリット⑦:どのプランでも初期費用が無料!
メリット⑧:10日間の無料お試し期間と30日の返金保証!

Conoha Wing

国内Wordpress最速の最強サーバー
メリット①:圧倒的な表示速度
メリット②:レンタルサーバーと独自ドメインがセットでお得◎
メリット③:プラン変更はすべてのプランで自由自在
メリット④:一か月の利用転送量の制限が緩い(9TB~)
メリット⑤:WordPresサイトの移行が簡単

エックスサーバー

国内シェアNo1の安定性と実績が魅力。ALL SSDで死角なしの万能サーバー。
メリット①:サイトの表示速度が安定して速い!
メリット②:アクセス負荷に強くて安定性が高い!
メリット③:24時間365日の充実サポートで安心!電話サポートもあり!
メリット④:転送量が多い!
メリット⑤:自動バックアップ機能付き!
メリット⑥:WordPressが簡単にインストールできる!
メリット⑦:10日の無料お試し期間がある!

オランダで生きていく
タイトルとURLをコピーしました