その２の図のように左側にコンテンツを配置するにはメインテンプレートに次のように追記します。MT管理画面から「テンプレート」→「インデックス」→「メインページ」でメインページのテンプレートを修正します。
<!--左側開始-->
<div id="left">
の下に次のように記述します。
<div id="left">
<div class="float300">
<!--コンテンツ①開始-->コンテンツ①<!--コンテンツ①終了--><br>
<!--コンテンツ②開始-->コンテンツ②<!--コンテンツ②終了-->
</div>
<!--コンテンツ④開始-->コンテンツ④<!--コンテンツ④終了-->
<div style="clear: both; "></div>
<div class="float300">
<!--コンテンツ③開始-->コンテンツ③<!--コンテンツ③終了-->
</div>
<!--コンテンツ⑤開始-->コンテンツ⑤<!--コンテンツ⑤終了-->
<div style="clear: both; "></div>
<!--コンテンツ①開始-->コンテンツ①<!--コンテンツ①終了--><br>
<!--コンテンツ②開始-->コンテンツ②<!--コンテンツ②終了-->
</div>
<!--コンテンツ④開始-->コンテンツ④<!--コンテンツ④終了-->
<div style="clear: both; "></div>
<div class="float300">
<!--コンテンツ③開始-->コンテンツ③<!--コンテンツ③終了-->
</div>
<!--コンテンツ⑤開始-->コンテンツ⑤<!--コンテンツ⑤終了-->
<div style="clear: both; "></div>
【スタイルシートを修正する】
コンテンツをfloatで並べるためにメインテンプレートのソースにclass名float300を指定しました。スタイルシートには次のように記述します。
/*float*/
.float300{
float: left;
width: 300px;
overflow: hidden;
}
.float300{
float: left;
width: 300px;
overflow: hidden;
}
修正後は下の図のようになりました。実際は青い線はありませんが、見やすい（逆に見にくいかも？！）ように線を引いてみました。これであとは「コンテンツ○」のところに画像なり、文章なりを置き換えて行けばいいわけですね(^^♪
<!--開始-->のコメントは実際に表示させるコンテンツがわかる名前にしてもいいし、不要なら削除しても構いません。floatを300pxにしたのは、左サイドが600pxなので半分にした、ということです。スタイルシートのwidthで指定する幅を変えれば思い通りの幅にできます。
