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

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

float 指定のマルチカラムテンプレートのデザインで困るのは、サイドバーに背景色を与えた場合、サイドバーの内容が本文（中央カラム）の表示より短くなった場合、背景色がそこで途切れてしまうことです。 例えば、本サイトの公開テンプレート（2カラム・右にサイドバー表示）のCSSの右サイドバーに背景色（ピンク）を追加してみます。

/* 右カラム */
#links-right{
    float: left;
    background-color: pink;
    width : 155px ;
    padding-top : 15px;
    padding-left : 15px;
    padding-right : 15px;
    }

この設定例で、サイドバーの表示が本文より短い場合、最初の画像のように指定した背景が途中までしか表示されません。

ということで、ページの最後までサイドバーの背景色を表示するカスタマイズ方法です。

１．画像を用意する

次のような画像を用意します。これは中央カラム（白）およびサイドバーの背景（ピンク）となるものです。サンプルのテンプレートは横幅が700pxですので、長さ700pxにしています（サンプルは縮小表示していますのでクリックして実物を確認してください）。

この画像の作り方はかなりいい加減で、まず先の表示されたブラウザをキャプチャソフト（フリーで色々あると思います）でキャプチャして、その一部分を切り抜いたものです。

２．画像のアップロード

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

３．スタイルシート修正

styles-site.css を下記のように修正します。公開テンプレートでは中央カラムにボーダーを表示していますが今回の例では削除して、画像の線を使っています（無理に罫線を入れる必要はありませんが）。また冒頭に書いた links-right の background-color は不要です。

/* 3カラム全体 */
#box {
    margin-right: auto;
    margin-left: auto;
    text-align: left;
    padding: 0px;
    padding-bottom: 20px;
    width: 700px;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
    background-color: #FFFFFF;
    background: url(images/back.jpg) repeat-y;
}
 
　　　　　　　： 
 
/* エントリーのある大段落（3カラム） */
#content {
    float: left;
    width: 514px;
    border-bottom: 1px solid #666699;
/*    border-left: 1px solid #666699;*/
    border-right: 1px solid #666699;
    margin-top : 0px ;
    margin-bottom : 10px ;
}

画像は横幅いっぱいのものでなくても大丈夫だと思います。例えばサイドバーの幅の
画像を作って #box に

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

とすれば右寄りに画像が配置されます（間違ってたらすいません）。

以上です。これで左のようにページの最後まできれいに表示されます。