Google adsenseを記事内に表示している時に、広告が表示されない時があります。広告が表示されない理由は様々でしょう。
アドセンスは、そのページの表示回数が少なかったり（低価値）、もしくは１ページに沢山の広告がある場合など、アドセンス広告が表示されないことが多々あります。
この記事ではアドセンスが表示されない時に広告領域が記事に重なってしまう場合の対処方法について書かれています。この記事を読むことで記事内広告などでリンクがクリックできない現象を解決することができます。
アドセンス広告が表示されなかった時にその広告領域はどうなるでしょうか？
アドセンス広告が表示されなかった時にその広告領域はどうなるでしょうか？
広告領域がそのまま残って広告が表示されない（空白）ケースと、広告領域そのものが無くなるケースがあります。
広告領域が残っている場合は問題ありません。
問題なのは、広告領域が無くなった（高さ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指定することであっさり解決して、一つ謎が解けてだいぶスッキリしました。
おそらく同じ問題がある人は多いと思いますので、参考にしてみてください。
