すぐに忘れる脳みそのためのメモ

ラベル リンク の投稿を表示しています。すべての投稿を表示

2014年3月10日月曜日

ブラウザの「訪問済みリンク」色が変わらないサイトに対して、Stylish で強制的に既読リンクと未読リンクを区別する

1. 「未訪問リンク」「訪問済みリンク」の区別がつかないサイト

ブラウザでリンクを開くと、「未訪問リンク」が「訪問済みリンク」となる。

「訪問済みのリンク」を判別できるように、ブラウザにはデフォルトでリンク色が設定されている。

WORK NOTE BLOG » Blog Archive » デフォルトのブラウザのリンク色

ただし、サイトによってはブラウザのデフォルトの設定を上書きし、「未訪問リンク」と「訪問済みリンク」の区別がつかないことがる。これでは、後になってサイトをどこまで見たのか分からなくなる。

ユーザビリティやリピータの為に結構大切なa:visitedの色 | 無料SEO対策のススメによると、

次の日また見に来てくれればどのページまで見たのかが分かると思いますが、時間を置いて再び訪問した場合には、未訪問と訪問済が一発で識別できた方が便利だと思います。（時間が空きすぎると全て未訪問扱いになります。）

Firefox では、オプション > コンテンツ > フォントと配色 > 配色設定より、デフォルトの色を確認できる。

SnapCrab_No-0859

2. Stylish で「未訪問リンク」「訪問済みリンク」の色を設定する

SnapCrab_No-0868 Firefox, Google Chrome では、以下のアドオンを利用する。

設定の注意点は、:link、:visited、:hover、:active の記述順序とその覚え方 | jmblog.jp によると、

実はこの4つの擬似クラスの記述順序には注意が必要で、上記のように link、visited、hover、active の順番で記述しないと意図した結果にならなかったりします。

全てのサイトで有効な CSS

サイトごとに「未訪問リンク」「訪問済みリンク」色の設定が必要ないなら、以下のスタイルをインストールすれば良い。

⇒ 未訪問リンクと訪問済みリンク - userstyles.org

Firefox

Firefox で Stylish を使う方法は、以下を参照

Stylish で特定の要素を消す - CSS による要素の指定

Googe Chrome

Google Chrome に Stylish をインストールした後、「未訪問リンク」「訪問済みリンク」を設定したいサイトを開く。

Stylish のアイコンを右クリック > 「インストール済みのスタイを管理」

を選択する。

SnapCrab_No-0857

「新しいスタイルを作成」ボタンを押す。

SnapCrab_No-0858

スタイルを編集画面で、最初に適当に名前をつける。

コードに以下を記述する。

a:link { color:#0000EE; }
a:visited { color:#551A8B; }

次に、「個別指定」ボタンを押し、特定のサイトのみ有効にできる。

SnapCrab_No-0860

SnapCrab_No-0862

最後に、スタイルの保存ボタンを押す。

3. プライバシーの問題

プライバシーと :visited セレクタ - CSS | MDN

歴史的に、CSS の :visited セレクタは、getComputedStyle() や他の方法を使って、ユーザの履歴を調べてどのサイトが訪問されたのかを明らかにし、サイトからユーザの履歴を問い合わせることに使われてきました。

CSS の :visited に行われるプライバシー対策 | Mozilla Developer Street (modest)

長年にわたり、CSS の :visited セレクタはユーザの履歴を取得する経路となっていました。このセレクタ自体は特に危険ではありませんが、JavaScript の getComputedStyle() とともに使われることで、ユーザの履歴を詮索しどのサイトに訪れていたのかを知ることができるのです。

そして、これらはとても素早く行われます。テストでは、1分間で 210,000 もの URL を確認できたという結果が出ています。この割合でいけば、ユーザの履歴にブルートフォースを行う(訳注: 総当たり検索でユーザの訪問済みサイトリストを取得する)ことや、最低限でもフィンガープリンティングによるユーザの識別を行えてしまいます。ブラウザが履歴を長期間保存することもあり、ユーザの Web 上の行動をかなり把握されてしまうおそれがあります。