中央カラムとサイドバーで異なる背景画像を表示する

中央カラムとサイドバーで異なる背景画像を表示する

Posted at February 7,2006 11:54 PM
Tag:[CSS, Customize, Template]

先日、リキッドレイアウトの背景色を変更するというカスタマイズを紹介しましたが、本エントリーは中央カラムとサイドバーで異なる背景画像を表示するカスタマイズです。

便宜上、公開テンプレートを例に説明しますが、同様の構造であれば他のテンプレートでも適用可能です。なお背景画像を固定するで使用した象を背景に用いています。大きい象は中央カラム、小さい象はサイドバーに表示するためのものです。

1.中央カラム・サイドバーともにスクロールする

1.1 リキッドレイアウト

[サンプル]
背景色を変更するに従って考えると、下記のように青色の部分をスタイルシートに追加すればOKです。

body.layout-three-column-liquid {
    background-image: url(サイドバーに表示する画像ファイルのURLまたはパス);
    background-repeat: repeat;
    background-position: top left;
}
 
/* 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-image: url(中央カラムに表示する画像ファイルのURLまたはパス);
    background-repeat: repeat-y;
}

1.2 固定レイアウト

[サンプル]
固定レイアウトの場合は、body 要素ではなく、box セレクタにサイドバー用の背景画像を設定します。赤色のプロパティは不要ですので削除またはコメントアウトしてください。

.layout-three-column #box {
    width: 850px;
    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-image: url(サイドバーに表示する画像ファイルのURLまたはパス);
    background-repeat: repeat;
    background-position: top left;
}
 
/* 3カラム */
.layout-three-column #content {
    float: left;
    width: 478px;
    margin: 0 0 10px 0;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
    background-image: url(中央カラムに表示する画像ファイルのURLまたはパス);
    background-repeat: repeat-y;
    background-position: center;
}

2.サイドバーの背景画像を固定する

2.1 リキッドレイアウト

[サンプル]
サイドバーの画像を固定する場合は、1.1項の設定にbackground-attachment プロパティを追加します。

body.layout-three-column-liquid {
    background-image: url(サイドバーに表示する画像ファイルのURLまたはパス);
    background-repeat: repeat;
    background-position: top left;
    background-attachment: fixed;
}
 
/* 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-image: url(中央カラムに表示する画像ファイルのURLまたはパス);
    background-repeat: repeat-y;
}

2.2 固定レイアウト

[サンプル]
固定レイアウトも先と同様、1.2項の設定にbackground-attachment プロパティを追加します。

.layout-three-column #box {
    width: 850px;
    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-image: url(サイドバーに表示する画像ファイルのURLまたはパス);
    background-repeat: repeat;
    background-position: top left;
    background-attachment: fixed;
}
 
/* 3カラム */
.layout-three-column #content {
    float: left;
    width: 478px;
    margin: 0 0 10px 0;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
    background-image: url(中央カラムに表示する画像ファイルのURLまたはパス);
    background-repeat: repeat-y;
    background-position: center;
}

3.中央カラムの背景画像を固定する

この方法はIEの場合、画像が固定されないようですので予めご容赦ください。

1項・2項の設定では、中央カラムで固定した画像以外の背景(ブラウザを画像の上下左右)に、 body 要素に指定した背景画像が重なってしまいます。[リキッドレイアウトの失敗サンプル]

アプローチはいくつかあると思いますが、ここでは

  • content セレクタに背景で白を指定して、サイドバーの背景が中央カラムに表示されないようにする
  • blog セレクタに中央カラムの画像を指定

という手法を使いました。

3.1 リキッドレイアウト

[サンプル]
#content セレクタに背景色として白を設定し、.blog セレクタに中央カラムの背景画像を指定します。またお互いの表示順番を設定するために z-index プロパティを使用します(大きい値が上に表示されます)。赤色のプロパティは不要ですので削除またはコメントアウトしてください。

/* エントリー全体 */
.blog {
    padding: 10px;
    font-size: small;
    color: #36414d;
    background: none;
    z-index:2;
    background-image: url(中央カラムに表示する画像ファイルのURLまたはパス);
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
}
 
body.layout-three-column-liquid {
    background-image: url(サイドバーに表示する画像ファイルのURLまたはパス);
    background-repeat: repeat;
    background-position: top left;
}
 
/* 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;
    z-index:1;
    background-color: #ffffff;
}

3.2 固定レイアウト

[サンプル]
リキッドレイアウト同様、#content セレクタに背景色として白を設定し、.blog セレクタに中央カラムの背景画像を指定します。またお互いの表示順番を設定するために z-index プロパティを使用します(大きい値が上に表示されます)。赤色のプロパティは不要ですので削除またはコメントアウトしてください。

/* エントリー全体 */
.blog {
    padding: 10px;
    font-size: small;
    color: #36414d;
    background: none;
    z-index:2;
    background-image: url(中央カラムに表示する画像ファイルのURLまたはパス);
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
}
 
.layout-three-column #box {
    width: 850px;
    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-image: url(サイドバーに表示する画像ファイルのURLまたはパス);
    background-repeat: repeat;
    background-position: top left;
}
 
/* 3カラム */
.layout-three-column #content {
    float: left;
    width: 478px;
    margin: 0 0 10px 0;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
    z-index:1;
    background: #ffffff;
}
関連記事
zenback
人気エントリー
トラックバックURL


コメント

いつもお世話になっております。いつもながら丁寧な解説ありがとございます。IE6で固定が反映されないので少し残念です。また、いい方法があればまた、宜しくお願いします。

[1] Posted by panser : February 9, 2006 12:34 AM

なぜにゾウ?

[2] Posted by Border. : February 9, 2006 11:41 PM

>panserさん
こんばんは。
ご連絡ありがとうございました。
ではでは!

>Border.さん
こんばんはー。
「背景がゾウ」です(笑)。

[3] Posted by yujiro : February 10, 2006 1:09 AM

なるほど!w

[4] Posted by Border. : February 10, 2006 2:12 AM

>Border.さん
センスのない背景ですいまセンス(笑)

[5] Posted by yujiro : February 11, 2006 12:36 AM
コメントする
greeting

*必須

*必須(非表示)


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

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

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

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