Google AdSenseの検索広告で余計な枠線が出た時の対処法

2020-12-11

Google AdSenseの広告タイプの1つ、「検索広告」。

自分のサイトに検索エンジンツールを設置できるタイプの広告で、AdSenseで広告を作成して配色などを自由に編集する事ができます。

プレビュー機能もついているので至れりつくせりなのですが、実際にサイトにUPしてみると、なぜか検索広告に余計な枠線が表示されてしまっていました。

んん、なぜ??

ここでは、GoogleAdSenseの検索広告で、検索ツールのまわりに余計な枠線が表示されてしまった時の対処法を、備忘録がてらまとめておきたいと思います。

\項目をタップするとジャンプできます/

Google AdSense
検索広告の表示がおかしい!

まずは、どんな状態かというと、こんな感じ。

検索ツールまわりに余計な枠線が表示されてしまっています。

最初は検索広告のコードが古くなったのかもと思い、広告コード確認をしたのですが、全く問題なし。

AdSenseから編集できる検索広告のデザイン画面でも、おかしなところはありませんでした。

検索広告はjava scriptコードなので内部構造は分かりませんし、AdSenseの編集画面からデザインの変更もできるので、それ以上のカスタマイズをする必要もありません。

内部の問題かも? としばらく様子を見ていたのですが……。

ふと、あるページでは表示がおかしいのに、別のページではキレイに表示されているのを見て、こちら側の問題なんだとやっと認識しました。

原因を探すこと小一時間。

どうやらこの枠線、「table」「th」「td」タグに指定していた「border」が原因でした。

検索広告に余計な枠線が出た時は
CSSの「table」まわりをチェック

CSSで「table」などのタグを装飾する時は「class」をとおして施すのが基本ですが、うっかり「table」タグに直接「border」指定をしてしまっていたらしく、それが反映されていたものでした。

「table」まわりのタグに直指定されていた「border」を「table」を格納している「div」要素の「class」から指定するようにして、今回は解決しました。

HTML

<div class="t1">
  <table>
  <tr><th></th><th></th><th></th><th></th></tr>
  </table>
</div>
CSS【×】before

table, td, th{
  border: 1px #eee solid;
}

  ↓↓↓

CSS【○】after

.t1 table,
.t1 table td,
.t1 table th{
  border: 1px #eee solid;
}

検索広告の表示がおかしい時は
CSSを確認してみよう

完成形はこちら!

余計な枠線が消え、本来のすっきりした表示になっています。

Google AdSenseの検索広告はjava scriptコードなので内部構造はわかりませんが、どうやら「table」要素が使われているようです。

「table」タグなどは「class」をつけてデザインを管理することで、思わぬ干渉を避けることができるという、お手本のようなケースでした。

もしGoogle AdSenseの検索広告で意図しない枠線が表示される時には、一度CSSファイルで「table」まわりに「border」などの装飾指定がないか、確認してみるといいかも知れません。