コンテンツ背景、ヘッダー以下の背景を変える

アメブロカスタマイズ

CSSプロパティ

背景に画像や好きな色を設定する

コンテンツ背景とはどこ

タイトルとその下のナビ部分以下のピンク色の部分です。

blog背景の仕組み

　「CSS編集用デザイン」では以下のように記述されています。

/* (1-2) 基本背景
--------------------------------------------*/
/* コンテンツ背景、ヘッダー以下の背景色 */
.skin-blogBody, .skin-blogBodyInner {
background-color: #ffffff;
}

　.skin-blogBody, .skin-blogBodyInner　とあります。「，」は区切りの記号ですから２つあります。

　.skin-blogBody　がコンテンツ背景で、 .skin-blogBodyInner　がヘッダー以下の背景です。

　それぞれ２つに分けることができます。

/* (1-2) 基本背景
--------------------------------------------*/
/* コンテンツ背景、ヘッダー以下の背景色 */
.skin-blogBody {
background-color: #00ff00;
}
.skin-blogBodyInner {
background-color: #ff00ff;
}

　タイトルとそのナビの下全体が、skin-blogBody で、その上に　skin-blogBodyInner　が載っています。skin-bgMainがブログの記事部分です。

　上の様に重なっているイメージです。画面に表示されるのは、これを上から眺めていると思えばよいでしょう。

　ブログ本体以外の背景がblogBodyで、本体がblogBodyInnerです。

　個々に別な色を設定することがことができます。

　画像を設定したいときには、backuground-color　ではなく、　background-image　で指定します。

blogbodyに画像を設定する

blogBodyとblogBodyInnerを別な画像

/* (1-2) 基本背景
--------------------------------------------*/
/* コンテンツ背景、ヘッダー以下の背景色 */
.skin-blogBody {
background-image: url(画像のURL）;
}
.skin-blogBodyInner {
background-image: url(画像のURL）;
}

blogBodyとblogBodyInnerを同一画像

/* (1-2) 基本背景
--------------------------------------------*/
/* コンテンツ背景、ヘッダー以下の背景色 */
.skin-blogBody, .skin-blogBodyInner {
background-image: url(画像のURL）;
}

メイン(記事)エリアの背景

メイン(記事）エリアの背景を変える

skin-bgMainが記事エリア

　CSS編集で

/* (3-1-a) メイン背景
--------------------------------------------*/
/* メインエリア背景 */
.skin-bgMain {
background-color: #fffffff;
}

という所を探してください。ここが記事本文の背景を記述している所になります。

　既存では、白(#000000)に設定されています。コンテンツ背景と同じように、変更が可能です。