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

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

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

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

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

１．１ リキッドレイアウト

[サンプル]
背景色を変更するに従って考えると、下記のように青色の部分をスタイルシートに追加すれば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;
}

１．２ 固定レイアウト

[サンプル]
固定レイアウトの場合は、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;
}

２．サイドバーの背景画像を固定する

２．１ リキッドレイアウト

[サンプル]
サイドバーの画像を固定する場合は、１．１項の設定に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;
}

２．２ 固定レイアウト

[サンプル]
固定レイアウトも先と同様、１．２項の設定に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;
}

３．中央カラムの背景画像を固定する

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

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

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

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

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

３．１ リキッドレイアウト

[サンプル]
#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;
}

３．２ 固定レイアウト

[サンプル]
リキッドレイアウト同様、#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;
}