Hatena::agenda

CSS、HTML、XHTML、XML、DOM、XSLT、XPath、ECMAScript、Python、ウェブユーザビリティ、その他に関連する文書等のリソースを挙げていったりします。より本質的な議論を志向。
注意:Hatena::agendaの更新は終了しています!過去の記事はagenda のホームページよりどうぞ。今後の更新情報の取得は、agendaのフィード(XML/Atom)から。

 | 

2007-08-31 Googleをマルチカラム環境に最適化する

CSS3のマルチカラム(草案)の先行実装を利用すると、Googleの検索結果がモニタ上で一望できる。それに伴ってGoogleナビゲーションその他の位置も最適化してみた。

  1. 「次へ」という最も利用する頻度の高いナビゲーションは常に右上に表示しフォントサイズも巨大にしてクリックしやすくする。
  2. ついでにアクセスキーも設定してキーボードで操作しやすくしておく。
  3. 検索結果のステータス(「100件中 1 - 10件 何秒」とかいうあれ)は縦幅を取って邪魔なので、ブラウザのステータスバーに移動させる。
  4. ログイン情報が縦幅を奪う理由は何もないので、最下部へ移動していただく。

滅多に褒めてくれないうちの嫁さんも「いいね」って言ってた。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;
}
 |