ブログ全体のサイズをカスタマイズする

今回はブログ全体のサイズをカスタマイズする方法を説明します。ブログ構成は、全体のボックス、左右カラム、エントリ部分はもちろん、忘れてはならないのは、それぞれに隣接するスペース部分です。これらが組み合ってサイズは決まっていますが、計算の仕方と、該当するスタイルシート部分がわかれば、それぞれのサイズ変更は意外と簡単です。
左右カラムやエントリ部分のサイズが変更できれば、更に使いやすくなると思いますので、是非挑戦してみてください。

1.ブログの標準サイズ指定

まずは標準で指定しているサイズを確認します。ここで重要なのは、スペースもサイズ計算に含まれる、という点です。忘れがちなので注意してください。(説明するテーブルは、実サイズと比率が異なります)

標準のブログサイズ

15 a

150 b

10 c

500 d

10 e

230 f

15 g

数字は指定しているピクセルサイズ(px)です。カスタマイズする前のブログを確認してみて下さい。このようなサイズになっているはずです。
下のアルファベットは計算の際に使用します。サイズは自由にできますが、合計が合っていなければなりません。

2.指定しているスタイルシート部分

サイズを指定しているのはスタイルシートです。ですので、スタイルシートの指定部分だけ変更すれば、ブログのサイズは変更できます(変更したサイズよりも大きい画像などをHTML部分で指定していればカラム落ちします)。
それぞれのサイズをしている部分だけ抜粋します。

全体のボックスサイズ(930px = a+b+c+d+e+f+g)
#box{
width: 930px;
margin-right: auto;
margin-left: auto;
border: solid 1px #000;
}

全体のボックスの左右スペース(各15px = a+g)
#box-margin{
margin: 0 15px;
}

左ボックス(左カラムとエントリ部分。計660px = b+c+d )
#box-left{
float: left;
width: 660px;
}

右ボックス(=右カラム。230px(+10px) = f+(e))
#box-right{
float: right;
width: 230px;
}

エントリ部分(500px = d)
#box-main{
float: right;
width: 500px;
}

左カラム(150px = b)
#box-sub{
float: left;
width: 150px;
}

カッコ内が指定しているサイズで、=以降は前記した計算用のアルファベットです。実際に計算すれば、そのサイズになりますね。
ある程度知識があれば、これでサイズの変更ができるかもしれませんが、もう少し説明します。計算さえ間違えなければ、サイズの変更は簡単です。

3.2カラムを作成する

3カラムというのは、2カラムをまず作成して、その片方のカラムの内部を更に2カラムにする、という構成です。ですので、まずは2カラムを作成します。

2カラムの構成

15 a

660 左ボックス b+c+d

240 右ボックス e+f

15 g

これが最初に作成する2カラムです。左ボックス内部を更に2カラムにして、左カラムとエントリ部分を作成しています。
このような構成になっているのがわかれば、あとは計算したサイズをそれぞれ変更すればブログのサイズ変更は完了です。

4.2カラムの計算

まずは準備です。指定しているスタイルシート部分と、色が赤の部分が指定している箇所です。実際に計算してみてください。

全体のボックスサイズ(a〜g)は930pxです。

#box{
width: 930px;
margin-right: auto;
margin-left: auto;
border: solid 1px #000;
}

全体のボックスに左右のマージンを指定することで、左右カラムのスペース(a g)になります。(930-(15+15)=900px)

#box-margin{
margin: 0 15px;
}

左カラム(b)とエントリ部分(d)とスペース部分(c)の合計が、左ボックスのサイズになります。(150+10+500=660px)

#box-left{
float: left;
width: 660px;
}

結果的に、全体のボックスから左右のスペースを引き、そこから左ボックスのサイズを引いたサイズが右ボックス+スペース部分になります。
930-(15+15)-(150+10+500)=240px
ここが少し紛らわしい部分ですが、メインボックス内部で、左ボックス(b+c+d)をfloatを使用して左に寄せて、右ボックス(fだけ)を同じくfloatを使用して右に寄せています。
右ボックス(f)のサイズが230pxで、これを右に寄せているので、結果的に右ボックスの左に10pxのスペース(e)ができます。
計算する上で、ここが一番間違えやすい部分ですので、よく注意してください。右カラム(f)の横のスペース(e)は結果的にできるスペースで、スタイルシートで直接指定するスペースではありません(もちろん計算してスペースができるようにします)。

#box-right{
float: right;(このfloatで右に寄せる)
width: 230px;
}

これで左右スペース、左ボックス、右ボックス(右カラム)が作成できました。次は左ボックス内に2カラムを作成し、左カラムとエントリ部分を作ります。

4.左ボックスに2カラムを作成する

左ボックスを先に作成しましたが、計算上は左カラムとエントリ部分とスペース部分のサイズを先に決定しないと作成できません。合計が結果的に左ボックスのサイズになるわけです。

左カラム(b)は150pxです。floatで左に寄せています。

#box-sub{
float: left;
width: 150px;
}

エントリ部分(d)は500pxです。floatで右に寄せています。

#box-main{
float: right;(右に寄せる)
width: 500px;
}

先ほどと同じですね。左カラム(b = 150px)を左に寄せ、エントリ部分(d = 500px)を右に寄せます。結果的に10pxのスペース(c)が間にできます(660-(150+500)=10px)。
このスペースも、直接的に指定するのではなく、結果的にできるスペースになります。
ちなみに3カラムを作成する方法はいくつかあるので、このカスタマイズは、この方法を使用したテンプレートでないと使用できません。

これでサイズ変更の説明は終わりです。次回は実際にサイズを変更してみましょう。