So-net無料ブログ作成
ブログトップ ブログ全体 ヘッダー サイドバー 記事本文 フッター リファレンス Gazon Weblog

使用する色の決定 [準備編]

色合いについて
スキンで使用する色合いを決める場合、ある程度何色か決めておくとスキン全体がまとまります。
最低限、次の色を決めておくと良いでしょう。

 - ベースとなる色
 - アクセントになる色
 - 補助的な色
 - 文字色、リンク文字色

色決めの際は、次の方法で探してみてはいかがでしょうか?

 ・好きな色から
 ・ベースとなるスキンから
 ・準備した写真、画像の中から
 ・ヘッダーデザイン色の中から

参考までに、本ブログは次の色を基本として構成しています。
:#eab2b2 :#7777aa
:#777777 :#FFFFFF


色を決める方法

【 好きな色から 】
好きな色をひとつ選び、その色と相性の良い色を選んでいきます。
同系色ばかりでは全体が締まらないので、明色と暗色を合わせていきましょう。黒やグレー、茶など、シックな色を入れると大人な感じになります。

【 ベースとなるスキンから 】
ベースとなるスキンが使用している色を利用すれば、そのスキンが持つ雰囲気やイメージをそのまま利用することが出来ます。ベーススキンのスキン編集画面から、CSS内に書かれている「#RRGGBB(もしくは#RGB)」と書かれている箇所から色を抜き取ります。

【 準備した写真、画像の中から 】
準備した写真や画像の色から決めるのも一つの手です。写真や画像がスキンに馴染みます。
写真から色を選ぶ場合、写真の中の色だけでなく、写真からイメージされる色を選ぶのも良いでしょう。

【 ヘッダーデザイン色の中から 】
せっかくスキンの色がまとまっているのに、ソネブロが決めたヘッダーデザインの色が18色しかなく、ヘッダーの色が馴染まない場合が多く見受けられます。
このヘッダーの色を変更するスクリプトを配信しているブログもあるようですが、ここでは敢えてヘッダーの色に合わせてスキンの色を決定する方法を提案します。

ソネブロが提供するヘッダー18色は次の通りです。


これらを#RRGGBBで表現すると次のようになります。
白: #FFFFFF グレー: #DDDDDD チャコール: #666666
黒: #000000 茶: #4A1104 赤: #CE2418
オレンジ: #F46A00 緑: #2E4F22 シアン: #0D5F66
青: #2040AC 紫: #600F85 ピンク: #FF0066
ベージュ: #CDBE8B スカイ: #9AC0E3 薄桃: #F8AEC3
ライム: #8BD0C2 すみれ: #CBA9DE 抹茶: #A0B488

この18色のうちのどれかのヘッダーを使うことを前提に色を決める場合、メインの色ではなく、ちょっとした補助的な色として使用するだけでも、ヘッダーがスキンに馴染むようになります。

尚、ヘッダーデザインを変更する場所がわかりづらいですが、コチラにありますよ。



上記の方法で色合いが決まったら、後で見てわかりやすいように編集するスキンの上部にこのようにメモを書いておくと良いでしょう。
例:スキン編集画面
@charset "UTF-8";

/*-------Color--------*/
/* ピンク:#eab2b2 */
/* パープル:#7777aa */
/* グレー:#777777 */

/*-----Common-----*/
     :
     :

→ 参考:【基礎編】カラー(色)について

以上。


nice!(0)  コメント(0) 
共通テーマ:ペット

nice! 0

コメント 0

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。

×

この広告は1年以上新しい記事の更新がないブログに表示されております。