BloggerのテーマデザイナーのVariableタグのマークアップ

Bloggerのテンプレートは管理画面の「テーマ」のカスタマイズのテーマデザイナーからヘッダー画像を追加したり、コンテンツの文字の大きさや色を変更したり、デザインのCSSをを追加したりすることができる。Bloggerのテーマデザイナーは利用者がブログのデザインのCSSを簡単に操作できるようにするためのツールなんだけれどもこれは最初から決められたものではなく、どの領域のどの要素を操作できるようにするかを管理画面の「テーマ」のカスタマイズのHTML編集からカスタマイズすることができる。

Variableタグがテーマデザイナーを指定する
Variableタグの基本的なマークアップの仕方
Variableタグのマークアップの必須事項
Variableタグとテーマデザイナーの対応関係
半透明の色を設定するときの注意点
旧ヴァージョンで使用可能なvariableタグ
variableタグのマークアップの特記事項
variableタグはテーマデザイナーの幅を調整に反映する

Variableタグがテーマデザイナーを指定する Bloggerのテーマデザイナーの背景のメニュー

背景｜Blogger

ブログのテンプレートのソースコードを確認すると冒頭のhead内にVariableという独自タグの領域があってそれがテーマデザイナーの内容を記載している。

Bloggerの七種類のVariableタグ

automatic：向き
font：フォント
background：背景
url：URL
color：色
length：長さ
string：文字など

Variableタグは、七種類、あってそれぞれにテーマデザイナーに対応したCSSの変数の$(Variableタグのname属性の値)を出力することができる。いい換えると利用者がテーマデザイナーから変更したデザインがあればテンプレートのソースコードのCSSに使われたVariableタグの変数を通じて（サーバーが書き換えて）反映するようになっているんだ。本稿ではVariableタグの基本的な使い方としてテンプレートのソースコードへのマークアップの仕方について掲載する。Variableタグの基本的なマークアップの仕方 Bloggerのテーマデザイナーの詳細設定のメニュー

詳細設定｜Blogger

Variableタグは次のような仕方でテンプレートのソースコードのhead内に記載されている。<?xml version="1.0" encoding="UTF-8" ?> 中略 <head> 中略 <b:skin version='1.3.2'><![CDATA[ 中略 /* <Group description="Page Text"> <Variable name="body.text.font" description="Font" type="font" default="$(robotoNormal15)" value="15px Roboto, sans-serif"/> <Variable name="body.text.color" description="Color" type="color" default="#757575" value="#757575"/> </Group> */ 中略 ]]></b:skin> 中略 </head>VariableタグはBloggerのサーバーが解析してブログのテンプレートのCSSを書き出すためのもので、ブログのデザインを直接的に指定するものではないし、ブラウザがブログの表示に必要とするものではない。公式テーマではコメントアウト（/* マークアップ */）されていて実際のブログのソースコードには記載されないようになっている。Variableタグのコメントアウトはやらなくてもブログの表示に支障はないけれども無駄なソースコードを残さないためにはやった方が良い。Variableタグのマークアップの必須事項

skinタグの中で使う。

Bloggerの独自タグのskinはテンプレートのソースコードのhead内に置かれていて実際のブログではCSSに置き換えられる領域を指定している。<b:skin version='1.3.2'><![CDATA[ 中略 Variableタグの使用可能な領域中略 ]]></b:skin>VariableタグはテーマデザイナーのためのCSSの変数を提供しているものだけれどもそれと関連するようにCSSの領域を指定するskinタグの中でしか機能しない。Variableタグとテーマデザイナーの対応関係Variableタグはテーマデザイナーを指定してその内容を決めることができるけれども前者と後者の対応関係に則ってどうやるかについて述べる。GroupタグのマークアップについてGroupタグはテーマデザイナーの詳細設定の項目を指定するもので、その中身として一つ以上のVariableタグを入れる。<Group description="Page Text"> <Variable name="body.text.font" description="Font" type="font" default="$(robotoNormal15)" value="15px Roboto, sans-serif"/> <Variable name="body.text.color" description="Color" type="color" default="#757575" value="#757575"/> </Group>Groupタグはdescription属性で、テーマデザイナーの詳細設定の項目名を指定する。注意：Groupタグのdescription属性は省略できず、付けて値を入れて記載しないとテンプレートのファイルが保存できなくなる。description属性の値は公式テーマで使われている一部の英語はテーマデザイナーでは他の言語に翻訳されて表示される。

