背景色の変更

今回は、背景色の変更方法について説明します。簡単にカスタマイズすることができますので、是非、チャレンジしてくださいね。

ページ全体の背景色を変更するには

背景色の変更方法として、まず、ページ全体の背景色を変更する方法を例にして説明します。

■ CSS（スタイルシート）の編集
デフォルトテンプレートのスタイルシートを見ていただくと、下記のような記述があります。

＜スタイルシート＞

body { background-color:#8FABBE; }

初期設定のページ背景色は、「#8FABBE」と指定されています。
この「#8FABBE」という数値を変更することで、ページ全体の背景色を変更することができます。

編集後は保存して再構築すると完了です。

色の指定は、16進数の数値、あるいは、カラーネームで指定できますので、下記のカラーチャート表を参考にして、いろいろ試してくださいね。

■ カラーチャート表（標準カラー16色）

Aqua #00FFFF	Yellow #FFFF00	Fuchsia #FF00FF	White #FFFFFF
Teal #008080	Olive #808000	Purple #800080	Gray #808080
Blue #0000FF	Lime #00FF00	Red #FF0000	Silver #C0C0C0
Navy #000080	Green #008000	Maroon #800000	Black #000000

■ カラーチャート表（Webセーフカラー216色）
Webセーフカラーとは、8ビットディスプレイでも正しく再現できる色のことです。しかし、現在のディスプレイは16ビット（65,536色）～32ビット（1677万7216色）などが標準ですので、目安程度に捉えてもらって結構です。

000000	ffffcc	99ff99	66ffff	3333ff	ff00ff
333333	ffff99	66ff66	33ffff	0000ff	ff00cc
666666	ffff66	33ff33	00ffff	3300ff	cc0099
999999	ffff33	00ff00	00ccff	3300cc	ff33cc
cccccc	ffff00	00ff33	0099cc	6633ff	990066
ffffff	ccff00	00cc33	33ccff	330099	cc3399
ff3300	99cc00	33ff66	006699	6633cc	ff66cc
cc3300	ccff33	009933	3399cc	9966ff	ff0099
ff6633	669900	33cc66	66ccff	6600ff	660033
993300	99cc33	66ff99	0099ff	330066	993366
cc6633	ccff66	00ff66	003366	663399	cc6699
ff9966	99ff00	006633	336699	9966cc	cc0066
ff6600	336600	339966	6699cc	6600cc	ff99cc
663300	669933	66cc99	0066cc	cc99ff	ff3399
996633	99cc66	00cc66	99ccff	9933ff	ff0066
cc9966	66cc00	99ffcc	3399ff	9900ff	990033
cc6600	ccff99	33ff99	0066ff	660099	cc3366
ffcc99	99ff33	00ff99	003399	9933cc	ff6699
ff9933	66ff00	009966	3366cc	cc66ff	cc0033
ff9900	339900	33cc99	6699ff	9900cc	ff3366
996600	66cc33	66ffcc	0033cc	cc33ff	ff0033
cc9933	99ff66	00cc99	3366ff	cc00ff	330000
ffcc66	33cc00	33ffcc	0033ff	330033	663333
cc9900	66ff33	00ffcc	000033	663366	660000
ffcc33	33ff00	003333	333366	660066	996666
ffcc00	003300	336666	000066	996699	993333
333300	336633	006666	666699	993399	990000
666633	006600	669999	333399	990099	cc9999
666600	669966	339999	000099	cc99cc	cc6666
999966	339933	009999	9999cc	cc66cc	cc3333
999933	009900	99cccc	6666cc	cc33cc	cc0000
999900	99cc99	66cccc	3333cc	cc00cc	ffcccc
cccc99	66cc66	33cccc	0000cc	ffccff	ff9999
cccc66	33cc33	00cccc	ccccff	ff99ff	ff6666
cccc33	00cc00	ccffff	9999ff	ff66ff	ff3333
cccc00	ccffcc	99ffff	6666ff	ff33ff	ff0000

背景色の指定 ： background-color

背景色を指定するには、background-color プロパティを使用します。ここでは、色の指定方法について、もう少し詳しく説明します。

■ カラーコード指定（#+3桁のカラーコード）

＜記述例＞

background-color : #FFF;

左から「赤、緑、青」という順番で光の3原色の値を指定します。値は、0からFまでの16進数で0に近いほど暗く、Ｆに近いほど明るくなります。

■ カラーコード指定（#+6桁のカラーコード）

＜記述例＞

background-color : #8FABBE;

左から「赤赤、緑緑、青青」という順番で光の3原色の値を指定します。上の指定では8ビット（1桁）で各色の濃さを指定していましたが、この指定では、2桁で指定します。

■ カラーネーム指定

＜記述例＞

background-color : blue;

定められたカラーネームで指定することができます。

他の部分の背景色を変更するには

背景色の変更方法について、ページ全体の背景色の変更方法を例として説明しましたが、バナー部分やサイドバー部分などの背景色を変更する場合は、その該当クラスで、background-color プロパティを追加します。

MovableTypeで使用されているクラス、セレクタはMovableTyoeのスタイルシート解析を参考にして、背景色を変更させたいクラスを編集してください。

以上、背景色の変更方法について説明しました。

ブログランキングに参加中です。応援お願いします。