「サイドバーを左側に表示させたい」の項でも書きましたが、 #center と#right にfloat: left;が指定されています。float: left;プロパティは対象の領域を次の領域の左側に表示させるものですから、新たに#leftというスタイルを作成して、そこにもfloat: left;を指定してやれば両サイドにサイドバーがある３カラムデザインが完成します。

例：

/* 左サイドバー追加 */

#left{

float:left;
width:200px;
background-color:#FFFFFF;
}

これをスタイルシートに追加記述します。これはスタイルの指定ですから、これを追加しただけでは何も変化しません。 次に行うのは、この追加したスタイルを利用する左サイドバーの部品が必要です。ここでは試しに「検索」を右のサイドバーから左に移動させてみます。

部品を移動（表示）させるためには、テンプレートのメインページのテンプレートに記述します。centerの直前に記述します。

例：

<!-- 左サイドバー -->

<div id="left">
<div class="sidebar">

<h2>検索</h2>

<div class="link-note">
<form method="get" action="<$MTCGIPath$><$MTSearchScript$>">
<input type="hidden" name="IncludeBlogs" value="<$MTBlogID$>" />
<label for="search" accesskey="4">このサイトの検索</label><br />
<input id="search" name="search" size="20" /><br />
<input type="submit" value="検索" />
</form>
</div>

</div>
</div>

これで、左サイドバーに「検索」が表示されますが、これだけでは右のサイドバーがはみ出してしまいます。この原因は#container の幅がスタイルシートで700pxと指定されているためです。
サイドバーやエントリー領域もスタイルシートで幅が指定されていますが、サイドバーはそれぞれ200pxで、エントリー領域である#centerは500pxとなっています。#containerという箱に収まるはずの#left、#center、#rightは200pxオーバーしてしまいます。そこで次にやる事は「箱」である#containerを100px大きくして#centerは400pxにします。

例：

/* container幅修正 */

#container {

line-height: 140%;
margin-right: auto;
margin-left: auto;
text-align: left;
padding: 0px;
width: 800px;
background-color: #FFFFFF;
border: 1px solid #FFFFFF;
}

/* center幅修正 */

#center {

float: left;
width: 400px;
overflow: hidden;
}

/* 右サイドバー */

#right {

float: left;
width: 200px;
background-color: #FFFFFF;
overflow: hidden;
}

/* 左サイドバー */

#left{

float:left;
width:200px;
background-color:#FFFFFF;
}

これで３カラム画面の完成です。 あとはサイドバーに追加する部品を好みによって左右のサイドバーに配置すればＯＫです。

注意：「サイドバーを左側に表示させたい」の項で#centerと#rightのスタイルシートの指定をfloat: rightに変更した場合はleftに（標準）に直さなければなりません。

#center {

float: left;
width: 500px;
overflow: hidden;
}

#right {

float: left;
width: 200px;
background-color: #FFFFFF;
overflow: hidden;
}

以上です。

＊MovableType の関連書はこちら＊

＊独学ですので専門的な事はわかりませんが、ボクがこのサイトで試行錯誤して行ってきたMovableTypeカスタマイズの覚え書きです。間違っている記述があるかもしれません。御了承ください＊