Movable Typeのカラムいじり~構造を把握せよ

gyokuei
2005年02月02日 20:44 投稿

ええと、この話は2カラム化に限った話じゃないんですけど、もとつきせんせいが知りたいのは2カラム化の方法らしいので、じゃ、それを例にして。

まずすべきことは、改造したいテンプレートと、スタイルシートの定義テンプレートをプリントアウトすることです。赤ペンとかチェックマーカーも用意してください。
これはhtmlとかxmlの改造すべてにいえることですが、重要なのはかっこ< >からとじかっこ</ >までの要素の組み合わせです。それを把握するには、モニタに映ったソースの文字列とにらめっこしていてもらちがあきません。
※よのなかにはタグを色分けして表示するソフトもあります

今回のカスタマイズでは<div></div>を使います。<div>タグを探して印をつけてください。そして次に来る</div>までをわかりやすい色で囲ってください。それをすべての<div>タグに対しておこなって色分けしてください。できましたか?

次に、<div id="ほげほげ"> または <div class="ほげほげ"> というように名前がついている要素に印をつけて、その部分に対応する記述をスタイルシートから見つけてください。
たとえば<div id="container"> に対応する部分のスタイルは、
#container {
}
同様に、<div class="content"> のスタイルは、
.content {
}
というかんじに書かれているはずです。


ここからはデフォルトテンプレートを例にして話をすすめます。

個別アーカイブのテンプレートは、デフォルトではざっくりいってこんなかんじです。


...(JavaScriptとかタイトルとか、ごたく)
<body> ←ここから、実際に画面に表示される部分になる

<div id="container">  ←一番大きな枠組み


<div id="banner">
...(バナー部分)
</div>


<div class="content">
...(本文、コメントなどなど)
</div>

</div>
</body> ←ここまで
</html>


で、上の図の黄色の部分を、

<div class="content">
<div
id="maincontent">
...(本文、コメントなどなど)
</div>
<div
id="sub">
...カテゴリなど
</div>
</div>

というふうに配置すればよいのですね。


はい、ここからが本筋ですよ。この配置を実現するためには、テンプレートのなかの、

<div class="content">
...(本文、コメントなどなど)
</div>

の部分を、

<div class="content">

<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


この記事に関連するかもしれない本:

 
この記事のトラックバックURL:
はてなブックマークに追加 はてなブックマークを見る
※コメントは、SPAMが多いため承認制になっています。

コメント


ツッコミ・感想・情報などありましたらどうぞ






保存しますか?


銀の月動画計画 は、
「萌えるアニメ」の制作を模索するアニメ闘士・玉英の作品と趣味のサイトです。
銀の月動画計画バナー
Copyright © 1995-2007, 玉英・ZARASU.com
銀の月動画計画ロゴ  
powered by Google
ウェイク☆アップ!歌い手&振付け募集
五六神王計画声優公募final
五六神王計画絵師
ロゴ