Movable Typeのそれぞれのテンプレートを開いてみると、タグやクラスがずら~っと並んでいて、一見とても難しいように見えます。これだけで「うへ~」と思う方も多いかもしれません。
でも、基本的な構成を頭に入れてしまうと、もう少し見やすくなります。
各ページを構成するテンプレート(メインページ、アーカイブページ、等)は、すべて基本的な構成は一緒です。
※テンプレートの種類についてはこちらを参照ください。
⇒ テンプレートって何?
どのような構成になっているか、図示すると以下のようになります。
バナーを変えるならbannerに関する部分を、右側のサイドバー(リンクナビ部分)に表示している内容を変えるならbetaの部分を探して、必要な修正をかけます。 やみくもに探すよりは、全体の構成がわかると探しやすいのではないでしょうか。
head(サイト・ページに関する情報を記述) body(ブラウザに表示する内容を記述)
container
banner pagebody
alpha beta
続いて、スタイルシートについてです。
Movable Type標準テンプレートのスタイルシートはわかりにくいと、よく言われます。その理由は、同じ名称のクラスが分割して記載されているからです。
例えば、『body』タグのデザインを指定する『body』クラスタグが、スタイルシートの中に何度も出てきます。
しかしこれも、Movable Typeのスタイルシートの構成を理解すると、少しわかりやすくなります。
その構成は、次のようになっています。
basic elements : 余白(margin、padding等)の基本要素群 page layout(1) : ページや枠内での相対的な表示位置を指定する要素群 content : コンテンツ(記事部分)のデザインを指定する要素群 modules(1) : モジュール部分の表示位置を指定する要素群 basic page elements : 基本的な文字のフォント・サイズ・色等を指定する要素群 page layout(2) : 大きさ(幅・高さ)や背景色など、様々なレイアウトを指定する要素群 modules(2) : モジュール部分の余白や背景色を指定する要素群
ここには基本的なもののみを抜粋しました。
スタイルシートの中には、特定のモジュールのみに使用する要素群もあります。でも滅多に使うことはないので無視していても問題ないでしょう。
デザインの修正をしたいときは、上記の構成を参考に、該当する要素がありそうなところをすべて見るようにしてください。
再度書きますが、Movable Typeの標準スタイルシートでは、同一のクラス要素が複数回出てきます。あれおかしいな?と思ったら、見逃している同一名称のクラスが他にないか、探してみるようにしてください。