Safari 3.1のWebインスペクタがいい感じ。（デザイン変更中）

　前のデザイン（blue-borderに無理矢理サイドバーを追加）もなんだか飽きたので、毎日夜中にちまちま変更作業をしてました。ヘッダとフッタとCSSをそれぞれテキストファイルに保存して、1箇所変更を加えるごとにプレビューボタンを押して確認しながら漸進するという非効率さ。で、ようやく本文部分が見られる感じになったので移行。サイドバー部分はぼちぼちやります。

　今回は「hatena_light-green」をベースに、CSSでごりごり。色々細かく変えているので、比較すると違いがわかりやすいかと。

　まあ、非効率は非効率だったわけだけど、役に立ったのが、Safari 3.1から［開発］メニュー*1で呼び出せるようになったWebインスペクタ。コンテキストメニューの［要素の詳細を表示］から呼び出せば、HTMLの各要素に与えられているスタイルが、どのスタイルシート（はてな全体、はてなヘッダ、はてなテーマ、ユーザ設定、ブラウザ設定）に由来するものなのか、継承関係はどうなっているかなどが、一目瞭然になる。おかげでどのタグのどのクラス（もしくはid）のスタイルシートを変更すればいいのかを把握するのが楽でした。

　…でもなんか、ヘッダに埋め込んであるスタイルシート（ユーザ設定）より、外部スタイルシート（はてなテーマ）を優先してレンダリングしてるっぽい部分があるんだよなあ。気のせいかな。そのせいで「!important」使わないと解決しない部分があったんだよね。

（追記）自己満足的にSafariでしかチェックしてないので、ほかのブラウザ（特にIE）でどうなっているかは知りません…と書こうと思ったけど、いちおうFirefox 3β5でチェックしてみた。やっぱりテキストレンダリングが微妙。「text-shadow」も効かないのね。

*1:環境設定の［詳細］パネルで［メニューバーに"開発"メニューを表示］にチェックを入れると出現