オープンソースの画像生成AIをセットアップから使い方まで解説する『Stable Diffusion AI画像生成ガイドブック』（ソシム刊）発売中（→本のサポートページ）

はてなブログの本文中に差し込まれる広告を見分けやすくするCSS

hatena

最近のGoogle広告にはブログの本文の途中に差し込まれるものがあり、記事と広告の区別がわかりづらいことがある。PCからの閲覧時に広告が目立つよう、下のようなCSSをしつらえた。

div.entry-content div.google-auto-placed.ap_container {
    margin: 4em 0;  /* 広告と本文との上下間隔を広くとる */
    padding: 2em 0; /* 広告の上下に広告領域の背景色が見える場所を作る */
    background-color: rgb(0 0 0 / 0.1); /* 背景色の指定。透明度10%の黒 */
    border-radius: 5em; /* 背景色の領域に大きめのRをつけて目立たせる */
}
これが
こんな感じになる（画像処理ソフトで制作したイメージです）

広告と本文がよりはっきり分離されて、だいぶわかりやすくなったのではないだろうか。

丸みのある背景色の領域は、黒を透明度10%で敷いた。単に薄いグレーを指定するとブログの背景色に溶け込んでしまうことがある。そこでブログの背景色に10%のグレーが追加されるようになっている。

上のCSSを、Stylusなどの拡張機能を使って以下のドメインに設定する。独自ドメインのはてなブログにこのCSSを適用させたい場合は追加する。

  • hatenablog.com
  • hatenablog.jp
  • hatenadiary.com
  • hatenadiary.jp
  • hateblo.jp

Stylusの設定画面ではこんな感じ。

Stylusの使い方については、下の記事で少し解説している。