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

Date 2007-04-02 05:13:49 | Category: Site News
in englishin japanese
自分で言うのもなんですが、今年のエイプリルフールねたは、かなり実用性の高いものでした。ここでその種明かしをします。

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

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

それを知ったのは、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]

こんな感じの割り当てで、うまく８色が収まると思います。

最後に、写真はフォト蔵の公開写真を利用させていただきました。フォト蔵が提供するAPIから公開写真一覧を取得し、横幅が450pxの写真のURIだけを引っ張ってきてます。幅が450pxでも、その高さは結構バラバラだったので、高さもテンプレートCSSにアサインして、ヘッダ部のheightに指定してます。
さすがに写真だけの利用だと問題がありそうなので、theme.html側には、オリジナルへのリンクを張り、フォト蔵を利用した旨を記述してます。


You can read more news at PEAK XOOPS.
http://xoops.peak.ne.jp

The URL for this story is:
http://xoops.peak.ne.jp/md/news/index.php?page=article&storyid=418