和訳可能なdescription属性の値

Page Text：ページのテキスト
Backgrounds：背景
Links：リンク
Blog title：ブログタイトル
Blog Description：ブログの説明
Tabs text：タブのテキスト
Tabs Background：タブの背景
Post Title：投稿タイトル
Date Header：日付ヘッダー
Posts：投稿
Post Footer：投稿のフッター
Gadgets：ガジェット
Images：画像
Search：検索
Sharing：共有
Popular posts：閲覧の多い投稿
Post navigation：投稿のナビゲーション
Sidebar：サイドバー
Author profile：投稿者のプロフィール
Labels：ラベル
Accents：アクセント
Widths：幅

description属性の翻訳可能な英語は完全一致でなくても大丈夫な場合もなくはないけど、大半は完全一致の場合に翻訳可能になっているようだ。翻訳不可能なその他の英語、英語以外の言語も使えるけれども他の言語に翻訳されず、そのまま、テーマデザイナーの詳細設定の項目名に表示される。Groupタグのselector属性とは何かGroupタグにはselector属性が付いている場合がある。

<Group description="Blog title" selector="div.widget.Header">
  <Variable name="blog.title.font" description="Font"
      type="font"
      default="$(robotoBold45)"  value="bold 45px Roboto, sans-serif"/>
    中略
</Group>

selector属性はテーマデザイナーでプレビューを使ったときに編集中の領域を目立つ枠線で囲って強調表示する。値は強調表示の対象となるHTMLをCSSセレクターの記法で入力する。プレビューのためのものなので、記載しなくてもブログのデザインは影響しない。VariableタグのマークアップについてVariableタグはテーマデザイナーの背景と詳細設定の各項目の内容を指定する。<Group description="Page Text"> <Variable name="body.text.font" description="Font" type="font" default="$(robotoNormal15)" value="15px Roboto, sans-serif"/> <Variable name="body.text.color" description="Color" type="color" default="#757575" value="#757575"/> </Group>VariableタグはGroupタグに囲まれていればdescription属性で、テーマデザイナーの詳細設定の各項目の内容名、囲まれていなければGroupタグのdescription属性と同様にテーマデザイナーの詳細設定の項目名を指定する。注意：Variableタグのdescription属性は省略できず、付けて値を入れて記載しないとテンプレートのファイルが保存できなくなる。公式テーマで使用される標準的なマークアップを削除するとテンプレートファイルが保存できなくなる場合がある。

削除するとエラーになるVariableタグ

startSideのnameのautomaticのtype
endSideのnameのautomaticのtype
body.backgroundのnameのbackgroundのtype

Variableタグのtypeでは三つのものを必ず使わなくてはならない。その他のtypeも標準的なマークアップのnameを変えるとエラーになり易いので、編集する場合は公式テーマのものを、そのまま、使ってname以外の内容だけ変更したり、新しく追加するようにした方が良いだろう。

詳細設定の表示の優先順位

Groupタグ
Variableタグ

詳細設定の項目はGroupタグかVariableタグで可能だけれどもそれぞれのマークアップの順番に関わらず、最初にGroupタグが全て順番通りに並んでから最後にVariableタグが全て順番通りに並ぶ。

詳細設定から除外されるVariableタグのtype

automatic
background
url
keycolorのnameのcolor
string

