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

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

Posted at April 14,2006 1:50 AM
Tag:[Background, Customize, MovableType, Template]

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

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

完成イメージ
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;

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

関連記事
zenback
人気エントリー
トラックバックURL


トラックバック

サイドバーの背景 変更! from Y乃助
サイドバーの背景が悲しくフッダーまで届かない(号泣 そこで小粋空間さんの記事 C... [続きを読む]

Tracked on June 19, 2007 8:28 PM
コメント

いつもお世話になっております。3カラムのテンプレートの件で教えて下さい。タイトルとエントリーの文字の間隔を広げるにはどこの部分をどのように修正すればいいのでしょうか?

[1] Posted by panser : April 14, 2006 3:05 AM

>panserさん
こんにちは。
ご質問の件ですが、スタイルシートの下記の赤色部分の値を変更してください。

/* エントリータイトル */ .entry-header {     margin: 15px 0 0 0;     color: #523E35;     font-size: 12px;     font-weight: bold; }

以上です。
それではよろしくお願い致します。

[2] Posted by yujiro : April 15, 2006 3:12 PM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)