FC2ブログ用2カラムテンプレートのカラムサイズ変更方法

以前に、こちらで紹介していますFC2ブログ用テンプレートblogtube_basic3カラムの各カラムサイズの変更方法を説明しましたが、今回はblogtube_extraの2カラムテンプレートの各カラムサイズの変更方法を説明します。
前回は全般的に説明しましたが、今回は必要な箇所だけ説明します。細かく説明すると、逆にややこしいと思いますので。
ということで、FC2ブログ用テンプレート3カラムのサイズ変更は、ブログ全体のサイズをカスタマイズするとブログ全体のサイズをカスタマイズしてみた例をご覧下さい。

(今回は左右のマージン(15px)とカラム間のマージン(10px)は標準のまま変更しないものとします。)

1.右メニューの2カラムテンプレートカラムサイズ変更

.layout-three-column #box,
.layout-two-column-left #box,
.layout-two-column-right #box{
width: 930px;
margin-right: auto;
margin-left: auto;
border: solid 1px #000;
}

まずは全体のサイズを決めます。width: 930px;の930pxを変更して下さい。この数字が基準となります。

左カラム(エントリカラム)

.layout-three-column #box-left,
.layout-two-column-right #box-left{
float: left;
width: 660px;
}

右カラム(メニューカラム)

.layout-three-column #box-right,
.layout-two-column-right #box-right{
float: right;
width: 230px;
}

ここで左右カラムサイズを決定します。左右マージンが計30px+カラム間マージンが10px=40pxが標準ですので、この左右カラムの合計+40px=全体サイズになります。
違う言い方をすれば、全体サイズ-40pxがこの左右カラムの合計サイズです。

全体サイズを830pxにした場合、830px-40px=790pxが左右カラムの合計になります。この合計を、左右好きなサイズに割り当てて下さい。(例えば610px+180px=790px)

.layout-two-column-left #box-main,
.layout-two-column-right #box-main{
float: right;
width: 660px;
}

ここはエントリカラムと同じサイズに変更して下さい。以上で左右カラムの変更は終了です。(フリーエリアを使用する場合、フリーエリアのサイズ変更に進んで下さい。)

2.左メニューの2カラムテンプレートカラムサイズ変更

.layout-three-column #box,
.layout-two-column-left #box,
.layout-two-column-right #box{
width: 930px;
margin-right: auto;
margin-left: auto;
border: solid 1px #000;
}

左メニューの場合も全体サイズはここで決めます。

.layout-two-column-left #box-left{
width: 900px;
}

ここは全体サイズ-30pxとして下さい。-30pxは左右マージンです。(例:830pxなら830px-30px=800px)

右カラム(エントリカラム)

.layout-two-column-left #box-main,
.layout-two-column-right #box-main{
float: right;
width: 660px;
}

左カラム(メニューカラム)

.layout-two-column-left #box-sub{
float: left;
width: 230px;
}

ここで左右カラムサイズを決定します。左右マージンが計30px+カラム間マージンが10px=40pxが標準ですので、この左右カラムの合計+40px=全体サイズになります。
違う言い方をすれば、全体サイズ-40pxがこの左右カラムの合計サイズです。

全体サイズを830pxにした場合、830px-40px=790pxが左右カラムの合計になります。この合計を、左右好きなサイズに割り当てて下さい。(例えば610px+180px=790px)

3.フリーエリアのサイズ変更

#kousin{
width: 900px;
margin: 10px auto 20px;
border: solid 1px #000;
background: #fff;
}

.topadfull{
width: 900px;
margin: 10px auto 20px;
background: #fff;
}

.topbox{
width: 900px;
background: #fff;
margin: 10px auto 20px;
}

#bottombox{
width: 900px;
margin: 10px auto 20px;
border: solid 1px #000;
background: #fff;
}

上記部分は全体サイズ-30pxとして下さい。-30pxは左右マージンです。(例:830pxなら830px-30px=800px)

.topleft{
float: left;
width: 445px;
}

.topright{
float: right;
width: 445px;
}

これは2分割のフリーエリアです。上で設定した、(全体サイズ-30px)-10pxをまず計算し、次にその合計になるように左右サイズを決定して下さい。左右違うサイズでも問題ありません。(例:(全体830px-30)-10px=790px。790px/2=395px。もし左右違うサイズにするなら、400px+390px=790pxなどにする。)