 |
 講座サイト
制作者
募集サイト | ||||
Movable Typeのカラムいじり～構造を把握せよ
2005年02月02日 20:44 投稿
blog開始！万歳三唱！
ええと、この話は2カラム化に限った話じゃないんですけど、もとつきせんせいが知りたいのは2カラム化の方法らしいので、じゃ、それを例にして。
まずすべきことは、改造したいテンプレートと、スタイルシートの定義テンプレートをプリントアウトすることです。赤ペンとかチェックマーカーも用意してください。
これはhtmlとかxmlの改造すべてにいえることですが、重要なのはかっこ< >からとじかっこ</ >までの要素の組み合わせです。それを把握するには、モニタに映ったソースの文字列とにらめっこしていてもらちがあきません。
※よのなかにはタグを色分けして表示するソフトもあります
今回のカスタマイズでは<div></div>を使います。<div>タグを探して印をつけてください。そして次に来る</div>までをわかりやすい色で囲ってください。それをすべての<div>タグに対しておこなって色分けしてください。できましたか？
次に、<div id="ほげほげ"> または <div class="ほげほげ"> というように名前がついている要素に印をつけて、その部分に対応する記述をスタイルシートから見つけてください。
たとえば<div id="container"> に対応する部分のスタイルは、
#container {
}
同様に、<div class="content"> のスタイルは、
.content {
}
というかんじに書かれているはずです。
ここからはデフォルトテンプレートを例にして話をすすめます。
個別アーカイブのテンプレートは、デフォルトではざっくりいってこんなかんじです。
| ...(JavaScriptとかタイトルとか、ごたく) <body> ←ここから、実際に画面に表示される部分になる
</html> |
で、上の図の黄色の部分を、
<div class="content">
|
というふうに配置すればよいのですね。
はい、ここからが本筋ですよ。この配置を実現するためには、テンプレートのなかの、
...（本文、コメントなどなど）
</div>
の部分を、
<div id="maincontent">
...（本文、コメントなどなど）
</div>
<div id="sub">
...カテゴリなど
</div>
</div>
というように書き換えます。
え？それじゃ、カテゴリとかが横に並ばないで下にいっちゃうんじゃ？と思ったあなた、鋭いです。このままではカラム増えません。横に並べるためには、スタイルシートで新しく追加したmaincontent,subそれぞれのスタイルを定義する必要があります。
たとえばこんな指定です。
#maincontent {
float: left;
width: 500px;←適当な横幅
overflow: hidden;
}
#sub {
float: left;
width: 200px;←適当な横幅
overflow: hidden;
}
float属性は文字の回り込みです。要するにfloat:leftはdiv id="maincontent"を左側に寄せ、右側に次に来る要素div id="right"を配置するのです。
overflow:hidden;はdivのなかに入りきらない要素を隠します。widthで指定したより大きな画像を配置した場合は画像が切れたりします。
まあここらへんは好きずきなので、下に挙げるサイトなどを参考にして、いろいろいじってみてください。
http://adp.daa.jp/archives/000250.html
http://www.tagindex.com/stylesheet/box/index.html
わかりやすく解説してるサイトを発見
Triggers! SFC Bloggers Project: MovableType 3.0 Stylesheet Guide
この記事に関連するかもしれない本:
「萌えるアニメ」の制作を模索するアニメ闘士・玉英の作品と趣味のサイトです。
コメント
ツッコミ・感想・情報などありましたらどうぞ