city [remodel]を好みに直してみる

はてな CSS

最近デザインを変えようとテーマを観ていて、オリジナルCSSのテンプレが大量にあることを今さら知る。
はてなのテーマは元になるCSSが書いていないから何を書き足せばいいのか全然わからない。公開デザインみたいにCSSが書いてあれば、知識がなくても適当に書き換えるうちに好みのデザインが作れるわけで。
今回選んだのは『city [remodel]』、白くてシンプルなデザインが今は好き。id:chepookaさんのデザインなら『breeze』とか白のベースにピンクが差し色になっているのも素敵。


city [remodel]
http://d.hatena.ne.jp/designset/1451

/*:: entry ::::::::::::::::::::::::::::::::::::::::::::::::::*/

h1 {
width: 82%→69%;


.hatena-body{
position: relative ;
width: 85%→70%;

ヘッダー画像の位置を調整、記事部分の幅を狭くした。全体（hatena-body）の幅を変えると、サイドバーの幅も自動で変わってしまうから後で修正。

/*:: entry ::::::::::::::::::::::::::::::::::::::::::::::::::*/

.main{
padding: 0px;
margin: 0 0→32% 0 27%→0;


/*:: sidebar ::::::::::::::::::::::::::::::::::::::::::::::::::*/

.sidebar {
position: absolute;
top: 19px;
left: 0px;→auto
right: 0px;
width: 24%→29% ;

サイドバーを左から右に移動、ついでに狭くなってしまった幅を広くする。全体の幅だけ小さくするとサイドバーが小さくなってバランスが悪いし、読みづらくなった気がしたもので。
これだけでも結構掛かった、1時間以上2時間未満？まあのめり込むとパズルでもやっているようで意外と楽しいし、それ以上に好きなデザインにできることがとても嬉しい。