2005年12月 8日

ブログの3カラム化（MT3.17編）

今回は、ブログを3カラムにするカスタマイズ方法について説明します。

MT3.17のデフォルト・テンプレートでは、右側にサイドバー、左側にエントリーが表示されています。エントリーの左側にもサイドバーを追加して、３カラムにする方法を説明します。

■ カスタマイズ例

↑クリックすると、カスタマイズ後のイメージが拡大して表示されます（別ウィンドウ）。

カスタマイズ方法（MovableType 3.17編）

ブログを3カラムにするには、いくつか方法がありますが、今回は、「float」を使用する方法を説明します。

詳細は、ブログカスタマイズ講座のレイアウト編にて説明していますので、ご覧ください。
「ブログを3カラム化するには」

■ HTMLの編集
デフォルト・テンプレート（Ver.3.17）の場合、下記のように編集します。

１．「wrapper」の指定を追加
まず、下記の部分に「wrapper」の指定を追加します。
<div id="center"></div>を囲むように、
<div id="wrapper"></div>を追加します。
※「wrapper」の名前は別の名称でも構いません。

＜メインページ＞ ←全体の解析が見れます。

※赤色の文字が追加部分です。

2．「left」の指定を追加
次に、下記の部分に「left」の指定を追加します。
追加する部分は、</div>（centerの終わり）と、上記で追加した</div>(wrapperの終わり）の間です。

3．サイドバー内のコンテンツを記述する
サイドバー内に表示したいコンテンツ（カレンダー、検索、カテゴリー等）を記述します。メインページのサイドバー内の記述等を参考にしてください。

4．まとめ
上記までの手順で説明した編集箇所をまとめています。
赤色の文字が追加部分です。

■ CSS（スタイルシート）の編集
スタイルシートを編集します。

＜スタイルシート＞

#container {
　・・・（省略）
　width: 700px;
}

#center {
　・・・（省略）
　float :right; width: 500px;
}

#right {
　・・・（省略）
　float: left; width : 200px;
}

下記のように修正します。
赤色の文字が追加、編集部分です

#container {
　・・・（省略）
　width: 800px;
}

#wrapper {
　float left; width: 620px;
}

#center {
　・・・（省略）
　float :right; width: 440px;
}

#left {
　・・・（省略）
　float: left; width : 180px;
}

#right {
　・・・（省略）
　float: right; width : 180px;
}

■ 参考資料
MovableTypeのメインページの大まかな構造は、下図のようになります。カスタマイズの際にイメージしやすくなると思いますので、参考にしてくださいね。

■ MovableType（Ver.3.17）メインページ構造図

　body

#container

#banner

　#center

　.content

　#right

　.sidebar

■ 3カラムレイアウト（float編）の構造図

#container

#banner