【WordPress】Googleアドセンス レスポンシブ広告の黄色い余白をなくす方法
Googleアドセンスが承認された時のことをメモしておきます。
随分の前の事になるのですが、私がGoogleアドセンスを取得し初めてブログに広告を張り付けた時のことです。
ちょっと待て！なんかおかしいぞ！
なんか広告に黄色い余白ができてるんだがこれは一体…
レスポンシブ広告に表示される黄色の余白
この現象はどうやら「レスポンシブ広告」を使用しているときに起こる現象のようですね。
Googleアドセンス広告には幾つか種類があるのですが、この「レスポンシブ広告」は様々なサイトやデバイスによってその広告のサイズを調整してくれる、物凄くお利口さんな広告なのです。
様々な状況に合わせてサイズを変えてくれるので、状況に合わせたサイズの広告を一個一個用意しなくてもいいんですね(*’▽’)
ただこの「レスポンシブ広告」、ご覧の様に表示可能なサイズまで黄色い枠が表示されており、このサイズにぴったりな広告が表示されれば問題ないのですが、この枠より小さな広告が表示された場合、黄色い枠が余白として出てきてしまうんです。
なんだか見た目がよろしくないですよね…(´・ω・`)
このままではいけません！何とかしてこの邪魔な部分を消さなきゃ！(｀･ω･´)
黄色い余白を消す方法
調べてみたら結構簡単に消せました!(^^)! 早速その方法をメモしておきますね。
今回はスタイルシートを使った方法です。
mark, ins {
background: transparent;
text-decoration: none;
}
スタイルシートにこのコードを記入しただけで黄色の余白は無事に消えました(*´▽｀*)
「transparent」の記述は「透明色にせよ」との命令です。つまり「背景を透明にせよ」と記述してるんですね。
でもなんでこんな黄色の余白がでてくるんでしょうかね？
黄色い余白の原因
この黄色い余白の原因は、使用しているテーマのCSSのinsタグの背景色設定によるものらしいです。
え？どういうこと？insタグってなんぞや？
＜INS＞はInsertの略で、＜INS＞～＜/INS＞で囲まれた部分が後から追加された部分であることを示します。追加の理由やコメントの文書がある場合には、そのURIをcite属性で指定しますが、内容が簡単な場合にはtitle属性で記述する方法もあります。
うむ！よく分からん！！(｀･ω･´)
少なくとも、Googleアドセンス広告はinsタグで記述されており、これがお使いのWordPressテーマスタイルによっては「insの背景が黄色」って設定されてることで発生する現象のようですね。
どうやらテーマによっては青色として現れることもあるようです。
まとめ
- 「レスポンシブ広告」を使用していると、テーマによっては黄色い余白が出現する
- 黄色の余白はスタイルシートのintタグが原因
- スタイルシートのintタグ、背景色を透明化することで黄色の余白は見えなくなる
