▼作り方の詳細
①テーブルを使う
これは省略します。
（普通にテーブルの使い方を知っていればできるので）
②スタイルシート(CSS)で2カラムを２つ使う
BBSでも書いた方法です。色をつけてもう少しわかりやすくしてあります。idは忍者ブログの新規テンプレートのものに改良を加えました。
出来上がりのイメージは↓のようになります。
青く表示された２カラムと
ピンクで表示された2カラムをそれぞれ作ります
<body>
<div id="MainBlock">
<div id="WraperBlock">
<div id="PluginBlockLeft">
左側に表示するプラグインカテゴリー
</div><!--//PluginBlockLeftの閉じタグ//-->
<div id="EntryBlock">
記事部分を表示
</div><!--//EntryBlockの閉じタグ//-->
</div><!--//WraperBlockの閉じタグ//-->
<div id="PluginBlockRight">
右側に表示するプラグインカテゴリー
</div><!--//PluginBlockRightの閉じタグ//-->
</div><!--//MainBlockの閉じタグ//-->
</body>
これがHTMLのソースになります。
追記：忍者ブログの新規テンプレートにはMainBlock(mainBlockだったかも？)とEntryBlockはありますが他はないので追加してください。
これにスタイルシートで幅などを指定していきます。
/*全体*/
body {
text-align:center; /*ブログ本体をセンタリング*/
}
/*ブログが表示される部分*/
div#MainBlock {
margin:0px auto;/*ブログ全体をセンタリング*/
width:740px;/*ブログが表示される幅*/
text-align:left;/*bodyでセンタリングしたのを戻す*/
}
/*左側のプラグイン＋記事表示部分*/
div#WrapperBlock {
width:540px;/*記事部分と左メニューを合わせた部分の表示幅*/
float:left;/*このブロックを左に寄せる*/
overflow:hidden;/*はみ出した要素を隠す*/
}
/*記事表示部分*/
div#EntryBlock {
width:340px;/*記事部分の表示幅*/
float:right;/*このブロックを右に寄せる*/
overflow:hidden;/*はみ出した要素を隠す*/
}
/*左メニュー*/
div#PluginBlockLeft {
width:190px;/*左メニューの表示幅*/
float:left;/*このブロックを左に寄せる*/
overflow:hidden;/*はみ出した要素を隠す*/
}
/*右メニュー*/
div#PluginBlockRight {
width:190px;/*右メニューの表示幅*/
float:right;/*このブロックを右に寄せる*/overflow:hidden;/*はみ出した要素を隠す*/
}
/*フッターブロック*/
div#FooterBlock {
clear:both;/*回り込みを全て解除*/
}
これで３カラムが出来上がります。
後はそれぞれの部分に表示したいソースを入れればOKです。
追記：それぞれにoverflow:hidden;/*はみ出した要素を隠す*/を加えました。加えないとどうもIEでは誤差が生じて変なことになります。
また、なるべく骨組みにはmarginとpaddingの二つの余白の指定はきちんと行っておいたほうが良いです。
③スタイルシート(CSS)で全てどちらかの方向に寄せる
今度は2カラムを２つ使うのではなく全てをどちらかに寄せてしまう方法です。
（SeeSaaブログの公式テンプレはこの方法を使ったのがあります。）
<body>
<div id="MainBlock">
<div id="PluginBlockLeft">
左側に表示するプラグインカテゴリー
</div><!--//PluginBlockLeftの閉じタグ//-->
<div id="EntryBlock">
記事部分を表示
</div><!--//EntryBlockの閉じタグ//-->
<div id="PluginBlockRight">
右側に表示するプラグインカテゴリー
</div><!--//PluginBlockRightの閉じタグ//-->
</div><!--//MainBlockの閉じタグ//-->
</body>
HTMLソースはこんな感じ。普通に表示したい部分を上から順に並べます
この場合スタイルシートはこうなります。
float指定は全て左寄せにします。
/*全体*/
body {
text-align:center; /*ブログ本体をセンタリング*/
}
/*ブログが表示される部分*/
div#MainBlock {
margin:0px auto;/*ブログ全体をセンタリング*/
width:740px;/*ブログが表示される幅*/
text-align:left;/*bodyでセンタリングしたのを戻す*/
}
/*左メニュー*/
div#PluginBlockLeft {
width:190px;/*左メニューの幅*/
float:left;/*全てを左寄せ*/
overflow:hidden;/*はみ出した要素を隠す*/
}
/*記事表示部分*/
div#EntryBlock {
width:340px;
float:left;/*全てを左寄せ*/
overflow:hidden;/*はみ出した要素を隠す*/
}
/*右メニュー*/
div#PluginBlockRight {
width:190px;/*右メニューの幅*/
float:left;/*全てを左寄せ*/
overflow:hidden;/*はみ出した要素を隠す*/
}
/*フッターブロック*/
div#FooterBlock {
clear:both;/*回り込みを全て解除*/
}
という感じに指定しても３カラムになりますよ～
追記：それぞれにoverflow:hidden;/*はみ出した要素を隠す*/を加えました。加えないとどうもIEでは誤差が生じて変なことになります。
また、なるべく骨組みにはmarginとpaddingの二つの余白の指定はきちんと行っておいたほうが良いです。
