ku-sukeのブログ

Just another hatena blog

はてなダイアリーのデザインカスタマイズのメモ

一段落したので後学のためにメモを残しておきます。ちなみに僕はデザイナーでもコーダーでもフロントエンドエンジニアでもないので素人意見です。

実装した内容・方針

  • 3カラムでリキッドにしたい
  • 透過を使ったデザインにもチャレンジしたい
  • 緑ベースのパステル系統から赤を基調としたビビッドな感じにしたい
  • Safari 3で正しく表示されればよしとする
    • IE?なにそれ。「いえ」ですか?w

デザイン

  • 手書きでラフを描く。3カラムの線を引いて、ロゴをでかくしようとかいろいろ考える。
  • テイストや配色はココを参考に:30 Red Websites
  • フォントはMyriadにしようかとも思ったけど、無難にHelvetica(及びneue)にしました
  • アイコンはモノトーンのものを探してたら、モノクロ+赤があったので採用しました。

コーディング

  • リキッド3カラムはこちらを利用しました。感謝です:The Blog Style 3 column Liquid Layout. Pixel widths. Cross-Browser. Equal Height Columns.
    • 適用してみたら、いいかんじ!さすが。
  • 透過を利用したデザインを実践するために.hatena-bodyに背景を設定。
    • でもなぜかでない。floatさせた要素を囲ったボックスの背景が出ない問題なのでoverflow:hiddenで乗り切る。
  • ところがIEは表示されないので、height:1emを利用

IE対策

さてできたとおもって、IE8で見たら悲惨でした。もともと6は無視するつもりだったけど7/8でも崩れるってどういう事?とおもって調べたら、はてなのDOCTYPEは後方互換になっちゃうよ!!ということがわかった。IE7/8で、モダウンブラウザだけ考えればいいやという夢はあっさり崩れました。

はてなのIE対策がしんどいところ

  • DOCTYPE宣言をいじれない。
    • 標準準拠モードでがんばれない
  • js使えない
    • jsで調整するハックが使えない
  • CSS切り替えの<!-- [if IE]>が使えない
    • IEの6/7/8の区別がつかない

後方互換モードのレンダリングはさんざん語り尽くされているので割愛しますが、ボックスのサイズ計算狂うし、floatとか組み合わせると僕のような素人ではどうにもできなくなってしまいます。途中ちょっと頑張ろうとしたら、本文が縦スクロールできなくなっちゃう(overflow:hiddenのせい)とか、3カラムのためにネガティブマージン使ってたらそのまま反映されて画面外に描画されたりと大変な感じでした。

また、よくわからないんだけど、backgroundの指定で、repeat-y top rightの画像が表示されなかったのでIEだけあきらめてスターハックを使って、背景真っ白に仕上げました。自分のブラウザでキレイに見えればよしとしましょうw