Habakiri は日本語サイト向けに開発されたテーマ、というわけではありませんので、そのまま日本語サイトで使用すると余白がきつめだったり、見出しのサイズが少々大きすぎたりします。そこで、僕が日本語サイトで Habakiri を使う際によく使う CSS をまとめておきたいと思います。フォント周りは好みで結構いろいろだと思いますので、適宜変更されてください。
body {
/* ゴシック体の場合 */
font-family: "Roboto", "Droid Sans", "游ゴシック", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "MS Pゴシック", sans-serif;
/* 明朝体の場合 */
font-family: "Roboto", "Droid Sans", "游明朝", "YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "MS P明朝", "MS 明朝", serif;
line-height: 1.8;
font-weight: 500;
}
p, ul, ol, dl, table {
margin-bottom: 20px;
}
h2, .h2 {
font-size: 26px;
margin: 40px 0 20px;
}
h3, h3 {
font-size: 22px;
}
font-family
は、Windows にも Mac にも搭載されている游書体をベースにしています。Android の場合は Android 用のフォントを指定していないと丸っこいフォントになってしまうようだったので、Android 用に Roboto と Droid Sans を指定しています。また、Android には明朝体のフォントが無いので、明朝体の場合にも同じフォントを指定しています。