背景に関するCSS構造を知る

アメブロのデザインをする上で全体の背景関連をコントロールしているのがCSSの.skinBodyというclassです。
.skinBodyは3つ用意されていて.skinBody .skinBody2 .skinBody3の3つのclassが用意されています。
この3つのclassを駆使することで3重に背景を重ねて表示することができます。

例えば

  • 全体の背景
  • コンテンツ部分の背景
  • ワンポイントで入れる背景
  • などを設定することができます。

    下記基本編集可能CSSに用意されているので設定をしてみてください。

    
    /* (3-1) ボディ(全体)
    --------------------------------------------*/
    /* skinBody ボディ */
    .skinBody{}/* ←ブログ全体に背景を敷きたいとき */
    .skinBody2{}
    .skinBody3{}
    

    例えば下記のように設定することで背景を一枚入れることができます。

    .skinBody{
    background:url(http://背景画像のURL);
    }
    

    背景をリピートさせたくない場合は

    .skinBody{
    background:url(http://背景画像のURL)no-repeat;
    }
    

    ※裏技テクニック
    用意されたclassで背景を設定する場合3重に重ねることができますが、bodyタグに背景を設定すると4重に背景を設定できます。