アメブロテンプレート販売[アメっプ!]

アメブロプロフェッショナルテンプレート販売や無料で使える読者登録ボタンなどをお届けします。

新規登録 | ログイン

背景に関する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重に背景を設定できます。

    特徴説明

    カスタム可能/CSS編集用デザイン

    無料ユーザー登録
    ユーザー登録ログインするとアイテムをダウンロードできます!