ブログの背景色のカスタマイズ①・(3-1) ボディ（全体）・初級アメブロカスタマイズガイド
｜
今回はCSS編集用画面の(3) エリアのスタイルブロックの中の、「(3-1) ボディ（全体）」です。
「(3-1) ボディ（全体）」の解説
(3-1) ボディ（全体）のブロックはブログ全体の背景色や、背景画像を置く場合にカスタマイズするブロックです。今回から何回かにわけてこのブロックは解説します。このコラムではまず基本概念を覚えましょう。CSS編集のコードは以下のようになっています。
/* (3-1) ボディ（全体）
--------------------------------------------*/
/* skinBody ボディ */
.skinBody{}/* ←ブログ全体に背景を敷きたいとき */
.skinBody2{}
.skinBody3{}
--------------------------------------------*/
/* skinBody ボディ */
.skinBody{}/* ←ブログ全体に背景を敷きたいとき */
.skinBody2{}
.skinBody3{}
{}(中括弧）の中に何も文字が入っていません。ここにプロパティをいれることで、ブログ全体の背景を定めることができます。
実際にブログの背景をグレーに設定しましょう。コードは以下のようになります。赤色の部分が追加部分です。
/* (3-1) ボディ（全体）
--------------------------------------------*/
/* skinBody ボディ */
.skinBody{background-color:#cccccc;}/* ←ブログ全体に背景を敷きたいとき */
.skinBody2{}
.skinBody3{}
--------------------------------------------*/
/* skinBody ボディ */
.skinBody{background-color:#cccccc;}/* ←ブログ全体に背景を敷きたいとき */
.skinBody2{}
.skinBody3{}
これでプレビューすると、以下の画像のようにブログの背景がグレーになることがわかります。
コードの解説 background-color
skinBodyにつづく｛｝（中括弧）の後に、背景色を設定するプロパティbackground-colorを記述することで、背景色を設定します。そして：（コロン）の後に#（ナンバー）をつけて色のコードを表す６ケタの数字とローマ字の組み合わせを記述します。これをカラーコードと呼び、カラーコードはコード表で調べることが可能です。カラーコードのサンプルは,わたしの記事でも紹介しているのでそちらも合わせてご覧ください。
カラーコードを見る
skinBodyとskinBody2とskinBody3?どうして３つもあるの？
背景色を設定できる場所は、skinBodyの他に、実はskinBody2、skinBody3も同じように設定できます。
ですがそれぞれには違う意味があるのです。
３つある意味は、なぜでしょうか？
それは次回に解説します
いろいろ試してみましょう。
あなたのブログをあなた色にカスタマイズしてください♪
おすすめ
無料メルマガ
