【はてなブログ】CSSでステマ規制対策
話題のこれ。
令和5年10月1日からステルスマーケティングは景品表示法違反となります。 | 消費者庁
ブログにもアフィリエイト広告を貼るなら、広告とわかるように一言添えなければいけなくなった。
すべての投稿にアフィリエイトを貼っているわけではないけれど、だからと言ってひとつずつ記事をチェックするのも面倒だから、CSSですべての投稿の先頭に文面を追加することにした。
環境
- はてなブログ(テーマ:Reach)
- レスポンシブデザイン有効
追加した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がなぜか読み込まれず反映されなかった。なので対応しているデザインに変更するところからだったので、ちょいと面倒だった。