はてダのデザイン

先日このブログのデザインを変更したので、そのまとめというか備忘録的に。
はてなダイアリーTipsスタイルシートでデザイン編とは - はてなキーワード
ここが詳しい・・・というか総本山。ここを見ればだいたい分かる。

で、実際どうやったのかというと結局は試しては修正し・・・の繰り返し。はてなダイアリーがbase.css*1というのとテーマCSSを読み込んでいる。base.cssだけにすると、カラム構造まで崩れてしまったりして基礎から書いていかないといけないので適当なテーマをかぶせてそれを修正していく感じがいいかと思います。ちなみに、今回採用したのがCityっていうテーマ*2。割とシンプルだったので採用させていただきました。
city.cssで指定している要素をソースを読みながら再指定していく要領です。

body {
background-color: black;
color: silver;
}

a {
color: white;
}

h1 {
font-size: 68px;
}

h1 a {
color: white;
}

h3 {
background-color: black;
}

h2 a {
color: white;
}

.body h3.title a {
  color: white;
  text-decoration: none;
}

.section {
background-color: black;
}

.main {
margin: 0 0 0 24%;
}

.sidebar {
width: 20%;
}

.hatena-module {
background-color: black;
}

.hatena-moduletitle {
background-color: black;
color: white;
}

.hatena-moduletitle a {
background-color: black;
color: white;
}

div.calendar {
color: silver;
}

div.calendar a {
color: white;
}

div.refererlist {
background-color: black;
}

div.comment {
background-color: black;
}

div.caption {
background-color: black;
color: white;
}

一応、CSSのソースを置いておきますね。だいたい前半が全体の設定で、後半がはてなのdivのクラス要素を指定しています

*1:http://d.hatena.ne.jp/css/base.css

*2:http://d.hatena.ne.jp/theme/city/city.css