WordPressのデフォルトテーマ「Twenty Sixteen」に画像を貼ったり、Googleアドセンスの広告をそのまま貼ると、デフォルトでは青い影が出てしまい、ただでさえ広告感を出したくないアドセンスが目立って仕方ないと悩んでいる方もいるのではないでしょうか。
Twenty Sixteenはサイトの作りが非常にシンプルですので拡張性も期待でき、レスポンシブル対応ですので非常に気に入っているのですが、唯一と言っていいほど気になるのが、この青い影！
この影を消す方法は意外と簡単で、スタイルシートに定義することで解決されます。
青い影を消す方法
青い影の原因
Googleアドセンスの生成するディスプレイ広告ではins要素が使われていますが、style.cssのins要素にpaddingやbackground-colorが指定されているため、青い影が出てしまうのです。ということは、style.cssのins要素の記述を書き換えてしまうか、もしくは子ページ等によって上書きしてしまえば、この青い影は消えるはずです。
対処手順1 広告スクリプトをdivで囲む
グーグルアドセンスはscriptに囲まれていますが、さらにこれを任意のclassで囲むことにより対処したいと思います。
グーグルアドセンスなので、「gad」というclassの名称をつけてdivで囲みます。この名称は適当でいいのですが、後述するstyle.cssに書き込む名称とは合わせてください。
<div class="gad"> <!-- ここにGoogleアドセンスのコードをコピペ --> </div>
対処手順2 style.cssを上書きする
style.cssにおいて、背景の青色の影を無くすと定義します。Twenty sixteenはワードプレスの公式テーマですので、style.cssを直接修正するとアップデートのたびに上書きされ効果が消えてしまいます。これを防ぐために、子テーマを作成し、そこに追記することをおすすめします。
.gad ins {
background: transparent;
padding: 0;
}
青い影は無事消えましたでしょうか？
