はてなブログのカスタムCSSをゼロから書き直した

疲れた。

ちなみにモバイルのデザインはProに入ってないので変わってないです。
個人的には、モバイルはデフォルトのデザインが気に入っているのでいいかなと思っています。

公式テーマから流用した部分

ほとんどはゼロから書きましたが、CSSリセット、セレクタ、ClearFixは公式テーマから流用しました。
なのでゼロからではなくイチからぐらいです。

CSSリセット

公式テーマのCSSの冒頭に書いてあるのでそのまま残しておきます。

/* Reset CSS */
html,
body,
div,
span,
/*
略
*/
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

セレクタ

セレクタを残しておくと、なんとなくそれだけでHTMLの構造が想像できます。
もちろん確認は必要ですが、まっさらな状態から書くより断然楽です。
セレクタ部分を残して中身のスタイルを消します。

#wrapper {
}

.entry-content {
}

#footer {
}

ClearFix

floatを使用した際に親要素が高さを失う現象に対処するための（バッド？）ノウハウがClearFixです。

KOJIKA17: floatを解除する手法のclearfix と 次世代のレイアウトの話

これも公式テーマのCSSの中に記述があるので流用。

/* ClearFix */
.clearfix {
  display: block;
  *zoom: 1;
}
.clearfix:after {
  display: block;
  visibility: hidden;
  font-size: 0;
  height: 0;
  clear: both;
  content: ".";
}

しばらくはカスタムCSSにまつわるメモを書いていこうと思います。