TopMovable Typeテンプレート > 2006年4月
2006年4月14日

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

マルチカラムレイアウトで困るのは、サイドバーに背景色を与えた場合、サイドバーの内容が本文(中央カラム)の表示より短くなった場合、背景色がそこで途切れてしまうことです。

ということで、このエントリーではページの最後までサイドバーの背景色を表示するカスタマイズをご紹介します。

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

サンプルは公開テンプレートを用いてますが一般的な手法ですので他のテンプレートでも適用可能です。

なお本エントリーは固定レイアウトのカスタマイズです。リキッドレイアウトについてはリキッドレイアウトの背景色を変更するを参照ください。

以前にもサイドバーの背景を最後まで表示するという記事をエントリーしましたが、現在公開しているテンプレートの内容にあわせて改訂しました。なおCSSの構造的には前記事の方がシンプルなので併せて参照頂ければ理解が深まると思います。

1.失敗例

本サイトの公開テンプレート(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;
}

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

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

2.正しい設定方法

2.1 画像を用意する

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

背景画像サンプル

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

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

2.2 画像のアップロード

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

2.3 スタイルシート修正

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;
}

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

以上です。これでスクリーンショットのようにページの最後まできれいに表示されます。

サンプル画像は横幅いっぱいのものを作りましたが、サイドバーのみに色をつける方法でも大丈夫だと思います。その場合サイドバーと同じ幅の画像を作り、 #box の background プロパティの設定を

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

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

Comments [2] | Trackbacks [1]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3