TopMovable Typeテンプレート > 2006年1月
2006年1月31日

リキッドレイアウトの背景色を変更する

January 31,2006 11:57 PM
Tag:[, , ]
Permalink
リキッドレイアウトの背景色を変更当サイトで公開中のテンプレートで、リキッドレイアウトの場合にサイドバー(または中央カラム)の背景色を設定する方法です。
現在公開中のスタイルシート生成ツールではリキッドレイアウトの背景色を設定することができませんので、とりあえずこのエントリーで変更方法をお知らせします。設定することでスクリーンショット(左)のような背景色を表示させることができます。

単純に考えると、スタイルシートのサイドバー用セレクタ(#links-left/#links-right)に background プロパティ(リストの青色部分)

.layout-three-column-liquid #links-left{
    position: absolute;
    width: 155px;
    top: 95px;
    left: 15px;
    color: #ffffff;
    background-color: #ffffe0;
}
.layout-three-column-liquid #links-right{
    position: absolute;
    width: 155px;
    top: 95px;
    right: 15px;
    color: #ffffff;
    background-color: #ffffe0;
}
リキッドレイアウトの背景色を変更(失敗例)を設定すれば済みそうですが、top プロパティ、left(または right )プロパティでサイドバーの情報表示位置を決めてしまっているため、このままの状態で background プロパティを与えても、左端(または右端)および中央カラムの間にあるマージン部分には背景色が反映されません。また absolute 指定で配置しているため、サイドバーの情報がある部分までしか色が設定されません(こちらの方が致命的)。
#links-left(#links-right)に background プロパティを設定した場合のサンプルをスクリーンショット(左)に示します。

ということで、ここでは

  1. body 要素全体に背景色を設定
  2. 中央カラムの背景色を設定

という指定を行い、サイドバーに背景色がついているように見せる方法をご紹介します。ここではサイドバーの背景色を変更していますが、中央カラムにも背景色(白)を設定しますので、この配色を反転させれば中央カラムのみに背景色を設定することも可能です。

スタイルシートに下記の青色部分を追加してください。

3カラムレイアウトの場合

body.layout-three-column-liquid {
    background-color: #ffffe0;
}
 
/* 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-color: #ffffff;
}

2カラムレイアウト(右サイドバー)の場合

body.layout-two-column-liquid-right {
    background-color: #ffffe0;
}
 
/* 2カラム(リキッドレイアウト:右サイドバー) */
.layout-two-column-liquid-right #content {
    margin: 0 185px 10px 0;
    border-bottom: 1px solid #666699;
    border-right: 1px solid #666699;
    background-color: #ffffff;
}

2カラムレイアウト(左サイドバー)の場合

body.layout-two-column-liquid-left {
    background-color: #ffffe0;
}
 
/* 2カラム(リキッドレイアウト:左サイドバー) */
.layout-two-column-liquid-left #content {
    margin: 0 0 10px 185px;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    background-color: #ffffff;
}

3つのレイアウトに対してまとめて設定したい場合

body.layout-three-column-liquid,
body.layout-two-column-liquid-right,
body.layout-two-column-liquid-left {
    background-color: #ffffe0;
}
.layout-three-column-liquid #content,
.layout-two-column-liquid-right #content,
.layout-two-column-liquid-left #content {
    background-color: #ffffff;
}

というCSSをそれぞれ追加してください。

サンプルでは #ffffe0 という赤色部分が背景色の設定ですのでお好きな色を設定してください。

Comments [10] | Trackbacks [2]
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