2025年6月1日

それは広告です【Stylusで広告をマーキング】

カテゴリ：雑記

タグ：作ったもの

うちの母（70歳）は簡単なPC操作はできる人なのですが、何度教えても『Yahoo!のその部分は広告だ』ということが頭から抜け落ちてしまうらしく、何かしら検索してはいちばん上に表示される広告を何の疑いもなくクリックし、意図せずAmazonに辿り着いてしまったりして「？？？」となっているようです。

たまたまその現場に一緒にいれば「そこは広告だから！」と教えているものの、同じことをあんまり繰り返しているとどうしてもイラっとしてしまうので、Stylusで広告を広告と目立たせることにしてみました。

Stylusはブラウザの拡張機能で、もともとのページで設定されているデザインを自分好みにカスタマイズできるもの。Chrome版、Edge版、Firefox版があります。

Stylus – Chrome ウェブストア

Stylus でウェブのデザインを変更しましょう。これは、ユーザースタイルを管理するツールです。Stylus を利用すると、多くの人気サイト向けのテーマやスキンを簡単にインストールできます。

Stylus – 🦊 Firefox (ja) 向け拡張機能を入手

Firefox 向け Stylus をダウンロード。お気に入りのWebサイトをStylusでデザインしましょう。Stylusは、アクティブに開発されているコミュニティ主導型のユーザースタイル管理ツールです。有名なオンラインリポジトリからカスタムテーマを簡単にインストールしたり、あなたの個人用のCSSスタイルシートを作成したり、編集したり、管理したりすることができます。

Stylusがインストールできたら、Yahoo!の検索結果のURL『search.yahoo.co.jp』を指定し、以下のように設定します。

/* 広告を強調 */
.Ad__notImageExtension{background:#dfdfdf;padding:1em;border-radius:10px;}
.sw-Badge__text{font-size:130%;padding:0.2em;}

これでテキスト広告の背景がグレーに、『スポンサー』の文字が大きくなって、広告であるとわかりやすくなりました。
こんな感じ。

広告を目立たせるのではなく、 display:none; で非表示にすればいいのでは？とも考えましたが、別にYahoo!に限らず、ネット上って広告ばっかりじゃないですか（アフィリエイトをしてる私も人のことはあんまり言えない）。
そこの意識は忘れてほしくないなと思い、広告です！と目立たせるほうを選びました。

これでも広告であるという意識が抜け落ちてAmazonを開くようだったら、更なる悪目立ちデザインにするか、やっぱり非表示にするかも。とりあえず様子見します。

🍀にほんブログ村に参加しています。よかったら押していってくださいな。

こちらの記事もどうですか？
楽アフィレポートをカスタマイズしてみた
Affinity DesignerでCanva素材
お気に入りのビーズステッチ動画