レイアウト枠のカスタマイズ

HTMLヘッダーのカスタマイズが終わったので、ここからは実際に見える部分をカスタマイズしていきます。（MTというよりHTMLとかCSSとか、そっち方面の話題になっちゃいますが、私がカスタマイズする際の一連の流れということで掲載しちゃいます。）

初期状態のMTテンプレートでは、ヘッダーからフッターまでを「container」というidセレクタがついたDIVタグで内包しています。さらにその内側に複数のDIVタグを内包、それぞれについたセレクタに対応したスタイルシートで、メインスペースだのサイドバーだのがレイアウトされています。

初期テンプレートのレイアウト構成（3段組＝大・小・小＝の場合）

ご覧いただければ分かるとおり、ヘッダー、メインスペース、サイドバー（×2）、フッター、それぞれ1つの塊ごとに3つのDIVタグが入れ子になって存在してるんですね。これがMTのテンプレートが複雑に見える原因。

これはこれで使い道があるんだと思いますが、私としてはこんなに複雑にしたくないので、この枠をこんな感じで変更してみました。

ヘッダー、メインスペース、サイドバー、フッターには、それぞれ装飾するためにDIVタグを入れることになるんですが、レイアウトを制御するために必要なDIVタグの数はグーンと減りました。これならカスタマイズもしやすそうです。

あとはこのレイアウト枠に沿ってCSSを書けばOK。CSSはあーしてこーして....みたいな説明は面倒なんで割愛＾＾；できあがったCSSファイルをご覧いただければ幸いです。

あ、ついでに。このままだとどこからどこまでがヘッダーで、どこからどこまでがメインスペースで.....というのが分かりづらいので、HTMLのコメントを使って目印をつけておきました。（どんな感じになってるかはソースをご覧アレ。）