WordPressでGoogle Adsenseの青い枠(背景)を消す方法


広告枠をGoogle Adsenseに変更

今までこのブログのサイドバーにはグラフィックデザインをキーワードにした書籍のAmazon広告枠をつけておりましたがAmazonの出店者詐欺の問題も大ごとになってきたので導入検討していたGoogle Adsenseに変更しました。

Google Adsenseの良いところと見送っていた理由

Google Adsenseは訪れた人の閲覧履歴などのデータを元に興味がある内容を分析し適した広告を表示するというもの。
記事のジャンルには関係が無い広告が出るため導入はこのブログ立ち上げ当初は見送っておりましたが今回Amazonを一旦下げる代わりとして急遽導入する事に。

いざ導入して問題発覚『青い枠』が出現

Google Adsenseを導入した所、広告表示する所までは良かったのですが広告枠の背景に青い枠がズレて表示されてしまいました。

調べてみるとこの問題が出る方は多いようで対処法もいくつか紹介されておりました。WordPressのテーマに使用されているCSSファイル(style.css)に記載されたinsタグへの設定が影響している事はすぐにわかったのでstyle.cssを表示させて

<style.cssの出し方>
[WordPressダッシュボード]-[外観]-[テーマの編集]-[style.css]

以下の部分を表示。

mark,
ins {
 background: #007acc;
 color: #fff;
 padding: 0.125em 0.25em;
 text-decoration: none;
}

他のサイトで記載されていたbackgroundの色を#FFF(白)にするとか、transparent(透明)にするなど試しましたが保存をしても変わらず。
ブラウザで検証から確認すると変更した部分が元に戻っています。style.cssの変更はされて保存もしたのになぜだ!って事で伝家の宝刀『!important』を値の後ろに入れてみるも効果なし!(笑)

他が原因か? Wp-Insert編

そこでstyle.cssに直接書いている事に効果が無いのではないか?という推測に至りまずはウィジェットエリアに広告スペースを入れる際使用しているWp-Insertの設定から。広告掲載に必要なコードを入れると同時にCSSの設定も出来たので試したところ…ダメでした。

<Wp Insert>
https://ja.wordpress.org/plugins/wp-insert/

他が原因か? テーマカスタマイズ 追加CSS編

私がブログで使用しているテーマはシンプルな『Twenty Sixteen』。
そういえばテーマカスタマイズの項目の中に追加CSSがあったなと思い出しそこに以下を記入

/* adsbygoogle */
.adsbygoogle{
 background-color:transparent;
}

Google Adsenseの広告をWp-Insertを使って掲載する際、コードにあった.adsbygoogleのクラスセレクタに対しbackgroundをtransparent(透明)にするよう記載。

無事にズレは消える結果となりました!

紹介されていた方法が間違っていたのか?

WordPressも日々進化しているのでインターネットで掲載されている方法もいざやってみたらダメだったって事も多々あります。インターネットに掲載されている方法も掲載当時は出来たのでしょう。そういった理由もあり私は最近の記事を参考にするようしておりましたがどれもダメだったので今回自ら書く事にしました。

ちなみにこの記事は2017年5月1日に書いております。

いつまで通用する方法かわかりませんが、困った方はご活用を。

関連する記事


投稿者: ヤマシタヒトシ

名古屋のすぐ西隣、あま市でグラフィック、Webのデザインとフォトレタッチをしております。 また日本デザイナー芸術学院、名古屋デザイナー学院のデザイン専門学校と大垣女子短期大学にて非常勤講師、クリエイトベースカナヤマでパソコンインストラクターもしております。