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

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

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

単純に考えると、スタイルシートのサイドバー用セレクタ(#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 という赤色部分が背景色の設定ですのでお好きな色を設定してください。

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


トラックバック

スタイルシートのIDとは? from HTMLタグ1個だけのスタイルシート講座
スタイルシートのIDは、一つのHTMLファイルの中で一度しか使えません。なんだか使いにくいものに感じますが、実はCSSのIDはとても便利な機能を持っていま... [続きを読む]

Tracked on October 13, 2006 1:28 PM

リキッドデザインのサンプルレイアウト from デザインウォーカー | DesignWalker - ロサンゼルスで働くウェブデザイナーの日記
先日2xup.orgさんの「一行あたりの文字数を制限するリキッドレイアウト」を読ませていただき、わたくしも実際にサンプルレイアウトを作ってみました?。この... [続きを読む]

Tracked on December 25, 2006 7:31 AM
コメント

 yujiroさん★  ちょっと質問なんですが
 この前、教えていただきましたスクロールバー
 ありますょね? あれって、RSSに登録するのは500件までと書いてあったんですがぁのバーの設定上 登録件数が決まってたりとかしますか? 結構 登録してるんですが全部表示されなくって?どぉしてだろぉ?と思ってちゃんと登録しなおしてみたんですが、既に登録されているRSSデスと出て、登録の方には問題ナィみたいなんですょねぇ?バーの関係ですかねぇ??

 マネェ★フェリィーチェ

[1] Posted by マネェ★フェリィーチェ : February 1, 2006 6:28 PM

いつもお世話になっております。「サイドバーの背景色」の記事拝見させて頂きました。そこで、背景色ではなく一般の壁紙にしたいと思うのですがどのようにすればいいでしょうか?解説のほど宜しくお願いします。

[2] Posted by panser : February 1, 2006 10:12 PM

>マネェ★フェリィーチェさん
こんばんは。
ご質問の件ですが、設定上の決まりは特にありません。
表示が制限されているのはおそらくRSS側の仕様ではないかと思われます(間違ってたらすいません)。

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

>panserさん
こんばんは。
ご質問の件ですが、壁紙(画像)にする場合は文中に登場する

background-color: #ffffe0;

の部分を

background-image: url(hogehoge.gif);

にすればOKです。background-repeatは省略していますので適宜追加してください。
また画像を固定にする場合は背景画像を固定するの1項を参照ください。

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

[3] Posted by yujiro : February 3, 2006 12:40 AM

 yujiroサン  こんにちゎ m(__)m ぃつも無知な質問にご返答いただき本当にありがとぉござぃます m(__)m  そぉでうすかぁ・・バーの設定上 表示件数の制限はナィんですかぁ・・では、ドリコムのRSS側の問題ですょねぇ?どぉやら私のBLOGには20件しか表示されない様になってるみたぃです。 また、色々見てみます。
 ありがとぉござぃましたぁm(__)m

  マネェ★ょり

[4] Posted by マネェ★フェリィーチェ : February 3, 2006 3:29 PM

いつも大変お世話になっております。お聞きしたいのですが、中央カラムに背景色白色の画像を固定で中央に配置して、中央カラム以外(左右サイドバー)には、別の背景色白色の画像を固定で配置する事は、可能でしょうか?恐れ入りますがサポート宜しくお願いします。要するに中央カラムと左右サイドバーに別々の背景色白の画像を配置したいと思います。恐れ入りますがサポート宜しくお願いします。

[5] Posted by panser : February 3, 2006 7:42 PM

>panserさん
こんばんは。
ご質問の件ですが、
中央カラムに画像を表示する場合は、説明にある

background-color: #ffffff;

の部分を

background-image: url(hogehoge.gif);

に変更すればOKです。

また、正常に表示されない件については、#links-left および #links-right の設定が冗長です。また2カラムの部分には設定は必要ありません。
本エントリーで紹介している失敗例までそのまま設定されているようですので、文章含めて再度お読み頂ければ幸いです。

また投稿されたコメントで必要以上にURLが設定されている場合、自動的に保留になります。こちらで日々チェックして公開するようにしておりますので、お待ちください(繰り返し投稿されても公開される訳ではありません)。

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

[6] Posted by yujiro : February 5, 2006 1:52 AM

いつもお世話になりました。何度もすみませんが左右サイドバーに画像(壁紙)を表示させたいのでエントリーの説明通り、body.layout-three-column-liquid {
background-image: url(http://vita.qee.jp/img/rd-steel071.jpg);
}のみを追記しましたが反映されません。お手数ですがサポート宜しくお願いします。

先日のソース分を基本に戻し、下記のようにしました。

body.layout-three-column-liquid { background-image: url(http://vita.qee.jp/img/rd-steel071.jpg); } /* 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; } .layout-three-column-liquid #links-left{ position: absolute; width: 155px; top: 95px; left: 15px; color: #ffffff; } .layout-three-column-liquid #links-right{ position: absolute; width: 155px; top: 95px; right: 15px; color: #ffffff; }
[7] Posted by panser : February 5, 2006 4:07 AM

何度もすみませんが画像(壁紙)は、左右サイドバーに表示させたいと思ってますのでお手数ですが宜しくお願いします。

[8] Posted by panser : February 5, 2006 4:09 AM

恐れ入ります只今、

のようにすると反映されました。何度もすみませんでした。
そこで、左右サイドバーには全体に壁紙(画像)を表示させ中央カラムには、バックを白色にして中央にのみ画像を固定で表示させたいのですがどのようにすればいいでしょうか?サポートお願いします。ちなみに現在中央カラムには、タバコの画像は表示させる事はできているのですが、バックが左右サイドバーと同じ画像になってしまっています。それを白色にさせたいと思っております。何度もすみませんが宜しくお願いします。

[9] Posted by panser : February 5, 2006 4:50 AM

>panserさん
こんばんは。
修正したページをこちらにおきましたのでご確認ください(ソースをそのままお使いください)。
なおこの方法ではIEの場合、中央カラムの画像は固定になりませんので予めご了承ください。

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

[10] Posted by yujiro : February 6, 2006 11:31 PM
コメントする
greeting

*必須

*必須(非表示)


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

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

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

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