ホームページやブログをカスタマイズするときに、必要となってくるのが色の指定方法。

Web上で色ってどんな風に表現してるの？

どうやって指定するの？

色の組み合わせがうまくいかない・・

 

そんな時に、
使える便利ツールのご紹介です。

Webカラーコードとは？

私たちが画用紙に赤で絵を描こうと思った時、
赤い色鉛筆や、クレヨン、絵の具を使ってぐるぐると描きます。

パソコン上で赤い絵を描こうとしたら、
”ここは赤で描く”という命令をかけます。

例えば、

アメブロのサイドメニューのタイトル文字がこのように黒で書かれている時は、

 

実際は、こんなふうに指定されています。
.skinMenuTitle{
color:#333333;
}

『サイドメニューのタイトル文字は黒にしてね』って書いてあります。

この#333333ってのが、カラーコードというものです。

 

なので、

.skinMenuTitle{
color: #0000ff;
}

と、書き換えると・・

となります。

この辺りの細かいやり方は、
アメブロでサイドバーや記事タイトルの文字と下線の色を変える方法
をご覧ください。

 

これらのWeb上の色に関しての設定をする際に、使える便利ツールをご紹介します。

 

カラーコードを調べるには？

カラーコード一覧は、Web上にたくさんあります。

原色大辞典

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

 

カラーコード一覧表

 

マウスポインターをコードの上に重ねると、左右の背景に色が広がります。

配色を調べるには？

この色に合う色は、どんな色かしら？

同じサイト内に複数の色を使う時には、配色をうまくすると見栄えが全然違います。

 

そんな時の便利ツール！

coolors

※Login画面が出る場合もありますが、そのままキャンセルしていると消えます。

 

 

スペースキーを押すだけで、永遠と配色パターンを表示してくれます。

カラーコードの上をクリックすると、選択できるのでコピーして使えます。カラー好きにはたまらず、気づいたら何十回もスペースキーを押し続けていた・・なんてことも。

 

coolorsの使い方

例えば、１色だけ使いたい色が決まっていて、それに合う色はどれかなーって探したい時。

指定したい場所のカラーコードの上をクリックして、コードを入力（コード表からコピペ）します。

 

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

 

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

 

表示されたカラーコードをクリックすると選択されるので、コピーしてCSSに貼り付けて使用します。

 

その他の便利ツール

 

色見本と配色サイト

Color-Sample.com

上のバーに表示されている色を選ぶと、

・flickr（写真共有サービス）

・その色を使ったWebサイト（カラーコード付）

・カラー一覧
→さらにこの中の色をクリックすると、配色見本がだだだーーっと出てきます。

 

『配色見本』をクリックすると、サンプルが表示されます。

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