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

CSSでサイドバーの背景を最後まで表示する

マルチカラムレイアウトで困るのは、サイドバーに背景色を与えた場合、サイドバーの内容が本文（中央カラム）の表示より短くなった場合、背景色がそこで途切れてしまうことです。 ということで、このエントリーではページの最後までサイドバーの背景色を表示するカスタマイズをご紹介します。サンプルは公開テンプレートを用いてますが一般的な手法ですので他のテンプレートでも適用可能です。 なお本エントリーは固定レイアウトのカスタマイズです。リキッドレイアウトについてはリキッドレイアウトの背景色を変更するを参照ください。 以前にもサイドバーの背景を最後まで表示するという記事をエントリーしましたが、現在公開しているテンプレートの内容にあわせて改訂しました。なおCSSの構造的には前記事の方がシンプルなので併せて参照頂ければ理解が深まると思います。

１．失敗例

本サイトの公開テンプレート（2カラム・右にサイドバー表示）のCSSで右サイドバーのレイアウトを指定しているセレクタに、背景色（グレー）を追加してみます。

/* 2カラム(右サイドバー) */
.layout-two-column-right #content {
    float: left;
    width: 478px;
    margin: 0 0 10px 0;
    border-bottom: 1px solid #666699;
    border-right: 1px solid #666699;
}
.layout-two-column-right #links-right-box {
    float: left;
    width: 185px;
    background-color: #dddddd;
}
.layout-two-column-right #links-right {
    padding: 15px 15px 0;
    color: #ffffff;
}

この設定方法ではサイドバーの表示が本文より短い場合、サンプルのように指定した背景が途中までしか表示されません。スクリーンショットをクリックするとサンプルを表示します。

２．正しい設定方法

２．１ 画像を用意する

背景となる画像を用意します（リンクをクリックするとここで用いる画像が表示されます）。

背景画像サンプル

この画像は中央カラムの背景（白）およびサイドバーの背景（グレー）となるものです。長さ667pxで作っています。

この画像の作り方はかなりいい加減で、まず先の表示されたブラウザをフリーのキャプチャソフトでキャプチャして、その一部分を切り抜いたものです（厳密には後で若干修正しています）。

２．２ 画像のアップロード

作成した画像を images ディレクトリ等にアップロードします。ここでは back.jpg というファイル名にしています。

２．３ スタイルシート修正

styles-site.css を下記のように修正します。
まずリスト上の #box に対し、背景画像を表示するための background プロパティを追加します（青色）。url には先ほどアップロードした画像を指定します。
次にデフォルトで表示しているボックス両脇の罫線を削除し、background-color プロパティも不要のため削除します（赤色）。

リスト下の #content については、中央カラムと右カラムを区切る罫線、および中央カラム下の罫線を削除し（赤色）、区切り線は画像を使って描画しています（無理に罫線を入れる必要はありません）。

/* 2カラム用 */
.layout-two-column-left #box,
.layout-two-column-right #box {
    width: 665px;
    margin-right: auto;
    margin-left: auto;
    padding: 0 0 15px 0;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
    text-align: left;
    background-color: #ffffff;
    background: url(images/back.jpg) repeat-y;
}
　　　　　　：
/* 2カラム(右サイドバー) */
.layout-two-column-right #content {
    float: left;
    width: 478px;
    margin: 0 0 10px 0;
    border-bottom: 1px solid #666699;
    border-right: 1px solid #666699;
}

以上です。これでスクリーンショットのようにページの最後まできれいに表示されます。 サンプル画像は横幅いっぱいのものを作りましたが、サイドバーのみに色をつける方法でも大丈夫だと思います。その場合サイドバーと同じ幅の画像を作り、 #box の background プロパティの設定を

background: #ffffff url(images/back.jpg) repeat-y top right;

とすれば中央カラムは白背景で、右寄りに画像が配置されます（間違ってたらすいません）。