Variableタグは全て詳細設定に表示されるとはかぎらない。例外としてbackgroundのtypeのbody.backgroundのnameのものとcolorのtypeのkeycolorのnameのものは詳細設定から除外されても個別のメニューの背景の背景画像とメインのカラーテーマに表示されて編集可能になる。automaticとbody.backgroundの以外のnameのbackgroundとurlとstringのtypeはテーマデザイナーのどこにも表示されることが確認できないので、テンプレートのソースコードの中だけで変数として使えるもの、開発者向けのVariableタグといえる。その他、lengthのtypeは2017年以降のテンプレートヴァージョンでなくてはテーマデザイナーに反映しないみたいで、それ以前の公式テーマでは使われていても詳細設定や何かに出て来ることはなかった。description属性の値は公式テーマで使われている一部の英語はテーマデザイナーでは他の言語に翻訳されて表示される。

和訳可能なdescription属性の値

Font：フォント
Text Color：テキストの色
Color：色
Outer Background：外側の背景
Main Background：メインの背景
Header Background：ヘッダーの背景
Background height：背景の高さ
Background：背景画像（背景メニュー）
Body background color：本文の背景色
Post background color：投稿の背景色
Background blur：背景のぼかし
Link Color：リンクの色
Visited Color：表示済みの色
Hover Color：カーソルを合わせたときの色
Link Hover Color：リンクホバーの色
Description Color：ブログの説明
Selected Color：選択済みの色
Background Color：背景色
Background icons color：背景のアイコンの色
Text color：テキストの色
Popup background color：ポップアップの背景色
Popup text color：ポップアップのテキストの色
Popup selected color：ポップアップの選択済みの色
Text Font：テキストフォント
Shadow Color：影の色
Title Font：タイトルのフォント
Title Color：タイトルの色
Alternate Color：代替色
Post title color：投稿タイトルの色
Post title font：投稿タイトルのフォント
Post title stream font：投稿タイトルのストリームのフォント
Post text font：投稿のテキストのフォント
Post byline color：投稿のテキストの色
Post byline color：投稿の署名欄の色
Blockquote font：引用のフォント
Blockquote color：引用の色
Post icons color：投稿のアイコンの色
Border Color：枠線の色
Caption Text Color：キャプションのテキストの色
Input color：入力ボックスの色
Input font：入力のフォント
Placeholder text color：プレースホルダテキストの色
Sharing background color：共有の背景色
Sharing text color：共有のテキストの色
Sharing icons color：共有のアイコンの色
Popular post background color：人気の投稿の背景色
Popular post byline color：人気の投稿の署名欄の色
Popular post title color：人気の投稿のタイトルの色
Popular post text color：人気の投稿のテキストの色
Popular post link color：人気の投稿のリンクの色
Post navigation links color：投稿のナビゲーションリンクの色
Post navigation links visited color：投稿の表示済みナビゲーションリンクの色
Post navigations links hover color：投稿のナビゲーションリンクにカーソルを合わせたときの色
Separator Line Color：区切り線の色
Tabs Border Color：タブの枠線の色
Background color (Top)：背景色（上）
Background color (Top) - HD：背景色（上） - 高解像度
Background color (Bottom)：背景色（下）
Separator color：区切りの色
Gadget title color：ガジェットのタイトルの色
Sidebar icons color：サイドバーのアイコンの色
Profile title color：プロフィールのタイトルの色
Profile text color：プロフィールのテキストの色
Profile link color：プロフィールのリンクの色
Label text color：ラベルのテキストの色
Label background color：ラベルの背景色
Attribution text color：帰属のテキストの色
Attribution link color：帰属のリンクの色
Sidebar width：サイドバーの幅
Content width：メインコンテンツの幅
Content margin：コンテンツのマージン
mobile.button.color：モバイル版のボタンの色（項目名）

