はてなダイアリーのデザインをカスタマイズしてみる（２）

ゼロからデザインするのは面倒だとわかったので、「Hatena」といういちばんシンプルなテーマをベースにしてカスタマイズしてみる。色いろ CSS の効果を確かめるのに、Chrome のデベロッパーツールがとても便利なことがわかった。

スタイルシートはこんな風にしてみた。

body {
    background-color: lightyellow;
}
h1 {
    font-size: 26pt;
    font-style: italic;
}
h1 a {
    color: peru;
    text-shadow: darkgray 3px 3px;
}
div.section {
    padding: 10px;
    border: 1px solid lightgreen;
}
div.body {
    border: 1px solid lightgreen;
}
h2 {
    background-color: lightgreen;
}
h2 a {
    text-decoration: none;
}
.body h3.title {
    border-left: 9px solid lightgreen;
}
.body h3 a {
    color: slategray;
}
a {
  color: darkgreen;
}
div.body blockquote {
    border: 1px solid lightgreen;
}

div.hatena-module-section li {
    margin-bottom: 5px;
}

スクリーンショットはこんな感じ。