Google 検索結果の未読/既読リンクの色を見やすくする
目次
経緯など
1, 2 ヶ月ぐらい前から Google 検索の検索結果ページの配色が変更され、未読リンクと既読リンクの色の違いが分かりにくくなった。ディスプレイの種類や設定などにもよると思うが、少なくとも自分の環境では未読/既読リンクが実際に見分けにくくなった。特に Google 検索で情報収集するような場合は、画面をスクロールさせながら未読リンクのみをぱっと見で拾い上げるため、未読/既読リンクの色が近いと非常に使いづらいことになる。
たとえば以下の検索結果画像でどれが未読/既読リンクかは一応分かるが、画面をスクロールさせながらだとかなり分かりづらい。おそらく色弱 (色覚異常) の人はもっと分かりにくいと思うし、何より WCAG の識別可能性 (Distinguishable) への違反で Web アクセシビリティ的にアウトだと思う。
しばらくガマンしていたけどそろそろストレスがたまってきたので、Google 検索結果の未読/既読リンクの色をカスタマイズすることにした。ただ、これだけのためにブラウザ拡張を導入するのは何となく嫌なので、カスタムスタイルシート (ユーザースタイルシート) を利用してみる。
カスタムスタイルシート (ユーザースタイルシート)
Google 検索結果ページの未読/既読リンクの色を変更する場合は、次のようなスタイルを適用する。
div#search a:link { /* color: blue !important; /* default: #12C */ } div#search a:visited { color: purple !important; /* default: #61C */ }
指定する color 値は好みなどに応じて適宜調整する。記述が面倒という人は、以下のリンク先から CSS ファイルをダウンロード。
※ CSS ファイル名は適宜変更する。Mozilla Firefox なら userContent.css, Opera なら user.css など。ただし Google Chrome の場合は Custom.css から変更しない。
参考:未読/既読リンクの配色サンプル
基本16色 (標準16色) | Bing | Yahoo! | ||
---|---|---|---|---|
a:link | blue (#00f) | #12C | #04C | #0E1BBB |
a:visited | purple (#800080) | #61C | #639 | #4C2472 |
表示例 |
未読リンク 既読リンク 未読リンク 既読リンク |
未読リンク 既読リンク 未読リンク 既読リンク |
未読リンク 既読リンク 未読リンク 既読リンク |
未読リンク 既読リンク 未読リンク 既読リンク |
※ 上記の表示例では Google, Bing, Yahoo! 間で未読/既読リンクの見やすさ (見にくさ) に大差ないように見えるけど、実際の検索結果ページではなぜか Google だけ未読/既読リンクの見分けが付きにくくなる。フォントスタイル (font-family, font-size, font-weight など) やそのほかの要素 (URL や説明など) が影響しているのかも。
主要 Web ブラウザーごとの設定方法
Internet Explorer
- [ツール] ボタン – [インターネット オプション] をクリック
- [全般] タブ – [デザイン] – [ユーザー補助] ボタンをクリック
- [ユーザー スタイル シート] – [自分のスタイル シートでドキュメントの書式を設定する] をチェック
- [参照] ボタンをクリックして CSS ファイルを選択
- カスタム スタイル シートを使って Web ページの書式を設定する – マイクロソフト アクセシビリティ
- 独自のスタイル シートを使用して Web ページの書式を設定する – Windows 7 ヘルプ
- 独自のスタイル シートを使用して Web ページの書式を設定する – Windows Vista ヘルプ
Mozilla Firefox
- プロファイルフォルダーにある chrome フォルダーを開く (ない場合は作成する)
- chrome フォルダー内に userContent.css ファイルを作成する
※ 一般的にはプロファイルフォルダー (xxxxxxxx.default) のパスは次の通り。
- Windows 2000, XP
- C:\Documents and Settings\[User]\Application Data\Mozilla\Firefox\Profiles
- Windows Vista, 7
- C:\Users\[User]\AppData\Roaming\Mozilla\Firefox\Profiles
- Linux
- ~/.mozilla/firefox
- Mac OS X
- ~/Library/Application Support/Firefox/Profiles
- プロファイル – Mozilla Firefox まとめサイト
- プロファイル | 操作方法 | Firefox ヘルプ
- userContent.css – Mozilla Firefox まとめサイト
- Firefox 4.0 からは、chromeフォルダが無くなった :: Firefox Fan Club + More Browsers
Google Chrome
- “User Data/Default/User StyleSheets” フォルダーを開く
- “User StyleSheets” フォルダー内にある Custom.css ファイルを編集する
※ 一般的には “User Data” フォルダーのパスは次の通り。
- Windows 2000, XP
- C:\Documents and Settings\[User]\Local Settings\Application Data\Google\Chrome\User Data
- Windows Vista, 7
- C:\Users\[User]\AppData\Local\Google\Chrome\User Data
- Linux
- ~/.config/google-chrome
- Mac OS X
- ~/Library/Application Support/Google/Chrome
Opera
以下の場所にある styles フォルダー内に user.css ファイルを作成する。
- Windows Vista, 7
- C:\Program Files\Opera\styles
- Linux
- /usr/share/opera/styles
- Mac OS X
- /Applications/Opera.app/Contents/Resources/styles
あるいは以下の手順で任意の CSS ファイルを指定する。
- [Opera] メニュー – [設定] – [設定] をクリック
- [詳細設定] タブ – [コンテンツ] – [スタイルオプション] ボタンをクリック
- [ユーザースタイルシート] – [選択] ボタンをクリックして CSS ファイルを選択
Safari
- Safari の設定ボタン (右上にある歯車アイコン) – [設定] をクリック
- [詳細] タブ – [スタイルシート] – [その他] を選択して CSS ファイルを選択
カスタマイズ結果
カスタムスタイルシート (ユーザースタイルシート) を適用した後の検索結果画像は次のようになる。画面をスクロールしながらでも、どれが未読/既読リンクかが一目で把握できるようになった。
助かりました。本当にありがとうございます。
コメントありがとうございます。
お役に立ったようで何よりです。
Google Chromeで困っていたので助かりました。
1つ疑問があるのですが、Custom.cssの「Purple」を「Red」に置き換えて使用しています。「#61C 」って何か意味があるのでしょうか?。Redは別の値に変更しなければならないのでしょうか?
コメントありがとうございます。
おそらく CSS の書き方に関する質問になるかと思います。
CSS では /* … */ の部分はコメントになりますので Custom.css で意味のある部分は
となります。つまり「/* default: #61C */」という部分は「デフォルト色が #61C」という参考情報に過ぎません。また CSS では色をキーワードまたは RGB (赤緑青) で指定しますので “Red” を別の値に変更する必要は特にありません。
早速のご回答、感謝です。
なるほど、疑問が解けました!
ありがとうございました。