description属性の翻訳可能な英語は完全一致でなくても大丈夫な場合もなくはないけど、大半は完全一致の場合に翻訳可能になっているようだ。翻訳不可能なその他の英語、英語以外の言語も使えるけれども他の言語に翻訳されず、そのまま、テーマデザイナーの詳細設定の項目名に表示される。Variableタグのdescription属性は誤った値を入れるとテーマデザイナーで何を編集するのかが分からなくなるので、適切な値を入れて明確に表示しなくては行けない。半透明の色を設定するときの注意点Variableタグのcolorのtypeは半透明のrgbaのマークアップも可能になっている。<Variable name="labels.background.color" description="Label background color" type="color" red="$(labels.text.color.red)" green="$(labels.text.color.green)" blue="$(labels.text.color.blue)" default="rgba($(red), $(green), $(blue), 0.06)" value="rgba($(red), $(green), $(blue), 0.06)"/>default属性が初期値で、value属性が現行値になる。厄介なのはテーマデザイナーの操作が現時点で半透明のrgbaに対応してなくて通常色（塗り潰し）と透明しか入力できない。どちらにしても半透明の設定を止めてしまうからVariableタグは初期値でしか半透明を反映させることができない。もう一つ問題があってテーマデザイナーの背景メニューからメインのテーマカラーを設定すると全体的な配色を変えることができるけれどもここでも半透明の設定は通常色に変わってしまって反映させることはできない。現時点でテーマデザイナーから半透明の色を反映させるにはCSSの変数の方で設定しておくしかない。例えばlabels.background.colorのnameのVariableタグを半透明で使いたい場合はskin内のCSSのマークアップに変数を使って次のようにしておく。.post-labels>a, .label-name {background-color:rgba($(labels.background.color.red), $(labels.background.color.green), $(labels.background.color.blue), 0.06)}テーマデザイナーから受け取った通常色の指定をrgbaに合わせてCSSで使ってブログのデザインに半透明で反映させることができる。ただしこれだと全て半透明になるし、透明を入力しても黒の半透明になることに注意しなくては行けない。現時点ではテーマデザイナーでの色の切り替えは通常色と透明（初期値のみ半透明が使用可能）か半透明だけのどちらかを選んで設定するしかない。旧ヴァージョンで使用可能なvariableタグ Bloggerのテーマデザイナーの幅を調整のメニュー

幅を調整｜Blogger

Bloggerのテンプレートヴァージョンが2017年に更新された。それ以前のものは旧ヴァージョンといえる。何も変わらずにブログを表示できるし、今でも多くの旧ヴァージョンのテンプレートが使われている。

旧ヴァージョンの条件

テンプレートのソースコードのhtmlタグにb:version='2'が付いたもの。

通常のVariableタグも機能するけど、もう一つVariableタグの旧ヴァージョンみたいなものとして小文字で始まるvariableタグもある。<?xml version="1.0" encoding="UTF-8" ?> 中略 <head> 中略 <b:template-skin> <b:variable default='960px' name='content.width' type='length'/> 中略 <![CDATA[ body { min-width: $(content.width); } 中略 ]]> </b:template-skin> 中略 </head>variableタグの実際の書式は<b:variable/>となっていてhead内のtemplate-skinタグの中に記載する。通常のVariableタグと使い方は基本的に同じで、automatic以外の全てのtypeが使えるようで、description属性とvalue属性が省略できる分だけ簡略化されている。variableタグのマークアップの特記事項

CDATAの外側に置く。

通常のVariableタグはskin内のCDATA（文字データ：タグは無効）の内側に置いてもタグとして機能するけれどもvariableタグはtemplate-skin内で同じようにしても機能しないので、外側に置いて関連付けて使われる変数の $(variableタグのname属性の値)だけをCDATAに入れるようにする。variableタグはテーマデザイナーの幅を調整に反映する旧ヴァージョンのテンプレートのテーマデザイナーだけ幅を調整というメニューがあるけど、これがvariableタグの三つのlengthのtypeに対応している。幅を調整のvariableタグの三つのlengthのname

content.width：ブログ全体

main.column.left.width：左側のサイドバー

main.column.right.width：右側のサイドバー

ブログのレイアウトの状態で、必要なものが表示されて編集可能になる。新ヴァージョンでは通常のVariableタグのlengthを使って詳細設定の項目に組み込まれている。旧ヴァージョンでも同じことができるけど、以前はvariableタグを使って行われていた。そして今でも公式テーマには残っているし、できないわけではない。