PEAK XOOPS - メイン写真とマッチした配色のテーマ

自分で言うのもなんですが、今年のエイプリルフールねたは、かなり実用性の高いものでした。ここでその種明かしをします。

実際、デザイナーでない人間がテーマを作る際の最大のハードルは、配色だと思います。
色の組み合わせなんてそれこそ無限にあるわけですが、素人が適当に色を選んでも、まず間違いなく「変な色の組み合わせ」になってしまいます。だから、素敵な配色がすでに存在するのなら、それを利用するのが一番です。

そして、素敵な配色は、写真の中にこそあります。なぜなら、色温度が統一されているので、変な組み合わせになりようがないからです。

それを知ったのは、matchanのところで紹介されていたpic2colorからです。
http://www.pic2color.com/index.htm

これを使うと、オンライン上の画像から８色をうまく選び出してくれます。
その８色をテーマに割り当てれば、十分にセンスの良い色の組み合わせになります。
さらに、その写真をヘッダ部に背景として置くと、配色とも当然マッチするわけで、まるでプロが作ったような仕上がりになります。

ここで実はもう一つハードルがあります。
カラーを指定するのは当然CSSですが、色の指定部分がかなりバラバラなので、選んだ８色をどのように指定して良いのか判りづらい、ということです。

そこで、CSSをテンプレート化してみました。色に名前をつけて、CSSにテンプレート変数で埋め込んでいきます。こうすることで、CSSに対して、8色をアサインするだけで良くなります。

pic2colorでは、色の濃いものから順に8色並んでいるので、それをこんな感じで利用しました。[0]が一番左の色で、[7]が一番右の色です。
さすがに本文が読めないと困るので、body背景・文字は固定にしてます。

body背景 => #ffffff // 固定
body文字 => #333333 // 固定
枠の外 => $color[4]
ヘッダ部背景 => $color[7]
ヘッダ部文字 => $color[1]
リンク => $color[0]
強調部背景 => $color[2] // <th>等
強調部文字 => #ffffff // 固定
タイトル背景 => $color[3]
タイトル文字 => #ffffff // 固定
head => $color[5]
even => $color[6]
odd => $color[7]
枠線 => $color[0]