ホームページやブログをカスタマイズするときに、必要となってくるのが
色の指定方法。
Web上で色ってどんな風に表現してるの?
どうやって指定するの?
色の組み合わせがうまくいかない・・
そんな時に、
使える便利ツールのご紹介です。
Webカラーコードとは?
私たちが画用紙に赤で絵を描こうと思った時、
赤い色鉛筆や、クレヨン、絵の具を使ってぐるぐると描きます。
パソコン上で赤い絵を描こうとしたら、
”ここは赤で描く”という命令をかけます。
例えば、
アメブロのサイドメニューのタイトル文字がこのように黒で書かれている時は、

実際は、こんなふうに指定されています。
.skinMenuTitle{
color:#333333;
}
『サイドメニューのタイトル文字は黒にしてね』って書いてあります。
この#333333ってのが、
カラーコードというものです。
なので、
.skinMenuTitle{
color: #0000ff;
}
と、書き換えると・・

となります。
この辺りの細かいやり方は、
アメブロでサイドバーや記事タイトルの文字と下線の色を変える方法
をご覧ください。
これらのWeb上の色に関しての設定をする際に、使える便利ツールをご紹介します。
カラーコードを調べるには?
カラーコード一覧は、Web上にたくさんあります。
原色大辞典

タブで、和色や洋色、パステルカラーの一覧に切り替えることができます。
カラーコード一覧表

マウスポインターをコードの上に重ねると、左右の背景に色が広がります。
配色を調べるには?
この色に合う色は、どんな色かしら?
同じサイト内に複数の色を使う時には、配色をうまくすると見栄えが全然違います。
そんな時の便利ツール!
coolors
※Login画面が出る場合もありますが、そのままキャンセルしていると消えます。
スペースキーを押すだけで、永遠と配色パターンを表示してくれます。
カラーコードの上をクリックすると、選択できるのでコピーして使えます。カラー好きにはたまらず、気づいたら何十回もスペースキーを押し続けていた・・なんてことも。
coolorsの使い方
例えば、1色だけ使いたい色が決まっていて、それに合う色はどれかなーって探したい時。
指定したい場所のカラーコードの上をクリックして、コードを入力(コード表からコピペ)します。

鍵のマークをクリックして、Lockします。

キーボードの
スペースキーを押すと、様々な配色が表示されます。

表示されたカラーコードをクリックすると選択されるので、コピーしてCSSに貼り付けて使用します。
その他の便利ツール
色見本と配色サイト
Color-Sample.com

上のバーに表示されている色を選ぶと、
・flickr(写真共有サービス)
・その色を使ったWebサイト(カラーコード付)
・カラー一覧
→さらにこの中の色をクリックすると、配色見本がだだだーーっと出てきます。
『配色見本』をクリックすると、サンプルが表示されます。

アメブロカスタマイズを自分でやりたい!という方は、こんなサイトを利用して、是非素敵なブログを作ってくださいね。