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

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

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

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

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

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

<div id="wrapper"> <div id="center"> <div class="content"> 　・・・（省略） </div><!-- end content --> </div><!-- end center --> </div> <div id="right"> 　・・・（省略） </div><!-- end right -->

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

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

<div id="wrapper"> <div id="center"> 　・・・（省略） </div><!-- end center --> <div id="left"> 　・・・（省略） </div> </div><!-- end wrapper -->

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

<div id="left"> <div class="sidebar"> 　・・・（省略） </div> </div>

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

<div id="container"> <div id="banner"> 　・・・（省略） </div><!-- end banner -->  <div id="wrapper"> <div id="center"> 　・・・（省略） </div><!-- end center --> <div id="left"> 　・・・（省略） </div><!-- end left --> </div><!-- end wrapper --> <div id="right"> 　・・・（省略） </div><!-- end right --> <div style="clear: both;">&#160;</div> </div><!-- end container -->

■ 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 #left #center #wrapper #right

以上、「3カラム化（MT3.17編）」について説明しました。

参考になりましたら、応援お願いします。