背景色の変更方法

背景色の変更方法です。当サイト作者が作成したテンプレートである valid-seo-2c と valid-seo-3c のver1.0.0についてです。

CSSで変更するコード

ページ部分は白のまま、余白部分を白以外に変更

CSS内の/*背景色*/の部分で定義します。背景色の変更方法のサンプルを載せます。

  1. フッターはグレイ、その他のページ部分は白、余白を黒にする場合で例示します。

    
    /*背景色*/
    body          {background:#000;}   /*全体(ページ全体+ページ外の余白部分)*/
     #page        {background:#fff;}   /*ページ全体*/
      #header     {background:#fff;}   /*ページ上部*/
       #container {background:#fff;}   /*記事とサイドバー(左)を内包するディレクトリ*/
        #content  {background:#fff;}   /*記事部分*/
         #tertiary{background:#fff;}   /*プラグインカテゴリ3*/
        #sidebar  {background:#fff;}   /*サイドバー(左)*/
         #primary {background:#fff;}   /*プラグインカテゴリ1*/
       #sidebar2  {background:#fff;}   /*サイドバー2(右)*/
        #secondary{background:#fff;}   /*プラグインカテゴリ2*/
      #footer     {background:#eee;}   /*ページ下部*/
    
    valid-seo-100-body-background-black.png
  2. 上のコードを短縮すると次のとおりです。

    
    /*背景色*/
    body{background:#000;}
    #page,
    #header,
    #container,
    #content,
    #tertiary,
    #sidebar,
    #primary,
    #sidebar2,
    #secondary{background:#fff;}
    #footer{background:#eee;}
    

ページ部分を白以外に変更、余白部分も変更

  1. フッターはグレイ、その他のページ部分は黄緑(白以外)で、余白を白にする場合で例示します(余白も白以外に変更可)。/*背景色*/の部分と/*サイドバーの背後(不慣れな内はカスタム非推奨)*/の部分を変更します。

    
    /*背景色*/
    body{background:#fff;}
    #page,
    #header,
    #container,
    #content,
    #tertiary,
    #sidebar,
    #primary,
    #sidebar2,
    #secondary{background:#cf9;}
    #footer{background:#eee;}
    
    
    /*サイドバーの背後(不慣れな内はカスタム非推奨)*/
    #fixedbox{
    top:0;
    height:100%;
    background:#cf9;/*←ここを黄緑色に定義した*/
    position:fixed;
    z-index:10;
    }
    
    valid-seo-100-page-padding0.png
  2. 上記設定に加えてページ部分の左右にpaddingを設定する場合は次のコードを付け足します。これにより下図で赤色の破線で囲った部分に、黄緑色のスペースができます。上図よりも見栄えが良い気がします。(ただしIE6は表示が崩れてしまいますので、IE6だけpaddingが増えないようにします。)

    
    #page{padding:0 14px;}
    * html #page{padding:0;}/*IE6用*/
    
    valid-seo-100-page-padding.png

個別記事部分の背景色を変更

  1. 個別記事部分の背景色は、デフォルトでは#contentのbackgroundと同じ色です。個別記事部分の背景色だけを変更することもできます。

  2. テンプレートのCSS内のどこでもいいのですが、今後のメンテナンス時の効率を考慮し、/*背景色*/の部分に次のコードを追加します。記事部分全体を黄緑にした後、個別記事部分を白にする場合で例示します。(ver1.0.1以降は既に記載されいますので、#fffなどを変更するだけです。)

    
    .entry{background:#fff;}/*個別記事ごとの背景色*/
    
    valid-seo-100-each-entry-background-color-code.png
    valid-seo-100-each-entry-background-color.png

CSSの不要な設定を削除

  1. valid-seo-c2とvalid-seo-c3のver1.0.0では、作者の認識不足で不要な定義がありました。この場を借りましてお詫びいたします。以下、その修正方法です。ver1.0.1(2012年5月1日昼以降ダウンロード分)からは修正済みですので、新しくダウンロードしていただければこの件に関する手動による修正は不要です。

  2. body要素にあるbackground:fixed;を削除します。下図の赤枠で囲ったところです。

    valid-seo-100-body-background-fixed.png
  3. backgroundにcolorを定義しない時は自動で透明色(transparent)が定義されるようです。よって、ここよりも上部でbodyに定義したcolorが透明色で上書きされてしまい、希望するcolorが反映されない状況になっていました。上書きされないように上記の通り削除する次第です。

  4. footerも二重で定義されていましたので、下図の赤枠で囲った部分background:#eee;を削除していただきたいです。同じ行のbothの右側の;や最後の}は削除しないでください。下図では、赤枠で隠れて見えないので念のため書きました。

    valid-seo-100-footer-background-color-2.png
関連記事
(この一行は、各記事の最後に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)
スポンサードリンク
(この一行は、各ページ下部に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)