Bloggerテンプレート自作 #27：テーマデザイナーに対応させる

前回の「SEO用のコードを記述する」に引き続き、今回は「テーマデザイナーに対応させる」を実践してみようと思う。

Bloggerではテーマデザイナーを使うことで、ブログの配色設定なんかを簡単にすることができるが、テンプレートを自作する場合はこの辺も自分で設定しなければならない。まあ、テーマデザイナーを使ってできるカスタマイズなんて知れているので、そもそもこの機能が必要なのかという疑問もあるが、初心者にとってはやっぱり必要な機能になると思う。

というわけで、今回は「テーマデザイナーのメリット・デメリット」と「テーマデザイナーの設定方法」についてまとめていくことにする。


テーマデザイナーについて


メリット


テーマデザイナーを導入するとブログ内の設定を視覚的に編集できるので、色を変えるぐらいであれば自分でCSSを編集するよりも遥かに楽でわかりやすいというメリットがある。

また、設定次第ではカラー以外にも、フォント（種類・サイズ）、要素の幅や位置なんかもテーマデザイナー上で変更することができるので、カスタマイズ予定のない完成されたデザインであれば、テーマデザイナーの導入はユーザビリティの向上につながる。

デメリット


そもそも、テーマデザイナーのプレビュー機能はトップページに記事が羅列する仕様のテンプレートを前提としているため、当テンプレートのように個別記事ページが独立しているようなデザインには非対応。要するに古いタイプのブログデザイン用の機能と言える。

設定面では、Bloggerでテーマデザイナーを設定すると「ソースを簡単に弄れなくなる」というデメリットもある。というのも、テーマデザイナーで決めた値を反映させるには対応するCSSのプロパティの値を変数で設定することになる。その変数名なんかはテンプレート作成者の決めたものなので既定値がない。なので、テーマデザイナー設定を保持したままテンプレートをカスタマイズしようと思うといちいち変数名を参照しながら作業しなければならなくなり、カスタマイズ性が下がる。

また、テーマデザイナーの設定自体も、大まかに決めるのか、細かく決めるのか、で変更できる設定の幅に差が出てしまう。例えば、メインとサイドバーの見出しの色を同じ設定で一括指定できるようにするのか？それともそれぞれ設定できるようにするのか？この設定によってテンプレート作成者の手間もユーザの使い勝手もだいぶ変わってくる。一方、CSSで直接指定するのならユーザの好きに設定にできるので、テーマデザイナーを使わない方がカスタマイズ性は高い。

まとめ


まとめると「もうテンプレートの内容を変更しない（させない）場合」はテーマデザイナーを導入する、「テンプレートの内容を変更する予定がある場合」はテーマデザイナーを導入しない。という選択が適しているのではないかと思う。

テーマデザイナーの文法


テーマデザイナー設定の記述場所


テーマデザイナーは「<b:skin><![CDATA[～]]></b:skin>」の～内に記述する（CSSの記述場所）。

大抵は冒頭に記述されることが多く、テーマデザイナーとコメントアウトしておくと分かりやすくなる。

変数の設定


テーマデザイナーは<Group>タグで設定を区分けし、その中に<Variable>タグで変数を設定する。

そして、設定を適用したい部分のプロパティ値を$(変数名)にするだけ。文法は以下の通り。

グループ（設定のカテゴリ）


<Group description="グループ名" selector="セレクター"> 変数 </Group>

・description（必須？）：テーマデザイナーの上級者向け設定で、設定の左に一覧される名前
・selector（省略可）：プレビュー画面で変更する範囲（赤枠部分）の表示位置を決める
　→ 初心者向けの設定で自作テンプレートではほとんど設定されない

変数（編集できる値の設定）


<Variable name="変数名" description="説明文" type="プロパティの種類" default="デフォルト値" value="現在の値"/>

・name：プロパティ値に使用する変数名を指定
・description：変更する部分の説明文（変数の見出し）
・type：指定するプロパティの種類を指定
　→ color：色
　→ font：フォント（サイズ、種類 ※指定できるフォントの種類は決められるっぽい）
　→ string：余白（マージンやパディング用）
　→ length：長さ
　→ url：URL
　→ background：背景？
　→ automatic：位置？（left、right）
・default：プロパティの初期値
・Value：現在のプロパティ値（初期値と同じで良い）

※自作テンプレートの場合、色ぐらいしか指定することはない。
※細かく設定したい場合はシンプルテンプレートのソースを参考にすると良い

記述例


<b:skin><![CDATA[

<Group description="ヘッダー">
  <Variable name="header.background.color" description="ヘッダの背景色" type="color" default="#333333" value="#333333"/>
  <Variable name="header.title.color" description="タイトルの色" type="color" default="#ffffff" value="#ffffff"/>
  <Variable name="header.description.color" description="説明文の色" type="color" default="#fafafa" value="#fafafa"/>
</Group>

/* 中略 */

/* ヘッダー全体 */
#Header1 {
  background: $(header.background.color);
  /* 省略 */
}

/* ブログタイトル */
#Header1 a {
  color: $(header.title.color);
  /* 省略 */
}

/* サブタイトル */
#Header1 p {
  color: $(header.description.color);
  /* 省略 */
}

]]></b:skin>

ヘッダのカラーを指定する場合は上記のように記述する。