Customize in Ninja Blog

それでは、３カラム化開始!!と気合を入れてみる(←意味なし)

HTMLを私は次のように記述してあります。

これを３カラムにするので、

のように書き換えます。(あばうとに言えば)
そのために青くした部分を<div class="WrapperBlock">～</div>で囲み、スタイルシートのfloat指定でこの部分を左寄せします。

左サイドプラグインは全体を<div class="LeftPluginBlock">～</div>で囲み、右サイドは<div class="RightPluginBlock">～</div>で囲みます。
これらのスタイルシートを次のように指定しました。

/*３カラムにするための囲み*/
.WrapperBlock {
margin:0px;
padding:0px;
width:660px;
float:left;
overflow:hidden;
}
/*左サイドプラグイン*/
.LeftPluginBlock {
width: 170px;
text-align: left;
background-color:#ffffff;
margin:0px;
padding:0px;
float:left;
overflow:hidden;
}
/*右サイドプラグイン*/
.RightPluginBlock {
width: 170px;
text-align: left;
background-color:#ffffff;
margin:0px;
padding:0px;
float:right;
overflow:hidden;
}

これに伴い幅などが変わる部分は以下のとおり。

/*全体の設定*/
#mainBlock {
width:840px;
text-align: center;
margin : 0px auto 0px auto;
padding:0px ;
background-color:#ffffff;
}
/*一番上のブロック（タイトルが書かれる場所）の設定*/
#TopBlock {
width:840px;
height:100px;
text-align: left;
background-color:#ffffff;
margin:0px;
padding:10px;
border-bottom:3px double #e6e6cc;
}
/*記事繰り返し処理全ての部分の設定*/
#EntryBlock {
width: 480px;
float:right;
text-align: left;
margin:0px;
padding:0px;
background-color:#ffffff;
}

記事部分のサイズは２カラムであったときとそれほど変化しません。その代わりに全体的に幅が広くなってます。
これだと1024*768pxの解像度が最小サイズとなります。800*600などでは横にスクロールバーがでてしまいますね～

↑のようになりました。

省略してかいてますので、実はこれだけでは３カラムが綺麗に表示されません。
また、カレンダーとかプラグインにも影響がでてます。
微修正をしないと駄目そうです。

まだまだ、テンプレ作成が終わらない～