まずは現状のデザインまでの流れ。
MovableTypeはデフォルトのテンプレートやCSSが付属しています。いろいろと学ぶ点が多いので、データは残しておきながらも、まずは思い切ってCSSをリセットします。
MovableTypeのテンプレートで4つほどのCSSを追加。
- ■リセットCSS（css/reset.css）
- ■レイアウトCSS（css/layout.css）
- ■フォントCSS（css/fonts.css）
- ■ベースCSS（css/base.css）
僕はMovableTypeではCSSの管理名には「■」を、インクルードするファイルには「□」を着けて管理しています。これは結構便利。
リセットCSSはYahoo! UI Library (YUI)をベースに。これで全てのデザインがリセットされます。これでいいのだ。
次にレイアウトCSS。1〜3段組み、右メニューや左メニューなどの基本的な設定を指定します。将来的にはYahoo! UI Libraryに移行したいとは思ってるのですが、今の所MovableTypeのデフォルトデザインをベースに。 フォントCSS（/css/fonts.css）でフォントサイズを調整します。フォントサイズはデフォルトで13px。ただし指定は%です。フォントサイズの指定はここではおこなわずに、フォントCSS（/css/fonts.css）で行います。フォント指定はYUI Fonts CSSを参照。フォントの色指定などもこのCSSで。
ベースCSS（/css/base.css）では、各モジュールなどの共有のCSSを設定します。どうしてもこのCSSは大きくなりすぎるので、将来的には分割した方がいいかなあ。まあ今回はそのままで。
加えて、■カスタムCSS（css/custom.css）を追加。これは各ディレクトリ独自のcssです。
styles-site.cssに、
を追加すれば準備はOK。続いてカスタムCSS（css/custom.css）もリンク。
そして楽しいCSSデザインの道は開かれるのです。
はてなブックマークに追加
[my del.icio.us]へ追加