2カラム型テンプレート：スタイルシートの作り方 :MovableTypeオリジナルテンプレートを作ろう

テンプレートの作り方

HOME» テンプレートの作り方» 2カラム型テンプレート：スタイルシートの作り方

2カラム型テンプレート：スタイルシートの作り方

Movable Type3.2用の2カラム型テンプレートの作り方を説明します。
2カラム型や3カラム型のテンプレートを作れるようになれば、カスタマイズにも幅が出てきますね。
まず最初は、1カラム型と同様に、スタイルシートの作り方から説明しますね。

今回は、以下のような左側にメニューを表示するタイプの2カラム型テンプレートを作成してみます。

ページ全体枠(#container)

ヘッダー部分(#banner)

左側メニュー
部分(#leftbar)

本体部分(#content)

フッター部分(#footer)

■デフォルトスタイルシートの削除

まず、最初は、標準で用意されているスタイルシートテンプレートを全て削除しましょう。

手順１：Movable Typeのメイン・メニューから、テンプレート⇒スタイルシートをクリックしてください。

手順２：表示されたテンプレートの内容を全て、削除します。（必要に応じてバックアップを取ってね）

■スタイルシートの冒頭部分

手順３：ブラウザによってスタイルシートの扱いが若干違うので、基準をあわせる意味で、以下のように記述します。これは、おまじないのようなものです。

* { margin:0; padding:0; }

■ページ全体の定義(#container)

手順４：次に、ページ全体の枠（コンテンツを表示するエリア）を横幅720pxで定義します。

#container { margin:0; padding:0; width:720px; }

margin:0;で外側の余白、padding:0;で内側の余白を無くして、width:720px;で、コンテンツを表示する横幅を指定しています。ちなみに、pxとは、ピクセルと読み、大きさの単位を表しています。

■ヘッダー部分の定義(#banner)

手順５：次に、ブログのタイトルやブログの説明を表示するヘッダー部分を定義します。

#banner { margin:0; padding:0; width:720px; height:80px; }

height:80px;は、高さを指定する場合に使います。つまり、タイトル部分は、横幅：720px、高さ：80pxということになりますね。

■左側メニュー部分の定義(#leftbar)

手順６：次に、左側のメニューを表示する部分を記述しましょう。

#leftbar { margin:0; padding:0; width:160px; float:left; }

width:160px;で、表示する幅を指定しています。 float:left;は、左回りこみといって、メニューの右側に本体部分を表示するようにしています。（float:left;を指定しない場合は、メニューの右側は余白になり、下側に、本体部分が表示されます。）

■本体部分の定義(#content)

手順７：次に、本文（メインコンテンツ）を表示する本体部分を記述しましょう。

#content { margin:0; padding:0; width:560px; float:right; }

width:560px;で本体部分の横幅を指定しています。横幅は、720px（ページ全体の横幅）-160px（左側メニューの横幅）=560px（本体部分の横幅）になります。 float:right;で右回り込み、つまり、本体部分の左側にメニューを表示するように指定します。

■フッター部分の定義(#footer)

手順８：最後の記述は、フッターの表示エリアです。

#footer { margin:0; padding:0; width:720px; clear:both; }

フッターは、ページ全体と同じ横幅(720px)になります。 clear:both;で、左回り込みと右回り込みを解除します。

これで、2カラム型テンプレートのスタイルシートは、終了です。

★ワンポイントアドバイス（左に本体、右にメニューを表示するには？）

左側に本体、右側にメニューを表示する場合はどうしたらいいのでしょうか？

答えは、#leftbarで定義した「float:left;」と、#contantで定義した「float:right;」を反対にすればいいのです。

以下のように感じですね。

右側メニュー部分の定義

#rightbar {
margin:0;
padding:0;
width:160px;
float:right;
}

本体部分の定義

#content {
margin:0;
padding:0;
width:560px;
float:left;
}

«前の記事ページの背景に画像を表示する方法
»次の記事 2カラム型テンプレート：メインページの作り方

>>>たった８ページのサイトで、毎月１万円を稼ぐ方法

MovableTypeオリジナルテンプレートを作ろう