nautilus notes

最近は主にObsidianのこと

アドセンスの枠に外枠をつける方法(背景を透過させるのは微妙な気がする)

デフォルトだと、こういったときに黄色の背景が表示されるのだけど、これがかなりダサい。

  • アドセンスの広告サイズが微妙なとき
  • 広告の読み込み待ちのとき

なんとかしようとおもってググってみると背景を透過にする方法がたくさん紹介されているのだけど、実際に透過にしてみると広告の読み込み待ちのとき「なにも表示されていないように見えるが、押すと広告に遷移する」というかなりevil寄りの挙動になってムムムと感じた。

こういうのはwebサイトのデザインに合わせるのがよいと思うので、あまり悪目立ちせず、かといって広告の枠が分かりにくくならないように、透過させたうえで外枠を表示させることにしてみた。

具体的には、こんなかんじでHTMLをいじればいい。肝心の部分は「background-color:transparent;border: solid 1px」のところ。

(前略)
<ins class="adsbygoogle"
     style="display:block;background-color:transparent;border: solid 1px"
(後略)

この記事を書いてから僕が設定をいじっていなければ、どんな感じで表示されるかはこのブログのPC版サイドバー(と多分記事の下)で見れると思う。