Googleをマルチカラム環境に最適化する
CSS3のマルチカラム(草案)の先行実装を利用すると、Googleの検索結果がモニタ上で一望できる。それに伴ってGoogleナビゲーションその他の位置も最適化してみた。
- マルチカラムで表示したGoogle検索結果(約65kb, 16色png画像)
- 「次へ」という最も利用する頻度の高いナビゲーションは常に右上に表示しフォントサイズも巨大にしてクリックしやすくする。
- ついでにアクセスキーも設定してキーボードで操作しやすくしておく。
- 検索結果のステータス(「100件中 1 - 10件 何秒」とかいうあれ)は縦幅を取って邪魔なので、ブラウザのステータスバーに移動させる。
- ログイン情報が縦幅を奪う理由は何もないので、最下部へ移動していただく。
滅多に褒めてくれないうちの嫁さんも「いいね」って言ってた。greasemonkeyスクリプトとユーザースタイルシートで実現している。
先日のユーザースタイルシートに少し指定を加えた:
@-moz-document domain("www.google.com"), domain("www.google.co.jp") {
body {margin: 0; padding: 0 }
div#res{
-moz-column-width: 25em;
-moz-column-gap: 1em;
}
.purlOrgJintrickNext b{
font-size: 30pt !important;
}
div#res table {
width: 100%;
}
#mbEnd{ display: none; }
}
追記:長いURL対策
Google検索結果には緑色の文字でURLが表示されていて、ウェブページの信頼性を判断する基準として利用できるのだが、これが長すぎると折り返されず、隣のカラムにはみ出して重なってしまう。これを防ぐためoverflowプロパティを追加指定した。
/* 緑色のURL部分 */
span.a{
display: block;
overflow-x: auto;
overflow-y: hidden;
}