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

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

Posted at October 31,2006 12:59 AM
Tag:[Color, CSS, Template]

当サイトで配布しているテンプレート(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」等を組み合わせたキーワードで検索すると色々出てきます。

関連記事
トラックバックURL


トラックバック

準備完了 from 摩亜爺主人のブログ
まだIEでは完璧に表示されませんが、ほぼ画面表示は出来上がりました。 このテンプ... [続きを読む]

Tracked on March 12, 2007 5:50 PM
コメントする
greeting

*必須

*必須(非表示)


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

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

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

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