ネリコは興味津々

気になったこと、調べたこと、雑記なんかを書いてます

【はてなブログ】CSSでステマ規制対策

話題のこれ。

令和5年10月1日からステルスマーケティングは景品表示法違反となります。 | 消費者庁

ブログにもアフィリエイト広告を貼るなら、広告とわかるように一言添えなければいけなくなった。

すべての投稿にアフィリエイトを貼っているわけではないけれど、だからと言ってひとつずつ記事をチェックするのも面倒だから、CSSですべての投稿の先頭に文面を追加することにした。

環境

追加したCSS

/* ad */
.entry-content::before {
  background-color: #000;
  color: #ccc;
  content: "アフィリエイト広告を利用しています";
  display: inline-block;
  margin-bottom: 10px;
  padding: 0.5em;
}

投稿本文の要素のクラス名が「.entry-content」なので、それに疑似要素「beore」を追加し、本文の前に表示されるようにしました。

見た目

タイトルと本文の間に追加されます。


もともとテーマは公式のReportを使っていたのだけど、レスポンシブデザインに対応してない。対応してないテーマだとスマホ表示のときに、追加したCSSがなぜか読み込まれず反映されなかった。なので対応しているデザインに変更するところからだったので、ちょいと面倒だった。