わーくあうと!

日々の作業でためになったことをアウトプットすることで自分の成長につながればなと。

ブログのデザイン変えました

昨日の予告(?)どおりブログのデザイン変えました。
基本的には、用意されているテーマの【ugomemo-wood】なのですが、左カラムが小さすぎて見にくかったので少し大きくしたりはてブのコメント一覧を見れるようにしたりと細かいことを色々とやっていた。

左カラム大きくした

ugomemo-woodを使っている人とかならわかると思うんですが微妙に左カラムのサイズ大きくなってるんです。
テーマ一覧を見てて、このugomemo-woodがかなり気に入ったんだけど、どうしても横のサイズが小さい(820px以内に収まってる)のが許せなかった。だってなんか全体の幅の狭いブログって古臭く感じませんか?ということで100px増やした。
でもサイズ変えたら背景画像とかも変更しなきゃいけなかったりで地味に大変だった。これだけ労力を使うなら全てcssで角丸再現してリキッドデザインに作り替えたほうが最終的には良かったのかもしれない。

角丸css

このテーマ、基本的にbackground-imageで角丸の画像を指定して作られているのですが、途中から画像を作り替える作業が面倒になってきたのでいい機会だと思ってプロフィールページとかでちょっと角丸css試してみました。
角丸cssを試したのは今回が初だったのですがめちゃくちゃ便利でした。この記事とかが参考になりました。
自分が現役webデザだった頃は角丸にするには画像を用意して配置して〜ってかなり面倒な作業だったんで、それと比べると便利すぎてうんこ出そうになった。
あ、ちなみにIEは9以前は完全シカトです。はてなダイアリーをカスタムするときjsを素直に使わせてもらえなくて、css3未実装ブラウザの対応が面倒だったので見捨てました。

はてブコメントパーツ

はてなブックマークコメントのパーツのcssを変える時はこのページが参考になった。基本的には「!important」で指定しないとダメぽらしい。

気づいたこと

はてなダイアリーの有料オプションで「ヘッダーの非表示」ってあるけど、css

div#simple-header{
    display: none;
}

とか指定したら消せるよね?まぁseoがなんちゃらとかの悪影響はあるのかもしれないけど。

最後に

最後にbefore afterのスクリーンショットでも貼って終わりにします。
▼before
f:id:ccoo_nick:20101205185546p:image
▼after
f:id:ccoo_nick:20101205185547p:image

それでは〜