>>一回目  >>二回目  >>三回目  >>四回目  >>五回目  >>六回目  >>最終回 

あの人気ブログ、エロ流ブログの運営者エロ流さんによるデザイン講座第5回目です。

【前回のおさらい】
前回はCSSでHTMLを装飾する属性の一つ、オリジナルで名前を付けれる「id」属性の設定方法を学びました。つまり前回までで「class」属性、「id」属性のつかい方の基礎を終わりました。まだまだCSSでの基本編は続きますが、今回は色について(背景色の設定方法)の知識講座です。この講座を続けて読むだけで、どんどんCSSの記述が自分のものになってきますね。
エロ流さんプロフィール
名前:HARU(ハル) 性別:
年齢:28歳
職業:ITベンチャー勤務、
3流フォトグラファー
趣味:写真、読書、3流映画鑑賞、一人温泉旅
夢:フォトグラファー
 

皆さんが一番最初に思いつくカスタマイズは、背景色の変更では無いでしょうか。
背景色は、ブログ全体のイメージを決める要素であり、効果的に使うことで
訪問者に様々な心理的作用を与えることができます。

*色について知りたい方は、後述する「色についての簡単な豆知識」をごらんください。

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

CSSファイル +----+----+----+----+----+----+----+----+----+

body {
background-color : #FFFFFF; /* 背景の色 */
}

+----+----+----+----+----+----+----+----+----+----+----+----+

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

 

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

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

CSSファイル +----+----+----+----+----+----+----+----+----+----+

body {
background-color : Black; /* 背景の色 */
}

+----+----+----+----+----+----+----+----+----+----+----+----+

★ワンポイントアドバイス

ここで指定する色は、あなたの作った色を自由に指定できますが、
必ずしもあらゆるPC環境で同一に表示されるとは限りません。

どのような環境でも、ほぼ意図した通りに表示されるようにしたい方は
参考サイトにもあるように、ウェブセーフカラーと呼ばれる216色の
中から指定してすると良いでしょう。


 

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

[ カラーネーム参考サイト ]
Good Search

CSSファイル +----+----+----+----+----+----+----+----+----+----+----+----

body {
background-color : Black; /* 背景の色 */
}

+----+----+----+----+----+----+----+----+----+----+----+----+----+----+----


 

ブログやホームページを見ていると、運営者の好みの色だけでなく
内容まで何となくイメージできることがありますよね。

ブログを開いた瞬間、自分のイメージする色では無かった為に、
内容も良く見ずに、思わずウインドウを閉じてしまった方もいると思います。

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

食品関係のアフィリエイトなどをされている方であれば、赤を効果的に使用
すると売上がアップするかもしれませんせんね。

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

───────────────────────────────
[ 色がもたらす心理作用 参考サイト ]

〜LINDAWORLD〜色の世界

色の心理効果 京都塗料商業協同組合

 

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