小粋空間  -  a cheap joke and a play on words site

当サイトで公開中のテンプレートで、リキッドレイアウトの場合にサイドバー（または中央カラム）の背景色を設定する方法です。 現在公開中のスタイルシート生成ツールではリキッドレイアウトの背景色を設定することができませんので、とりあえずこのエントリーで変更方法をお知らせします。設定することでスクリーンショット（左）のような背景色を表示させることができます。

単純に考えると、スタイルシートのサイドバー用セレクタ（#links-left/#links-right）に background プロパティ（リストの青色部分）

.layout-three-column-liquid #links-left{
    position: absolute;
    width: 155px;
    top: 95px;
    left: 15px;
    color: #ffffff;
    background-color: #ffffe0;
}
.layout-three-column-liquid #links-right{
    position: absolute;
    width: 155px;
    top: 95px;
    right: 15px;
    color: #ffffff;
    background-color: #ffffe0;
}

を設定すれば済みそうですが、top プロパティ、left（または right ）プロパティでサイドバーの情報表示位置を決めてしまっているため、このままの状態で background プロパティを与えても、左端（または右端）および中央カラムの間にあるマージン部分には背景色が反映されません。また absolute 指定で配置しているため、サイドバーの情報がある部分までしか色が設定されません（こちらの方が致命的）。 #links-left（#links-right）に background プロパティを設定した場合のサンプルをスクリーンショット（左）に示します。

ということで、ここでは

1. body 要素全体に背景色を設定
2. 中央カラムの背景色を設定

という指定を行い、サイドバーに背景色がついているように見せる方法をご紹介します。ここではサイドバーの背景色を変更していますが、中央カラムにも背景色（白）を設定しますので、この配色を反転させれば中央カラムのみに背景色を設定することも可能です。

スタイルシートに下記の青色部分を追加してください。

3カラムレイアウトの場合

body.layout-three-column-liquid {
    background-color: #ffffe0;
}
 
/* 3カラム(リキッドレイアウト) */
.layout-three-column-liquid #content {
    margin: 0 185px 10px;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
    background-color: #ffffff;
}

2カラムレイアウト（右サイドバー）の場合

body.layout-two-column-liquid-right {
    background-color: #ffffe0;
}
 
/* 2カラム(リキッドレイアウト：右サイドバー) */
.layout-two-column-liquid-right #content {
    margin: 0 185px 10px 0;
    border-bottom: 1px solid #666699;
    border-right: 1px solid #666699;
    background-color: #ffffff;
}

2カラムレイアウト（左サイドバー）の場合

body.layout-two-column-liquid-left {
    background-color: #ffffe0;
}
 
/* 2カラム(リキッドレイアウト：左サイドバー) */
.layout-two-column-liquid-left #content {
    margin: 0 0 10px 185px;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    background-color: #ffffff;
}

3つのレイアウトに対してまとめて設定したい場合

body.layout-three-column-liquid,
body.layout-two-column-liquid-right,
body.layout-two-column-liquid-left {
    background-color: #ffffe0;
}
.layout-three-column-liquid #content,
.layout-two-column-liquid-right #content,
.layout-two-column-liquid-left #content {
    background-color: #ffffff;
}

というCSSをそれぞれ追加してください。

サンプルでは #ffffe0 という赤色部分が背景色の設定ですのでお好きな色を設定してください。