カスタマイズ(外観)13項目-文字色

ウェブサイトを構築するに当たってHTMLとかCSSとか画像の編集とか悩みますけど、解決できない問題の一つが配色です。なかなか自分の思い通りの色彩にたどり着けません。私には色彩の基本的な知識も無いし学んだ事も無いので何が正解なのかもわからないですし。それで、わりとテンプレートとかテーマに任せることが多いのですが、どうしても新たに決めないとならない部分も出てきます。枠線を取り付けるとかリンクのホバー時に周囲も配色するようにcssを設置する場合は自分で新たに選ぶ必要が出てきます。

よく言われることですがウェブの配色では
「色数をあまり増やさない」というのは大事です。自分のサイトですから好きに配色しても何も問題無いですけど、効果的とか流行とかはそうした傾向です。

では具体的にどういう色をどこに使えばいいのか?ってあたりは難しいところがあります。オレンジでも鮮やかなオレンジ、暗いオレンジ、パステルカラーのオレンジといろいろです。無限に近い配色バターンがあります。

そうしたニーズがあって最近はウェブ配色パターンのお役立ちサイトが最近は数多く出てきました。

例えばAdobe Color CCなどは一つ色を決めたら「カラールール」を選ぶだけで最適な色を提示してくれます。この一般的な使い方とは別に一番上のメニューの「探索」では他の人の色の使用パターンが登録されていて役立ちます。スポンサーリンク

Luxeritas 文字色の設定

背景色との兼ね合いになりますが設定する色が決まったらその文字色を設定する場合、Luxeritas カスタマイズ(外観)→「文字色」で設定できます。
Luxeritas088
Bodyとヘッダーとフッターと分かれていましてそれぞれ文字色、リンク色、リンクホバー色を設定できます。デフォルトのままの背景を白と決めている場合は黒っぽい文字色を選択するか派手目な色を選択するとかになると思います。
基本的には背景が白なら文字は黒ってなりそうですけど、黒っぽい色ならともかく、真っ黒#000000はあまりウェブでは使用しないと言われています。「色を選択」とある横のボックス部分をクリックします。

Luxeritas089
Luxeritasもデフォルトでは真っ黒よりは少し違う色になっています。

Luxeritas090

黒と白の選択ではグレーを明るくするか暗くするかくらいしか選択できませんけど、下に並ぶ基調となる色の赤っぽいマークをクリックすると全ての色が表示されてカラーピッカーの白丸を移動させ色の種類の選択をしたり、右側のスライダーを上下に移動させることで明るさを設定できます。

色は好みの部分もあるので断定的には言えませけど、明るさと彩度の設定でまた色の選択を補うこともできるので時間をかけると必ず良い色を見つけることができます。