リキッドレイアウトの背景色を変更する: 小粋空間

Top ＞ Movable Type ＞テンプレート＞リキッドレイアウトの背景はいけい色しょくを変更へんこうする

リキッドレイアウトの背景はいけい色しょくを変更へんこうする

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 プロパティを設定せっていした場合ばあいのサンプルをスクリーンショット（左ひだり）に示しめします。

ということで、ここでは

body 要素ようそ全体ぜんたいに背景はいけい色しょくを設定せってい
中央ちゅうおうカラムの背景はいけい色しょくを設定せってい

という指定していを行おこない、サイドバーに背景はいけい色しょくがついているように見みせる方法ほうほうをご紹介しょうかいします。ここではサイドバーの背景はいけい色しょくを変更へんこうしていますが、中央ちゅうおうカラムにも背景はいけい色しょく（白しろ）を設定せっていしますので、この配色はいしょくを反転はんてんさせれば中央ちゅうおうカラムのみに背景はいけい色しょくを設定せっていすることも可能かのうです。

スタイルシートに下記かきの青色あおいろ部分ぶぶんを追加ついかしてください。

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 という赤色あかいろ部分ぶぶんが背景はいけい色しょくの設定せっていですのでお好すきな色いろを設定せっていしてください。

Posted by yujiro このページの先頭せんとうに戻もどる

関連かんれん記事きじ

関連かんれん記事きじをもっと読よむ

トラックバックURL

このエントリーのトラックバックURL:

トラックバック

≫ スタイルシートのIDとは？ from HTMLタグ１個こだけのスタイルシート講座こうざ
スタイルシートの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に登録とうろくするのは５００件けんまでと書かいてあったんですがぁのバーの設定せってい上じょう　登録とうろく件数けんすうが決きまってたりとかしますか？　結構けっこう　登録とうろくしてるんですが全部ぜんぶ表示ひょうじされなくって？どぉしてだろぉ？と思おもってちゃんと登録とうろくしなおしてみたんですが、既すでに登録とうろくされている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は省略しょうりゃくしていますので適宜てきぎ追加ついかしてください。
また画像がぞうを固定こていにする場合ばあいは背景はいけい画像がぞうを固定こていするの１項こうを参照さんしょうください。

以上いじょうです。
それではよろしくお願ねがい致いたします。

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

　yujiroｻﾝ　　こんにちゎ　m(__)m　ぃつも無知むちな質問しつもんにご返答へんとういただき本当ほんとうにありがとぉござぃます　m(__)m　　そぉでうすかぁ・・バーの設定せってい上じょう　表示ひょうじ件数けんすうの制限せいげんはﾅｨんですかぁ・・では、ドリコムのRSS側がわの問題もんだいですょねぇ?どぉやら私わたしのBLOGには２０件けんしか表示ひょうじされない様ようになってるみたぃです。　また、色々いろいろ見みてみます。
　ありがとぉござぃましたぁ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

コメントする

コメントするにはまずサインインしてください。

Now loading...

小粋こいき空間くうかん - a cheap joke and a play on words site

リキッドレイアウトの背景はいけい色しょくを変更へんこうする

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

2カラムレイアウト（右みぎサイドバー）の場合ばあい

2カラムレイアウト（左ひだりサイドバー）の場合ばあい

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