今回は、背景色の変更です。
全体の背景色と内側の背景色をかえます。
ここをかえるだけで、かなりオリジナルスキンにかわるので頑張りましょう！
背景色を変えよう（全体の背景）
今回は全体の背景をかえてみるよ
ブログ全体の変更だから/*—–Common—–*/ 内を変更するよ
#ffffff; は白
#FFFFFFF;も白
書き方は大文字でも小文字でもいいんだね
◇色名：英語の色名を書く赤ならred、青ならblue、緑ならgreen、黒ならblackという感じ
◇カラーコード：#+6ケタの英数字で書く色ごとにコードが決まっているのでそれを使います。例えば白なら#FFFFFFになります。
| /*—–Common—–*/ body { background: #ffffff; } | ☆色の指定 #ffffff というのは色の指定です。 好きな色の色番号に変えましょう。 色の指定時は「#FF0000;」というふうに、＃を必ず入れましょう。 |
じゃあ、背景を白から黒にかえるよ
黒は #000000; だよ
| /*—–Common—–*/ body { background: #000000; } | background: #000000; にかえると全体の背景が黒にかわります。 自分の好きな色をいれてみましょう。 参考 カラーチャート |
背景の色を変えるとイメージがかわるね
色を指定したら、プレビューで確認して、保存だよ
【参考】 ＊ 背景色を変えよう ＊ 背景に画像をのせてみよう
内側の背景色をかえよう
今回は、バナーの下（記事、サイドバー、記事・サイドバーの周り）部分の色を変え、余白を作るよ。
イメージはこんな感じだよ。
内側が白くなると印象がちがうね。
どうやってかえるんだろう。
/*—–Content—–*/#content { に背景色を指定するんだよ。
バナーの下の余白を消そう
バナーの下の余白は消せるんだよ
この部分のことだよ
/*—–Header—–*/#banner { の
margin-bottom:20px; → margin-bottom:0px; と変更するだけだよ。
| 変更前 | 変更後 |
|---|---|
| /*—–Header—–*/ #banner { height:200px; background:url(“/_images/blog/_aaa/bbb/ccccc.PNG”) no-repeat; margin-bottom:20px; clear:both; } | /*—–Header—–*/ #banner { height:200px; background:url(“/_images/blog/_aaa/bbb/ccccc.PNG”) no-repeat; margin-bottom:0px; clear:both; } |
外枠に境界線をいれよう
赤い境界線を入れてみるよ
ちょっとわかりにくいかな
/*—–Common—–*/#container { に
border: 1px solid #FF0000; を付け加えるよ
| 変更前 | 変更後 |
|---|---|
| /*—–Common—–*/ #container { width :770px; margin:0 auto; line-height:1.4; text-align:left; color:#444444; } | /*—–Common—–*/ #container { width :770px; margin:0 auto; line-height:1.4; text-align:left; color:#444444; border: 1px solid #FF0000; } |
参考
＊線の太さ、種類、色は【線の種類と記述方法】を参考にご自分で変えてください。
＊必要な部分のみ線を入れてもＯＫです。
