Top > CMS・ブログ > Serene Bachテンプレート > 2006年10月
2006年10月31日

公開テンプレートの背景色をCSSで変更する

October 31,2006 12:59 AM
Tag:[, , ]
Permalink

当サイトで配布しているテンプレート(3・2・1カラム固定レイアウトおよび1カラムリキッドレイアウト)の、ブログの左右および下部に表示されている背景の背景色を変更する方法です。

まずはサンプルをご覧ください。

変更前
変更前

変更後
変更後

以下、変更方法です。

1.固定レイアウト(3カラム/2カラム/1カラム)の場合

リスト1.1に示すスタイルシートの赤色部分を変更します。この設定はスタイルシートの後方にあります。

リスト1.1 固定レイアウト(3カラム/2カラム/1カラム)の場合

body.layout-three-column,
body.layout-two-column-left,
body.layout-two-column-right,
body.layout-one-column {
    margin-bottom: 20px;
    text-align: center;
    background: #36414d;
}

2.1カラムリキッドレイアウトの場合

リスト2.1に示すスタイルシートの赤色部分を変更します。1項と同様、この設定もスタイルシートの後方にあります。

リスト2.1 1カラムリキッドレイアウトの場合

body.layout-one-column-liquid {
    background: #36414d;
}

3.変更例:背景色をグレーに変更

冒頭のスクリーンショットの「変更後」の設定はリスト3.1のように変更しています。色はお好みに応じて変更してください。

リスト3.1 変更例

body.layout-three-column,
body.layout-two-column-left,
body.layout-two-column-right,
body.layout-one-column {
    margin-bottom: 20px;
    text-align: center;
    background: #dddddd;
}

カラーの指定方法は、例えば下記にあります。

eWebWeb配色の見本Webセーフカラー216色カラーネーム一覧

その他、Google 等の検索エンジンで「Web」と「配色」「カラー」「カラーチャート」「RGB」等を組み合わせたキーワードで検索すると色々出てきます。

Comments [0] | Trackbacks [1]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
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