最近、調べ物をしようとGoogle検索した時にキュレーションサイトなどの役に立たない、あるいは他のサイトの情報をまとめただけのサイトばかり上位に表示されてしまい、ストレスがたまることが多くなってきました。
そこで、検索結果のCSSを上書きしてキュレーションサイトなどを半透明で表示し、ついでに記事が書かれた日付や「未指定」などを目立つようにカスタマイズしました。
※ このスクリーンショットは、この記事でできるGoogle検索結果のカスタマイズ例です。1件目のNAVERまとめは半透明に、2件目の記事ははてなブックマーク数、サムネイル、記事が公開された日付を目立たせるなどして「役に立つページかどうか」を判断するヒントをわかりやすくしています。
検索結果から特定のサイトを非表示にする拡張の問題点
最初は、Google公式の Personal Blocklist という「検索結果から特定のサイトを非表示にするChrome拡張」を使用していたのですが、そうすると検索結果の1ページ目はキュレーションサイトばかりなのでほとんど何も表示されず、代わりに［Personal Blocklist 拡張機能によって一部の検索結果が除外されています。 (表示)］と表示されとても気になってしまい、結局［表示］をクリックしてしまうなど無駄な時間が発生するようになってしまいました。
完全に非表示にするのではなく、CSSを上書きして半透明で表示する
そこで、完全に非表示にするのではなく、CSSを上書きするChrome拡張を使用し、特定のドメインを含むリンクを半透明で表示させることにしました。
これで、「リンクをクリックしてがっかり」ということがだいぶ減りました。
CSSを上書きするChrome拡張
CSSを上書きするためのChrome拡張はいくつかありますが、私は Stylebot を使用しています。
もちろん、他のChrome拡張や、他のWebブラウザー向けのCSS上書きアドオンなどを使用しても同じことができるはずです。
設定方法
Stylebot をChromeにインストールしたら、適当なキーワードでGoogle検索結果のページを表示させます。
そして、アドレスバーの横に表示された［CSS］ボタンをクリックし［Open Stylebot］をクリックします。
すると、検索結果の右側に↓のようなものが表示されるはずです。
その表示の下の方にある［Edit CSS］ボタンをクリックします。
ここには CSS を記述することができるので、例えば以下のように書いてみます。
a:visited {
color: gray;
}
すると、訪問済みリンク（a:visited）の色が灰色（gray）で表示されるはずです。
Google検索結果は、なぜか未訪問と訪問済みリンクが同じような色で表示されることがあるので、私は訪問済みリンクを灰色にしています。
ドメイン名を指定して半透明にする
例えば、あるページのURLが http://example.com/ のようになっている時、example.com の部分をドメイン名と呼びます。
昔のCSSではドメイン名を指定してスタイルを当てるということができなかったのですが、最近のWebブラウザーはCSS3をサポートしており、CSS3では以下のような指定ができます。
a[href*="example.com"] {
opacity: 0.3;
}
例えば、http://example.com/ へのリンクはHTMLでは <a href=”http://example.com/”>文字列</a> のように書くのですが、CSS3のセレクター（{} の前の部分）に a[href*=”example.com”] と書くと、href=”” の “” の内側に example.com という文字列を含むものにマッチします。
この書き方の場合、http://example.com/index.html のようなURLだけでなく、はてなブックマークのエントリーページのように http://b.hatena.ne.jp/entry/s/example.com/ のようにドメイン部分でない箇所に example.com という文字列を含むリンクにもマッチします。
{} の内側の opacity: 0.3; は、リンクの文字列の不透明度を 30% にする（100% が不透明、0% が透明）という指定です。
先ほどのように color プロパティで色を指定しても良いのですが、先ほどのCSSの下にこのCSSを書いた場合、以下のようになるため分かりやすいかと思います。
未訪問でリンク先が example.com ではない: 青色
訪問済みでリンク先が example.com ではない: 灰色
未訪問でリンク先が example.com である: 薄い青色
訪問済みでリンク先が example.com である: 薄い灰色
設定例
ここに書いている設定例は、あくまでも設定の一例です。
ご自分が検索結果に不要と感じるサイトを適宜追加してください。
キュレーションサイトを半透明に
他のサイトの文章や写真を無断転載している「NAVERまとめ」や「キナリノ」「CASY」、いい加減な医療情報を提供している「WELQ」を半透明にする場合、以下のように設定します。
a[href*="matome.naver.jp"] {
opacity: 0.3;
}
a[href*="kinarino.jp"] {
opacity: 0.3;
}
a[href*="cafy.jp"] {
opacity: 0.3;
}
a[href*="welq.jp"] {
opacity: 0.3;
}
※ CSSを追加したら、忘れずに画面下の［Save］ボタンをクリックしてください。
家電会議、はてなキーワード、2ch、2chまとめなどを半透明に
家電などの型番を検索した時に出てくる家電会議、書名で検索した時に出てくるはてなキーワード、2chや2chまとめなどを半透明にするには、以下のように設定します。
（URLに「2ch」が含まれるものを全て半透明にすると、まれに無関係なサイトも半透明になります）
a[href*="kadenkaigi.com/product/"] {
opacity: 0.3;
}
a[href*="d.hatena.ne.jp/asin/"] {
opacity: 0.3;
}
a[href*="2ch"] {
opacity: 0.3;
}
検索結果にページのサムネイルを表示する
最初はキュレーションサイトなど役に立たないサイトを半透明にしていけばリンクをクリックしてがっかりすることも減るだろうと思っていたのですが、あまりにも数が多すぎてきりがないことに気付きました。
そこで、SearchPreview というChrome拡張を使用してサムネイルを表示することにしました。
しかし、この拡張はそのままだとリンクテキストだけがサムネイルの左に飛び出しているように見えて見づらいと感じました。
そこで、CSSを上書きしてリンクテキストの位置などを揃えます。
h3.r {
margin-left: 115px;
}
._Rm img {
left: 0;
position: absolute;
top: 16px;
}
._Rm img {} 部分は、本来URLの左に表示されるポピュレーション（有名なサイトかそうでないか）を示すバーをサムネイルの上の空いたスペースに持っていくためのCSSです。
はてなブックマーク数をサムネの上に移動する
はてなブックマークChrome拡張をインストールしていた場合、リンクテキストの後ろにはてなブックマーク数が［100 users］のように表示されますが、これもCSSの上書きでサムネイルの上に持っていくことができます。
.hBookmark-widget-counter {
left: 54px;
position: absolute;
top: 0;
}
ただし、このCSSを入れた場合検索結果のトップに「Googleニュースからのピックアップ」が表示された時にサムネイルとはてブ数がかぶって表示されることがあります。
テキストに色をつけて検索結果を見やすく
例えば、Web技術に関する検索をしていると古い記事はあまり役に立たないことが多いので、記事が執筆された日付は重要です。
そこで、以下のCSSを追加すると記事が執筆された日付部分を強調することができます。
.st .f {
color: crimson;
font-size: 16px;
font-weight: bold;
}
相対的に、リンクテキストの下に出てくる記事の抜粋部分はあまり目立つ必要がないと思っているので灰色にしておきます。
.st {
color: gray;
}
このCSSを追加すると、記事の抜粋内の太字部分は目立つようになり、関連する記事かどうかが分かりやすくなります。
そして、抜粋の下に表示される「未指定: キーワード」や「以前このページにアクセスしました。」を目立たせたい場合は以下のCSSを追加します。
._Tib {
color: crimson;
font-weight: bold;
}
はてなブックマークでも特定のサイトを半透明にする
はてなブックマークの人気エントリー でも、CSSの上書きで特定のサイトを半透明にできます。
例えば、はてな匿名ダイアリー、メタブクマ（ブックマークページをさらにブックマークすること）を半透明にするには、はてなブックマークの人気エントリー ページを開いてアドレスバーの横の［CSS］ボタンをクリックし［Open Stylebot］をクリックします。
表示の下の方にある［Edit CSS］をクリックし、以下のCSSを追加します。
a[href*="anond.hatelabo.jp"] {
opacity: 0.3;
}
a[href*="b.hatena.ne.jp/entry"] {
opacity: 0.3;
}
キュレーション、2chまとめなどを半透明に。
a[href*="matome.naver.jp"] {
opacity: 0.3;
}
a[href*="cafy.jp"] {
opacity: 0.3;
}
a[href*="kinarino.jp"] {
opacity: 0.3;
}
a[href*="2ch"] {
opacity: 0.3;
}
魚拓、Twitterの個別ツイートなどのブックマークはたいていの場合炎上なので、炎上ネタに興味がない場合は半透明に。
a[href*="megalodon.jp"] {
opacity: 0.3;
}
a[href*="twitter.com"] {
opacity: 0.3;
}
難しいのは「はてなブログ」系で、互助会などと呼ばれる仲間内でお互いにブックマークしあってホットエントリー入りした記事が多いのですが、そうではなく良い記事の場合もあります。
注意喚起的に、リンク色を茶色にした上で半透明にする場合は以下のようにします。
a[href*="hateblo"] {
color: brown;
opacity: 0.5;
}
a[href*="hatenablog"] {
color: brown;
opacity: 0.5;
}
a[href*="hatenadiary"] {
color: brown;
opacity: 0.5;
}
Feedlyで特定のサイトのリンクを半透明にする
Feedly というWebブラウザーで利用できるRSSリーダーで、特定のブログを購読するのではなくはてなブックマークのRSSや、Ceron（Twitterで話題になっているニュース）のRSSを購読している場合、自分が興味ないサイトやデマを撒き散らしているサイトが流れてくる場合があります。
特定のサイトを非表示にするには、まず Feedly にログインしてはてなブックマークなどの記事一覧を表示し、右上の歯車から［Title Only］をクリックします。
アドレスバーの横の［CSS］ボタンをクリックし［Open Stylebot］をクリックします。
表示の下の方にある［Edit CSS］をクリックします。
例として、オレ的ゲーム速報、はちま起稿などのデマが多いブログを半透明にするには以下のCSSを追加します。
a[href*="jin115.com"] {
opacity: 0.3;
}
a[href*="blog.esuteru.com"] {
opacity: 0.3;
}
まとめ
CSSを上書きする拡張というと、特定の要素を消す、文字を大きくするなどといった用途に使われることが多いかもしれませんが、このように色々なWebサイトでリンク先を目立たなくするなどの用途にも使えます。
以前は「Googleの検索結果から特定のサイトを消す拡張」「はてなブックマークから特定のサイトを消す拡張」「Feedlyから特定のキーワードを含むものを消す拡張」など個別に入れていましたが、1つにまとまったことで管理しやすく、ブラウザーも少し軽くなった気がします。
あと、この方法は Google Chrome だけでなく、Chrome拡張が動作する Vivaldi などのWebブラウザーでも使えます。
