2016年11月24日木曜日

理解した気になっていたカラーテーマ ~Blogger テンプレートを作るよ! (32)~

こんにちはー!

ちょっとした調整のつもりでテンプレートを確認していたら、過去に投稿したカラーテーマについて、私の認識に間違いがあったことに気が付きました!

今回はそのことについて書こうと思います。

(前回:『Google+ Badge モドキを基本情報ガジェットで作る ~Blogger テンプレートを作るよ! (31)~』)


カラーテーマって?

カラーテーマは、Blogger テンプレートデザイナーの機能です。Blogger テンプレートデザイナーはブログ管理画面の [テンプレート] ページの [カスタマイズ] を選択すると現れます。

いつのまにかブログの設定画面が変わっていました。
左側にある [テンプレート] を押し、オレンジ色の [カスタマイズ] ボタンを押すと
テンプレートデザイナーの画面になる

テンプレートデザイナーの [背景] を押すと表示される画面

その中の [背景] を選択した時にあったりなかったりするのがカラーテーマです。

カラーテーマは、色を変更するとブログ内のいろんな場所の色が同時に変わるという機能でした。

前にこの機能について書いたことがありますが、実は私が理解した気になっていたことは実は間違いでした。

(問題の記事:『自作のパーツにカラーテーマを適用する ~Blogger テンプレートを作るよ! (25)~』)

どんな間違い?

前に調べたとき、私は 「おすすめのテーマ」 の中から様々な色を選択して変化する色を調べていました。

それで変わる色と変らない色があることを知ったので、カラーテーマは特定の色だけを変更するものだとばかり思っていました。

しかし、実際はそうではありませんでした。

カラーテーマは、テンプレート内に変数として存在している白、黒、透明を除いたすべての色を変更するみたいです。

カラーテーマの仕組み

全ての鍵は、テンプレート内の <b:skin> に書かれている keycolor という変数が握っていました。

カラーテーマを変更したとき、 keycolor の default を基準に、value の値がどう変わったのかが重要な意味を持ちます。キーカラーがどれくらい変化したかを計算し、それに見合った変化を全ての色に対して行っているのです。

例えば、 キーカラーの default を #00FFFF にしてカラーテーマを #FF00FF に変えたなら、テンプレート中にある全ての青系統の default 値を持つ変数は赤系統の value になります。

同様に赤系統の default を持つ変数は緑系統の value になり、緑系統の default を持つ変数は赤系統の value になります。

それぞれ循環するように色が変わります。色相環みたいなイメージですね。

    

    

キーカラーが時計方向に2マス進むなら、
他の色も同じように時計方向に2マス進む。

キーカラーの default を #00FFFF にし、カラーテーマを #ff00ff にしたときの色の変化。
赤は緑になり、緑は青になり、青は赤になる

しかし赤や青の色の変化では反応しない色があります。赤、青、緑が全て同値の、いわゆるグレースケールな色たちです。グレースケールは色相の影響を受けませんので、同一の明度を持つ 「おすすめのテーマ」 のどの色に変更しても変化しないのです。

明るいカラーテーマや暗いカラーテーマでは、グレースケールの色も明るくなったり暗くなったりします。

キーカラーの default を #00FFFF にし、カラーテーマを #FFFFFF にしたときの色の変化。
元々 #222222 であったテキストの色も、 #666666 まで上がっている

唯一、白と黒(#000000 と #ffffff) は明度でも変化しないようになっているみたいです。

まとめ

カラーテーマについての勘違いに気が付けて良かったです。てへ。

いえ、間違ったことを書いてしまって本当に申し訳ございません。

それはともかく、テンプレートデザイナーの機能は思いの外高性能で、いろんな場面で役に立つように考えられているんだな~と思いました。まだまだ私の知らない秘密が Blogger にはたくさんありそうです!

さらにおまけ

キーカラーの default にグレースケールの色を指定すると、カラーテーマが変更できなくなるみたいです。

keycolor の default に #888888 を指定した場合






0 件のコメント :

コメントを投稿