Google 検索結果の未読/既読リンクの色を見やすくする

• By attosoft
• Posted in Web
• On November 2, 2011
• 5 Comments.

目次

• 経緯など
• カスタムスタイルシート (ユーザースタイルシート)
  • 参考：未読/既読リンクの配色サンプル
• 主要 Web ブラウザーごとの設定方法
  • Internet Explorer
  • Mozilla Firefox
  • Google Chrome
  • Opera
  • Safari
• カスタマイズ結果
• 関連リンク

経緯など

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 ファイルをダウンロード。

• Custom.css

※ CSS ファイル名は適宜変更する。Mozilla Firefox なら userContent.css, Opera なら user.css など。ただし Google Chrome の場合は Custom.css から変更しない。

参考：未読/既読リンクの配色サンプル

	基本16色 (標準16色)	Google	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
• Mozilla Firefox
• Google Chrome
• Opera
• Safari

Internet Explorer

1. [ツール] ボタン – [インターネット オプション] をクリック
2. [全般] タブ – [デザイン] – [ユーザー補助] ボタンをクリック
3. [ユーザー スタイル シート] – [自分のスタイル シートでドキュメントの書式を設定する] をチェック
4. [参照] ボタンをクリックして CSS ファイルを選択

• カスタム スタイル シートを使って Web ページの書式を設定する – マイクロソフト アクセシビリティ
• 独自のスタイル シートを使用して Web ページの書式を設定する – Windows 7 ヘルプ
• 独自のスタイル シートを使用して Web ページの書式を設定する – Windows Vista ヘルプ

Mozilla Firefox

1. プロファイルフォルダーにある chrome フォルダーを開く (ない場合は作成する)
2. 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

1. “User Data/Default/User StyleSheets” フォルダーを開く
2. “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

• ユーザーデータ（設定など）の保存先はどこ？ – Google Chrome まとめWiki
• User Data Directory – The Chromium Projects

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 ファイルを指定する。

1. [Opera] メニュー – [設定] – [設定] をクリック
2. [詳細設定] タブ – [コンテンツ] – [スタイルオプション] ボタンをクリック
3. [ユーザースタイルシート] – [選択] ボタンをクリックして CSS ファイルを選択

• ユーザースタイルシート – Opera Wiki
• Opera: User CSS

Safari

1. Safari の設定ボタン (右上にある歯車アイコン) – [設定] をクリック
2. [詳細] タブ – [スタイルシート] – [その他] を選択して CSS ファイルを選択

カスタマイズ結果

カスタムスタイルシート (ユーザースタイルシート) を適用した後の検索結果画像は次のようになる。画面をスクロールしながらでも、どれが未読/既読リンクかが一目で把握できるようになった。

関連リンク

• 他のサイトでは全く問題無いのですが、googleの検索結果だけ、ここ数日でいつの間にか既読リンクの色が未読リンクの色と見分けがつきにくくなりました。どうにかなりませんでしょうか。 – ウェブ検索 公式ヘルプフォーラム
• SafariやChromeでGoogleのリンク色をカスタマイズする方法 | Stocker.jp / diary