ユーザースタイルシートを使って Google 検索を見やすく

Google 検索を見やすくしてくれるユーザースタイルシートを Liner Note さんが公開している。これがとても使いやすい。これを適用すると、検索結果の表示が以下のように変化する。

通常の Google 検索

Liner Note さんの CSS 適用後

検索結果の各項目に番号が付き、検索フィールドが右下に固定 (フロート) 表示される。さらに検索フィールドは、フォーカスがあるとき以外は半透明になり、検索結果の閲覧を妨げない心憎い仕様だ。Autopagerize (Safari 用は oAutopagerize として公開されています) を使っている場合は、表示が最適化されるし、検索フィールドが常に右下に表示されるので、ぐりぐりとスクロールして一番上まで戻らなくて良いのが快適だ。

とても完成度の高いすばらしい CSS だが、残念なことに Safari では使えない。なぜかというと、 Firefox 仕様の @-moz-document という、特定のサイトを見分けて CSS を適用するためのルールを使用しているからだ。Safari はこれに対応していない。しかし、このルール以外は基本的に普通の CSS だ。では、このルールを外してみてはどうか。やってみた。

Safari に適用する手順

前提条件: hetima.com さんの SafariStand をインストールしていることが不可欠だ。@-moz-document を使用できない代わりに、SafariStand の Site Alteration 機能を使って、Google 検索だけに CSS を適用させる。

1. まず、Liner Note さんのページにアクセスして、CSS をコピーし、テキスト・エディターに貼り付ける。
2. コピーした CSS から、2-3行目と最後の行を削除する。
   
3. ファイルに適当な名前を付け、ホーム/ライブラリ/Safari/Stand/UserStyleSheets に保存する。
4. 次に Google 検索の検索結果 (内容はなんでもよい) を表示し、その状態で SafariStand の設定を開く。
5. Site Alteration を選択し、左下の [Add] をクリックする。
6. [Alter: User StyleSheet Location] にチェックを付け、ドロップダウンメニューから、先ほど保存したファイルを選択する。
   

これで完了だ。Google の検索結果表示がこんな感じになる。

なお、この設定を試す人は自己責任で。

※補足: Google検索のHTML構成はときどき変わるので、CSS もアップデートされることがあります。うまく表示されなくなったらアップデートを確認してみましょう。