Movable Typeデザインカスタマイズレッスン3日目

Webサイト開発・運営

2008.06.21

この記事は約5分で読めます。

記事内に広告が含まれています。

さて、今回はレイアウト幅の調整を行います。
3カラムで左から大（500px）、小（160px）、中（234px）へと調整していきます。

まず3カラム固定、ということで、3カラムのレイアウトを指定しているスタイルシート文をここに参考までに抜き出してきます。

/* 3カラム固定レイアウト幅 */
.layout-three-column #box {
    width: 850px;
}

/* 3カラム固定レイアウト */
.layout-three-column #content {
    float: left;
    width: 478px;
    border-bottom: 1px solid #669;
    border-left: 1px solid #669;
    border-right: 1px solid #669;
}
.layout-three-column #links-left-box,
.layout-three-column #links-right-box {
    float: left;
    width: 185px;
}
.layout-three-column #links-left,
.layout-three-column #links-right {
    padding: 15px 15px 0 15px;
}

/* 3カラム固定レイアウト(ブログ記事全体) */
.layout-three-column .blog {
    padding: 10px 15px;
}

これを見ると全体の幅が850pxです！とあります。

そこは全体のサイズなので置いといて、#contentと書かれているブログ本文部分が幅478px、#links-left-boxの左カラム部分と#links-right-boxの右カラム部分が185pxとあります。これら3つを足すと、848px！？
計算あわねーと思ったら、border-left: 1px solid #669;とかborder-right: 1px solid #669;の1pxの線がありますので、これを足すとちょうど850pxになるようです。
というわけで、横幅の関係が見えてきそうですが、もう少しチェックするところがあります。

padding: 15px 15px 0 15px;とか、padding: 10px 15px;の記述が見えます。これはつまり、ブログ本文部分、左カラム、右カラム部分において、余白を左右に15pxずつとっているということになります。
ブログ本文部分の幅が478pxなので、余白部分を差し引いた実際の表示領域は478px-15px-15px＝448pxということになります。
こういった幅と余白、全体のサイズの関係のつじつまが狂わないようにサイズ調整をかけていきます。

ブログ本文部分（大）
現在の幅は478px（表示される領域は448px）となっております。
ここでFlickrの500px写真を張り付けたいので、表示される領域448pxを500px、つまり＋52pxします。
ブログ本文部分の幅を478px＋52px＝530pxとします。

左カラム（小）
現在の幅は185px（表示される領域は155px）となっております。
幅160pxのブログパーツを貼りたいので、表示される領域を160px、つまり＋5pxします。
左カラムの幅を185px＋5px＝190pxとします。

右カラム（中）
現在の幅は185px（表示される領域は155px）となっております。
幅234pxのハーフバナーを貼りたいので、表示される領域を234px、つまり＋79pxします。
右カラムの幅を185px＋79px＝264pxとします。

全体の幅
それぞれの幅をいくつか広げましたので、全体の幅の指定も広げる必要があります。
52px＋5px＋79px＝136px増やす必要があります。
つまり、全体の幅を850px＋136px＝986pxとします。

これらをまとえめるとこうなります。

/* 3カラム固定レイアウト幅 */
.layout-three-column #box {
    width: 986px;
}

/* 3カラム固定レイアウト */
.layout-three-column #content {
    float: left;
    width: 530px;
    border-bottom: 1px solid #669;
    border-left: 1px solid #669;
    border-right: 1px solid #669;
}
.layout-three-column #links-left-box {
    float: left;
    width: 190px;
}
.layout-three-column #links-right-box {
    float: left;
    width: 264px;
}
.layout-three-column #links-left,
.layout-three-column #links-right {
    padding: 15px 15px 0 15px;
}

/* 3カラム固定レイアウト(ブログ記事全体) */
.layout-three-column .blog {
    padding: 10px 15px;
}