制作日誌ももう25回目。月日が経つのは早いものですね～。
今回はテンプレートデザイナーで変更できる 「カラーテーマ」 についてです。
偶然、自作のパーツにカラーテーマを適用する方法を知ったので調べてみました。
※注意！
（カラーテーマ機能について、大きなカン違いをしております。こちらの記事も併せてお読みください。
『理解した気になっていたカラーテーマ ～Blogger テンプレートを作るよ！ (32)～』）
カラーテーマとは
テンプレートデザイナーで 『背景』 を選択した時、背景画像の設定とは別にカラーテーマが選択できることがあります。
これを選択すると、ブログ全体の色をそれっぽく変えることができます。
例えば水色とか
赤色とか
全体がその色に合わせて変わってくれるので、簡単に自分好みの色に変えることができます。
ただ、使用するテンプレートによってはカラーテーマの設定があったりなかったりします。また、色が変わる場所もテンプレートによって異なり、またカスタムテンプレートも特殊な挙動をします。
カラーテーマの有無や、おすすめのテーマに使用されるカラーを変更する方法などは分からないのですが、とりあえず色々試したことについて書こうと思います。
自作のパーツにもカラーテーマの色を適用できる！？
ちょうど、メニューの色を変更しているときでした。デフォルトのメニューの文字色をブログ名の文字と同じ色にしてみようと思って、デフォルトの色情報をコピーしてみました。
<Variable name="header.text.color" description="Title Color" type="color" default="#3399bb" value="#c9983b"/>
↓ default="#3399bb" をコピー
<Variable name="navigation.title.color" description="Title Color" type="color" default="#3399bb" value="#c9983b"/>その後、操作ミスでうっかりカラーテーマを変更してしまいました。すると、なんとメニューの文字色も一緒に変ったのです！
どうやら、Blogger 側で定められたいくつかの色は、同じ色にしたいパーツと同じ default にすることで、テーマカラーに対応するようになるみたいです。
そんな機能、あっても普通気が付かないですよ！ Blogger さん！
ネット上で検索してみても全然情報が見つからなかったので、自力で調べてみます。もしかしたらどこかにこっそり載っているかもしれません。
調査：カラーテーマの変更に対応している変数を見つける
まず、自作パーツを追加したりしたときはカスタムテンプレートになり、シンプルテンプレートの時とは適用される範囲が変わりますので、カスタムテンプレートに変更しました。具体的には、シンプルテンプレートに空白の挿入などの無意味な変更して保存することで、カスタムテンプレートとして認識してもらいます。
その後、カラーテーマの変更でカラーテーマを水色から赤に変更し、テンプレート内の色の変数を一覧にしました。
その結果がこちら↓
表１．色の変数一覧
| 変数の用途 | 変数名 | default | カラーテーマを赤にした時の value |
|---|---|---|---|
| メインカラー | keycolor | #66bbdd | #dd667f |
| 文字色 | body.text.color | #222222 | #222222 |
| 外側の背景色 | body.background.color | #66bbdd | #dd667f |
| コンテンツの背景色 | content.background.color | #ffffff | #ffffff |
| ヘッダーの背景色 | header.background.color | transparent | rgba(0, 0, 0, 0) |
| リンクの文字色 | link.color | #2288bb | #bb213a |
| 訪問済みリンクの文字色 | link.visited.color | #888888 | #888888 |
| ホバー中リンクの文字色 | link.hover.color | #33aaff | #ff3243 |
| ブログタイトルの文字色 | header.text.color | #3399bb | #bb3254 |
| ブログ説明文の文字色 | description.text.color | #777777 | #777777 |
| タブメニューの文字色 | tabs.text.color | #999999 | #999999 |
| 選択中タブの文字色 | tabs.selected.text.color | #000000 | #000000 |
| タブメニューの背景色 | tabs.background.color | #f5f5f5 | #f5f5f5 |
| 選択中タブの背景色 | tabs.selected.background.color | #eeeeee | #eeeeee |
| 投稿日時ヘッダーの文字色 | date.header.color | $(body.text.color) | #222222 |
| 投稿日時ヘッダーの背景色 | date.header.background.color | transparent | rgba(0, 0, 0, 0) |
| 投稿フッターの文字色 | post.footer.text.color | #666666 | #666666 |
| 投稿フッターの背景色 | post.footer.background.color | #f9f9f9 | #f9f9f9 |
| 投稿フッターの境界線の色 | post.footer.border.color | #eeeeee | #eeeeee |
| ウィジェットタイトルの文字色 | widget.title.text.color | #000000 | #000000 |
| ウィジェットの代替文の文字色 | widget.alternate.text.color | #999999 | #999999 |
| 画像の背景色 | image.background.color | #ffffff | #ffffff |
| 画像の境界線の色 | image.border.color | #eeeeee | #eeeeee |
| 画像の説明文の文字色 | image.text.color | $(body.text.color) | #222222 |
| コンテンツの境界線の色 | body.rule.color | #eeeeee | #eeeeee |
| タブメニューの境界線の色 | tabs.border.color | $(body.rule.color) | #eeeeee |
| モバイルのボタンの色 | mobile.button.color | #ffffff | #ffffff |
この中から、default と value で値が違う変数だけに注目します。
ただし、 transparent と rgba(0,0,0,0) は同一のものとし、変数が入った default は変数の値と value の値が一致していれば同一のものとします。すると、以下のようになりました。
表２．カスタムテンプレート使用時、カラーテーマに対応する変数一覧
| 変数の用途 | 変数名 | default | カラーテーマを赤にした時の value |
|---|---|---|---|
| メインカラー | keycolor | #66bbdd | #dd667f |
| 外側の背景色 | body.background.color | #66bbdd | #dd667f |
| リンクの文字色 | link.color | #2288bb | #bb213a |
| ホバー中リンクの文字色 | link.hover.color | #33aaff | #ff3243 |
| ブログタイトルの文字色 | header.text.color | #3399bb | #bb3254 |
メインカラーと外側の背景色は同じなので、カラーテーマの変更をすると勝手に色が変わる default の値は、以下の四つだということが分かりました。
- #66bbdd
- #2288bb
- #33aaff
- #3399bb
実験：自前の変数の value が変わるか
以下のコードを、 value 属性を省いた状態で <b:skin> 内に記述し、カラーテーマの変更を行ってみたところ、他の箇所と同様に value の値が変わっていることが分かりました。<Variable name="test1.color" description="Test 1 Color" type="color" default="#66bbdd" value="#dd667f"/>
<Variable name="test2.color" description="Test 2 Color" type="color" default="#2288bb" value="#bb213a"/>
<Variable name="test3.color" description="Test 3 Color" type="color" default="#33aaff" value="#ff3243"/>
<Variable name="test4.color" description="Test 4 Color" type="color" default="#3399bb" value="#bb3254"/>まとめ：カラーテーマの変更に対応したテンプレートを作るためには
１．まずはカラーテーマを水色と他の色で切り替えてみて、カラーテーマに合わせて色が変わってほしい個所を探します。２．見つけたら、 <b:skin> 内の、その場所の色を設定するパラメータを変数にします。
※この時、何らかのグループに入れておかないとテンプレートデザイナーでのプレビュー表示が適切に表示されませんでした。忘れずにグループに入れておきましょう。
<Group description="Thema Colors" selector=".thema-colors">
<Variable name="dokoka.color" description="DOKOKA NO Text Color" type="color" default="#66bbdd" value="#66bbdd"/>
</Group>
.dokoka {
color: $(dokoka.color);
}３．その変数の default 値を、以下のいずれかにします。
| default | 色 | 印象 |
|---|---|---|
| #66bbdd | キーカラー | |
| #2288bb | キーカラーを濃くしたような色 | |
| #33aaff | キーカラーを鮮やかにしたような色 | |
| #3399bb | キーカラーを暗くしたような色 |
それぞれ、デフォルトでは背景色、リンクの色、マウスホバー中のリンクの色、ブログタイトルの色として使用されていますが、それ以外の用途に使っても大丈夫です。
４．以下のようにカラーテーマに合わせて変更できるようになっていますので、後は default 値を変えてみたりして、自分好みにカスタマイズしてください。
 |
| テンプレートをカラーテーマのテスト用に変更したもの。 色1: #66bbdd、色2: #2288bb、色3: #33aaff、色4: #3399bb |
以上です！
0 件のコメント :
コメントを投稿