MTは3.2になってからテンプレートとスタイルシートが大きく変わりました。しかもすごく複雑になっていて、初めて見た時は本当にもう何がなんだか「？？？」な状態でした。しかしこの変更には「TypePadと構造を共通化する」という意味があったようです。確かにMTのStyleCatcherとTypePadに用意されてるデフォデザインは同じです。だから、StyleCatcherを使って、TypePadを使っているふりをする♪…じゃなくて（笑）。
つまり、TypePadのスタイルシート講座を見ればMTのカスタマイズ法も分かる！ということなのです。
カスタムCSS講座4「ブログのレイアウト構造と、背景色の指定」
↑TypePadで連載されているCSS講座の１頁。いわば「公式講座」ですから、素人考えであれこれ推測してるよりよっぽど役にたちそうです。困った時はここに来て確認していくが吉。
自分なりにカスタマイズしてきて少しずつ分かってきたこともあるので、それも少しメモっておこうと思います。
■base-weblog.css
3.2のスタイルシートが複雑なのは、実はデフォルトスタイルシートには、base-weblog.cssとtheme-○○○.css（テーマ用スタイルシート）の２種類のcssが一緒に記述されちゃってるからなんですね。これは新機能StyleCatcherに対応させるためだと思われます。StyleCatcherを導入すると分かるのですが、スタイルシートが２つに分かれて読み込まれるようになるのが分かると思います。こちらにあるように、まずbase-weblog.cssが読み込まれ、続いてテーマ用スタイルシートが読み込まれる仕組みになっています。
3.2のデフォスタイルシートでは、一行目の
/* Base Weblog (base-weblog.css) */
から真ん中辺の以下の記述の間にあるのが、base-weblog.css部分です。
/* Vicksburg (theme-vicksburg.css) */
StyleCatcherでデザイン毎に変わるのはテーマ用スタイルシートで、base-weblog.cssはどのテーマでも共通して使われます。つまり、base-weblog.cssというのは全テーマ共通の骨組みとなる部分なので、「変更しない」よう推奨されているらしいです。確かに全体のレイアウト崩れとか画像にリンクを張った時の青の線を消すとか、そういった目に見えないけど重要な部分がここで制御されているので、よく分からないうちはうっかり触らない方が無難のようです。
ただし１点だけ。base-weblog.css内でここだけは変えた方がいいかも、という部分があるので、以下に説明。
コメント欄の枠の幅。
ちょっと狭くありませんか？ 以下の#comment-textのところが、コメント欄の幅に当たるので、
#comment-author, #comment-email, #comment-url, #comment-text
{
width: 240px;
}
これだけ分離させて以下のように好きな値を与えてあげれば、幅を自由にコントロールできます。
#comment-author, #comment-email, #comment-url
{
width: 240px;
}
#comment-text
{
width: 300px;
}
同様にその他のフォーム部分も好きに変更できますね。
■theme-○○○.css
テーマ用スタイルシート。
/* Vicksburg (theme-vicksburg.css) */
の下からの記述がそうです。
○○○の部分にはそれぞれのスタイルの名前が入ります。デフォルトでは、theme-vicksburg.cssという名前になっているので、vicksburgというのがデフォルトデザインの名前ですか？(^^
実際にMTのデザインを変える時は、この部分を変えます。つまり、ここから下が「自由に触っていいよー」な部分になります。さあ、存分にいじくってオリジナルのテーマを作ろう～。改編して出来たオリジナルテーマcssは「StyleCatcher対応のテーマ」として配布することも出来るんじゃないかと思います。
/* basic page elements */
ブログ全体のフォント指定、リンクカラーの指定などを行います。
/* page layout */
この中の項目で、背景や各パーツの色やデザインを決めていきます。
/* modules */
サイドバーの細かいデザインを受け持つパート。リストのデザインもここで制御。
.module-list 親カテゴリーのリストマークはここで制御。
.module-list .module-list 子カテゴリーはここで制御。
/* one-column tweaks */
１カラム時のレイアウト幅を決めます。
/* two-column-left tweaks */
左サイードバー時はここでalpha、betaカラムの幅を決めます。
/* three-column tweaks */
３カラム時のレイアウトはここで制御。two-column-left tweaksに習って、gammaを追加しておきましょう。
以上、６つのパートがデザイン変更時に改編できる部分です。
■謎のパート？？
ところで…。実はテーマcssの中にはこの他にも妙～なパートがあります。普通のデザイン変更には使わないので、なんのためにあるのか少し気になります。それが以下のパートです。
/* calendar tweaks */
/* artistic tweaks */
/* moblog1 tweaks */
/* moblog2 tweaks */
/* timeline tweaks */
最初、calendar tweaks内にあるのがカレンダー用のcssかと思って試してみたところ…違った(^^;。なんと、このようなものが出現したのです！
これはいったい何なんだ…。確かにカレンダーだが大きいぞ。何か、空いているところにサムネイルとかあると似合うんじゃないか…って感じですね。写真用カレンダー？ もしかしてmoblog1 tweaksとかと組み合わせてモブログ投稿に使うとか？？ MTはまだモグロブに正式対応してませんが、そのための準備部分？？ まだまだ謎多き3.2のcssであります…。
でも工夫次第では何かに使えそうな気もするな。そのうち何か閃いたら試してみようと思います。