オリジナルテンプレートへの道のり

■ 実践!背景色の設定
あの人気ブログ「動画の桜」の運営者エロ流さんによるデザイン講座第五回目です。

【今回のお題】 前回は、CSSでHTMLを装飾する属性の一つオリジナルで名前を付けれる「id」属性の設定方法を学びました。つまり前回までに「class」属性、「id」属性の使い方の基礎を学び終わりました。まだまだCSSでの基本編は続きますが、今回は色について(背景色の設定方法)の知識講座です。この講座を続けて読むだけで、どんどんCSSの記述が自分のものになってきますね。

ブログ背景色の指定

■ ブログカスタマイズの第一歩
皆さんが一番最初に思いつくカスタマイズは、背景色の変更では無いでしょうか。背景色は、ブログ全体のイメージを決める要素であり、効果的に使うことで訪問者に様々な心理的作用を与えることができます。
※色について知りたい方は、後述する「色についての簡単な豆知識」をご覧下さい。

背景色の指定は、CSSの「body」要素の「background-color」属性を変更します。

CSSファイル -----------------------------------------
body {
background-color: #FFFFFF; /* 背景の色 */
}
-------------------------------------------------------

background-color: の後に好みの色を指定するのですが、色の指定はカラーコード、もしくはカラーネームで指定します。

16進数のカラーコードで指定

例えば、白であれば"#FFFFFF"、黒であれば"#000000"とします。

[ カラーコード参考サイト ]
http://diet.gr.jp/sub/tool/web_col00.htm
http://goodsearch.jp/ut3/color1.html

CSSファイル -----------------------------------------
body {
background-color: #FFFFFF; /* 背景の色 */
}
-------------------------------------------------------

★ワンポイントアドバイス★
ここで指定する色は、あなたの作った色を自由に指定できますが、必ずしもあらゆるPC環境で同一に表示されるとは限りません。どのような環境でも、ほぼ意図した通りに表示されるようにしたい方は参考サイトにもあるように、ウェブセーフカラーと呼ばれる216色の中から指定してすると良いでしょう。

カラーネームで指定

例えば、白であれば"White"、黒であれば"Black"と、直接色の名前も指定できます。

[ カラーネーム参考サイト ]
http://goodsearch.jp/ut3/color2.html

CSSファイル -----------------------------------------
body {
background-color: Black; /* 背景の色 */
}
-------------------------------------------------------
色についての豆知識

ブログやホームページを見ていると、運営者の好みの色だけでなく内容まで何となくイメージできることがありますよね。ブログを開いた瞬間、自分のイメージする色では無かった為に、内容も良く見ずに思わずウインドウを閉じてしまった方もいると思います。

こんな話もあります。とあるイタリアンレストランで、テーブルクロスの色によって、注文状況がどう変わるかというテストをしたそうです。赤・青・黄・緑の4色のテーブルを、同時に並べて検証した結果、赤が最も料理やお酒の追加オーダーを増加させたそうです。食品関係のアフィリエイトなどをされている方であれば、赤を効果的に使用すると売上がアップするかもしれませんせんね。

このように、色が人に与える心理的作用は非常に大きいですから色についての知識を少しでも頭に入れながら配色をすれば、思わぬ効果に驚くことがあるかもしれません。

次回予告
今回は背景色の設定の仕方から色に関することを学びました。次回は文字の設定方法ですが、今回学んだ色の知識もどんどん応用できますので、心理的作用の考察も混ぜた色に関するお話メモしておいてくださいね。

エロ流さんプロフィール

名前: HARU(ハル)
職業: ITベンチャー勤務、3流フォトグラファー
趣味: 写真、読書、3流映画鑑賞、一人温泉旅
夢: フォトグラファー