Movable Type 4 では、スタイルを選択することによりデザインを変えることができます。
管理画面の「デザイン」から「スタイル」を選択すると、「規定のスタイル」の他、「MT 4 スタイルライブラリ」からも新しいスタイルをダウンロードして使うことができます。
ここではオリジナルに作成したスタイルを、登録して利用する手順を紹介します。このサイトでも同様の方法でスタイルを適用しています。
オリジナルのスタイルを一から作成するよりも、気に入ったスタイルを真似て作るのが手っ取り早いと思います。
基本的には、デフォルトのスタイルシート(ベーステーマ:base_theme.css)の変更箇所を上書きするようなスタイルシートを作成することになります。こうすることでデフォルトのスタイルと互換性をもたせることで、デフォルトテンプレートに手を加えず、カスタマイズが可能になりますし、後々の変更も容易になります。
ちなみに、スタイルシート(メイン:styles.css)は、ベーステーマ（base_theme.css)を読み込む役目のスタイルシートです。
- スタイルを保存するフォルダは、MT→mt-static→support→themesに、作成します。例えばmarlinsという名前をつけたフォルダを作成します。
- 独自に作成したフォルダの中に、上書きするスタイルシートを、例えばmarlins.cssという名前をつけて保存する他、スタイルシートから読み込む画像も保存します。
- スタイルシートの中に、
と記述します。@charset "shift_jis"; /* name: Marlins (独自スタイルの名前：なんでもよい) designer: Hironori Shikida (独自スタイルの作成者：なんでもよい) designer_url: http://koyo-marlins.biz/ (独自スタイルの作成者のサイトURL：なんでもよい) layouts: layout-wtt, layout-twt, layout-wt, layout-tw (独自スタイルのレイアウト：後述) */
layouts: に書いてある、layout-wtt, layout-twt, layout-wt, layout-tw は、適用できるカラムレイアウトの種類です。
- layout-wttは3カラムで大少少
- layout-twtは3カラムで少大少
- layout-wtは2カラムで大少
- layout-twは3カラムで少大
です。
Movable Type 4 では、ネガネィブマージンという手法で、メインカラム（大：id="alpha"）が必ず先に来るようになっています。そのためスタイルシートの中に、
/* Wide-Thin-Thin */
.layout-wtt #alpha {
width: 400px;
}
.layout-wtt #beta {
width: 190px;
margin-left: 30px;
}
.layout-wtt #gamma {
width: 190px;
margin-left: 30px;
}
/* Thin-Wide-Thin */
.layout-twt #alpha {
margin-left: 220px;
width: 400px;
}
.layout-twt #beta {
margin-left: -620px;
width: 190px;
}
.layout-twt #gamma {
margin-left: 30px;
width: 190px;
}
/* Wide-Thin */
.layout-wt #alpha {
width: 610px;
}
.layout-wt #beta {
width: 190px;
margin-left: 40px;
}
/* Thin-Wide */
.layout-tw #alpha {
margin-left: 230px;
width: 610px;
}
.layout-tw #beta {
margin-left: -840px;
width: 190px;
}
と、それぞれのレイアウトに対応してカラムサイズと配置を記述しておくいことで、先ほどの、layouts: に書かれた内容が適用できるようになります。
