自宅サロンママのためのネット集客術

WordPressで作るホームページ制作サービス

アメブロカスタマイズに必須!色に関する便利ツール

July 31, 2016
487 views
約 4 分
アメブロカスタマイズに必須!色に関する便利ツール

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

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

どうやって指定するの?

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

 

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

Webカラーコードとは?

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

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

例えば、

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

黒字

 

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

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

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

 

なので、

.skinMenuTitle{
color: #0000ff;
}

と、書き換えると・・

青い文字

となります。

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

 

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

 

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

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

原色大辞典

Webカラーコード大辞典

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

 

カラーコード一覧表

 

セーフモード

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

配色を調べるには?

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

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

 

そんな時の便利ツール!

coolors

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

 

coolors

 

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

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

 

coolorsの使い方

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

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

coolorsマニュアル

 

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

coolorsマニュアル2

 

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

coolors-manual3

 

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

 

その他の便利ツール

 

色見本と配色サイト

Color-Sample.com

color-sample

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

・flickr(写真共有サービス)

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

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

 

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

配色見本

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