リキッドレイアウトの背景色を変更する
 当サイトで公開中のテンプレートで、リキッドレイアウトの場合にサイドバー（または中央カラム）の背景色を設定する方法です。現在公開中のスタイルシート生成ツールではリキッドレイアウトの背景色を設定することができませんので、とりあえずこのエントリーで変更方法をお知らせします。設定することでスクリーンショット（左）のような背景色を表示させることができます。 |
単純に考えると、スタイルシートのサイドバー用セレクタ（#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 という赤色部分が背景色の設定ですのでお好きな色を設定してください。
- Movable Typeのコンテンツデータで公開日を比較する方法
- MT7テンプレート作成画面に表示される「コンテンツタイプ」「コンテンツフィールド」の意味
- Movable Typeでテンプレートの動作を簡単に確認する方法
- Movable Typeでスマホサイト用トップページをPCサイト用トップページと異なるURLにする方法
- Movable TypeでCSSファイルやJavaScriptファイルなどを管理するためのTips
- Movable Type 4.2 テンプレートセット（コミュニティ用）修正
- Movable Type 4.2 テンプレートセット（コミュニティブログ対応版）修正
- Movable Type 4.2 テンプレートセット（コミュニティブログ対応版）
- Movable Type 4.2 配布テンプレートセット修正（カテゴリーアーカイブ・コメント完了）
- Movable Type 4.2 テンプレートセット修正（アーカイブインデックス追加等）
- Movable Type 4.2 テンプレートセット修正
- Movable Type 4.1 テンプレートセット修正
- 「iPhoneテンプレートfor MT」 by cremadesign
- Movable Type 4.1 テンプレートセット（スタイル対応版）
- 小粋空間テンプレートセットのカラムレイアウト変更方法
≫ スタイルシートのIDとは？ from HTMLタグ１個だけのスタイルシート講座
スタイルシートのIDは、一つのHTMLファイルの中で一度しか使えません。なんだか使いにくいものに感じますが、実はCSSのIDはとても便利な機能を持っていま... [続きを読む]
≫ リキッドデザインのサンプルレイアウト from デザインウォーカー | DesignWalker - ロサンゼルスで働くウェブデザイナーの日記
先日2xup.orgさんの「一行あたりの文字数を制限するリキッドレイアウト」を読ませていただき、わたくしも実際にサンプルレイアウトを作ってみました?。この... [続きを読む]
yujiroさん★ ちょっと質問なんですが
この前、教えていただきましたスクロールバー
ありますょね？ あれって、RSSに登録するのは５００件までと書いてあったんですがぁのバーの設定上 登録件数が決まってたりとかしますか？ 結構 登録してるんですが全部表示されなくって？どぉしてだろぉ？と思ってちゃんと登録しなおしてみたんですが、既に登録されているRSSﾃﾞｽと出て、登録の方には問題ナィみたいなんですょねぇ?バーの関係ですかねぇ?？
マネェ★フェリィーチェ
いつもお世話になっております。「サイドバーの背景色」の記事拝見させて頂きました。そこで、背景色ではなく一般の壁紙にしたいと思うのですがどのようにすればいいでしょうか？解説のほど宜しくお願いします。
＞マネェ★フェリィーチェさん
こんばんは。
ご質問の件ですが、設定上の決まりは特にありません。
表示が制限されているのはおそらくRSS側の仕様ではないかと思われます（間違ってたらすいません）。
以上です。
それではよろしくお願い致します。
＞panserさん
こんばんは。
ご質問の件ですが、壁紙（画像）にする場合は文中に登場する
background-color: #ffffe0;
の部分を
background-image: url(hogehoge.gif);
にすればOKです。background-repeatは省略していますので適宜追加してください。
また画像を固定にする場合は背景画像を固定するの１項を参照ください。
以上です。
それではよろしくお願い致します。
yujiroｻﾝ こんにちゎ m(__)m ぃつも無知な質問にご返答いただき本当にありがとぉござぃます m(__)m そぉでうすかぁ・・バーの設定上 表示件数の制限はﾅｨんですかぁ・・では、ドリコムのRSS側の問題ですょねぇ?どぉやら私のBLOGには２０件しか表示されない様になってるみたぃです。 また、色々見てみます。
ありがとぉござぃましたぁm(__)m
マネェ★ょり
いつも大変お世話になっております。お聞きしたいのですが、中央カラムに背景色白色の画像を固定で中央に配置して、中央カラム以外（左右サイドバー）には、別の背景色白色の画像を固定で配置する事は、可能でしょうか？恐れ入りますがサポート宜しくお願いします。要するに中央カラムと左右サイドバーに別々の背景色白の画像を配置したいと思います。恐れ入りますがサポート宜しくお願いします。
＞panserさん
こんばんは。
ご質問の件ですが、
中央カラムに画像を表示する場合は、説明にある
background-color: #ffffff;
の部分を
background-image: url(hogehoge.gif);
に変更すればOKです。
また、正常に表示されない件については、#links-left および #links-right の設定が冗長です。また2カラムの部分には設定は必要ありません。
本エントリーで紹介している失敗例までそのまま設定されているようですので、文章含めて再度お読み頂ければ幸いです。
また投稿されたコメントで必要以上にURLが設定されている場合、自動的に保留になります。こちらで日々チェックして公開するようにしておりますので、お待ちください（繰り返し投稿されても公開される訳ではありません）。
以上です。
それではよろしくお願い致します。
いつもお世話になりました。何度もすみませんが左右サイドバーに画像（壁紙）を表示させたいのでエントリーの説明通り、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; }
何度もすみませんが画像（壁紙）は、左右サイドバーに表示させたいと思ってますのでお手数ですが宜しくお願いします。
恐れ入ります只今、
のようにすると反映されました。何度もすみませんでした。
そこで、左右サイドバーには全体に壁紙（画像）を表示させ中央カラムには、バックを白色にして中央にのみ画像を固定で表示させたいのですがどのようにすればいいでしょうか？サポートお願いします。ちなみに現在中央カラムには、タバコの画像は表示させる事はできているのですが、バックが左右サイドバーと同じ画像になってしまっています。それを白色にさせたいと思っております。何度もすみませんが宜しくお願いします。
