はてなダイアリーCSS変更

メモ

結構面倒だった。躓いたのは以下の点。

  1. Firefoxだと中央揃えOK、IEはダメ(端っこによる)
  2. タイトル画像が縦に細すぎ(上下が切れる)
  3. デザイン無しからだと、はまぞうの表示がかっこ悪い。

【 1 】
とりあえず中央揃えと幅を指定してやったつもり。

.hatena-body {
    margin: 0 auto;
    width: 800px;
}

でOKと思ったらIEではだめだったので、先駆者の知恵をお借りして修正。

body {
    text-align: center;
}
div.main {
    text-align: left;
}

body内ではIEの「Box要素もtext-align:center;で中央揃えされてしまう」バグを利用して中央揃えするが、記事本文まで中央揃えされるのはイヤなので、div.main内は左揃えにしたい、の意。

【 2 】
paddingの値をいじくったら、なんかわからんけど直った。

h1 {
    padding: 50px 0px;
}

指定前は1行分の太さ内だけ画像が表示されていたようで。

【 3 】
はてなのデフォルトデザインのCSSからコピペ。
画像のパスが通ってないようなので、あとで修正する予定。