つまづき体験記:目次がアドセンス広告とくっついてしまう問題

スポンサーリンク


前回の投稿(目次プラグインを導入したら表示されない?)に続いて、Wordpressのプラグイン「Table of Contents Plus」の使い方で困ったことを書き残しておきます。今回の悩みは、サイトの運営費をまかなうために欠かせないGoogle-adsence(グーグルアドセンス)の広告と目次が密着してしまう問題を紹介します。

アドセンス広告と目次は人気スペースに座ることが多い

これまでさまざまなサイトを見てきましたが、Table of Contents Plusの置き場所として多いのは、リード(前文)の後にある最初の見出しの前という方が多い印象を受けます。ただ、この場所はアドセンス広告の設置場所としても人気が高いスペースなので、広告と目次が上下の関係となりがちです。実際、私のサイトでもそのような構造となっています。

アドセンス側から修正依頼が来る可能性もある

では、アドセンス広告と目次を同時に導入するとどんな事態となるのでしょうか。多くの場合、下図のように広告と目次が密着してしまうでしょう。これは見た目にもおかしいですし、広告と目次がくっついていることによってアドセンス側が「修正をしてください」と警告が来る可能性もあります。これを放置すると資格を剥奪されるおそれもあるので、なんとしてでも解決したいところです。

目次と広告がくっついた時の対処法

目次と広告がくっついた時の対処法

広告自体に余白をつけることで解消できる

広告を生成した時にできるコードのクラスを探す

広告の密着に対する具体的な対策は、広告自体に余白をつけるという方法が最も有効でしょう。ウェブブラウザでページのソースを表示させて、アドセンス広告を形成しているCSSのクラスを探しましょう。アドセンス広告が生成された時にできるクラスは「adsbygoogle」です。

スポンサーリンク

広告に余白をつけるため「adsbygoogle」のCSSクラスを探す

広告に余白をつけるため「adsbygoogle」のCSSクラスを探す

 

.adsbygoogleに余白をつけたコードをstyle.cssに貼り付けるだけ

下図は、ページソースを表示させた時のコードの一部です。コード内で文字列「adsbygoogle」を検索すると、オレンジや黄色に反転されています。そこで以下のコードを、style.cssにコピペして貼り付けるだけです。

.adsbygoogle { margin: 60px 0px 60px 0px; }

例では上下の空きを60pxに設定していますが、数字に関しては好みで結構です。

アドセンス広告に余白をつけた後の状態

アドセンス広告に余白をつけた後の状態

上の図では、広告と目次の間に十分な空きができましたよね。密着していた時のことを思えば、かなりすっきりしています。繰り返しますが、広告とコンテンツの密着は見た目が悪いだけの問題ではありません。アドセンスから指導が来る前にできるだけ早く解決しましょう。

スポンサーリンク


目次と広告がくっついた時の対処法

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This site uses Akismet to reduce spam. Learn how your comment data is processed.

ABOUTこの記事をかいた人

新聞社の記者をしています。仲間との起業を夢見て、これまでに学んできたノウハウを記しておきます。現在、主に結婚新聞や企業・団体向けの広報紙を制作していますが「こんな紙面をつくってほしい」とのご要望にも随時お応えしています。