BloggerのVariableタグのlengthの内容と公式テーマの変数名

Bloggerの独自タグのVariableのlengthのtypeについてどのように使われるかの内容と公式テーマのソースコードでlengthの内容の定義と呼び出しに用いられる変数名を取り上げる。

Variableタグの五つの基本項目

• name／変数名（半角の英数字とピリオドのみ）
• description／説明（指定なし）
• type／種別（決められたもの）
• default／初期値（type毎に指定あり）
• value／現在値（type毎に指定あり）

lengthのvalue以外が省略できない必須項目となっている。

lengthのマークアップ例

<Variable name="body.background.height" description="Background height" type="length" min="420px" max="640px" default="480px"  value="480px"/>

skin内のCSSで呼び出すならば

$(body.background.height)

半角ドル（$）に変数名を半角括弧（()）に入れて続ける。

その他のHTMLで呼び出すならば

<data:skin.vars.body_background_height/>

独自タグのdataを使って半角コロン（:）から「var.skin」に半角ピリオド（.）を挟んで変数名を続けるけれども変数名が半角ピリオドを含む場合は半角アンダースコア（_）に置き換えなくてはならない。

<b:eval expr='data:skin.vars_background_height'/>

dataは単体で別の独自タグに組み込んで使うこともできる。どんな場合でも変数名の扱いはタグのときと同じになる。

テンプレートへの出力結果の例

480px

ブログに日本語などの左から右へ進む言語が設定されている場合は「startSide」の変数名から「left」の出力結果だけれども反対に右から左へ進む言語の場合は同じ呼び出し方で「right」に値が入れ替わる。

lengthの基本項目で使用可能な値

Variableタグのdefaultとvalueに何が入力できるか。

ブログの数値を定義する

• 長さ／大きさ
  • 数値：0以外の値は単位として「px」か「em」のどちらかを必ず付ける。0はどちらかの単位を付けても付けなくても構わない。

数値を単位付きで定義してCSSなどで使える。単位は二つあって領域の長さで良く使われる「px」（画面の画素数）と文字の大きさで良く使われる「em」（基準の文字への相対的な大きさ）のどちらかが付けられる。0以外の値は単位が欠かせない。もしも単位を付けずに0以外の数値だけ入力したり、0も含めて規定されない単位を使った場合はエラーになってテンプレートを更新できなくなる。

Variableのlengthならではの特徴としてCSSで呼び出す場合にかぎってマークアップの変数名の値に四則演算を追加して出力結果を変更することができる。

例えば$(body.background.height + 50)だと出力結果は元の値に「50」を足した値となり、元の値を「480px」とすると「530px」が得られることになる。

• 加算：+
• 減産：-
• 乗算：*
• 除算：/

記述する際の注意点として変更名と演算記号と演算用の値は半角スペースで離さなくてはならない。それぞれが一つでもくっ付いた場合はエラーにはならないけれども変数のマークアップがそのままで表示されるので、本来の数値の出力結果は得られない。

もう一つlengthのtypeの出力結果の値、すなわちvalueかvalueがなければdefaultは数値と共に単位の「px」か「em」が不可欠なので、演算する値についても同じ単位を使って揃えるか数値だけを使わなくてはならない。演算用の値に単位を付けなければ変更名の元の値の単位で演算された出力結果が得られる。元の値と異なる単位を演算用の値に使った場合はエラーにはならないけれども変数のマークアップがそのままで表示されるので、本来の数値の出力結果は得られない。

lengthで追加可能な項目と値

• min：テーマデザイナーでの最小値
  • 数値：0以外の値は単位として「px」か「em」のどちらかを必ず付ける。0はどちらかの単位を付けても付けなくても構わない。
• max：テーマデザイナーでの最大値
  • 数値：0以外の値は単位として「px」か「em」のどちらかを必ず付ける。0はどちらかの単位を付けても付けなくても構わない。
• hideEditor：Variableの内容のテーマデザイナーへの表示
  • true：表示する
  • false：表示しない

minとmaxはBloggerの「テーマ」の「カスタマイズ」（テーマデザイナー）でlengthに対応する値調節のスライダーが出たときの最小値と最大値をそれぞれに設定できる。Variableで入力する仕方は基本項目のdefaultやvalueと同じだけれどもminとmaxの単位はスライダーに影響しない。つまりスライダーの単位は実際にブログに反映するvalueかvalueがなければdefaultから取られるので、minもmaxも数値の部分しか関与しないわけだ。それらの単位は必要ないといって良いけれども省略するとエラーになってテンプレートを更新できなくなるから0以外の数値では付けずに入力してはならない。規定の「px」か「em」のどちらかが付いてさえいればdefaultやvalueと合ってなくても構わないようだ。

hideEditorはBloggerの「テーマ」の「カスタマイズ」（テーマデザイナー）でVeriableタグの内容を表示するかどうかを切り替えられる。

公式テーマのlengthの変数名

BloggerのテンプレートのVariableタグのvalueなどを書き換えると変数名で呼び出される部分のデザインを変更できる。

• Contempo
• Soho
• Emporio
• Notable
• Essential
• Simple
• Dynamic Views（不使用）
• Picture Window
• Awesome Inc.
• Watermark
• Ethereal
• Travel

Contempo／コンテンポ

定義済みのデザイン

body.background.height

ヘッダー画像の高さ、ヘッダー画像の重ね合わせ色の高さ、大画面用のサイドバーの上の外側の余白と最小の高さと最初から開くサイドバーの上段の高さと上の外側の余白とサイドバーの上段の高さと最大の高さ

body.background.blur

ヘッダー画像のぼかし、ぼかしによる領域のずれの調整

sidebar.width

画面幅によるデザインの振り分け、サイドバーの横幅と最大の横幅と開閉のアニメーション、大画面用のサイドバーの下段の横幅と最大の横幅とサイドバーのスペースの確保とフローティングバーに対するサイドバーのスペースの調整とヘッダーに対するサイドバーのスペースの調整

content.width

画面幅によるデザインの振り分け、メインカラムの最大の横幅、フローティングバーのコンテンツの最大の横幅

content.margin

画面幅によるデザインの振り分け

Soho／ソーホー

定義済みのデザイン

sidebar.width

画面幅によるデザインの振り分け、サイドバーの横幅と最大の横幅、小画面用のサイドバーの開閉のアニメーション、大画面のサイドバーのスペースの確保とフローティングでのコンテンツの調整

content.width

画面幅によるデザインの振り分け、中画面（メインカラムよりも240px広い）以上のヘッダーとメインカラムと投稿／スニペットとコメントと記事間のアドセンスと人気の投稿と注目の投稿のサムネイルの横幅

content.margin

画面幅によるデザインの振り分け

Emporio／エンポリオ

定義済みのデザイン

bodyLineHeight

変数名のposts.text.lineHeightの初期値

bodyLineHeightSmall

変数名のposts.snippet.text.lineHeightの初期値

posts.text.lineHeight

記事／個別ページの本文の行間

posts.snippet.text.lineHeight

投稿のスニペットの行間（使用されない）と最大の高さ（使用されない）

posts.border.radius

投稿のスニペットと記事／個別ページの本文の上の左右とコメントの下の左右の角丸

sidebar.width

画面幅によるデザインの振り分け、サイドバーの横幅と最大の横幅、超大画面（投稿のスニペット三つとサイドバーと少し以上）用の縦置きアドセンスあり（使用されない）のブログ全体の横幅、可成の大画面（投稿のスニペット二つから三つまでとサイドバーと少し）用のブログ全体の横幅、可成の大画面用の縦置きアドセンスあり（使用されない）のブログ全体の横幅、中々の大画面（投稿のスニペット二つとサイドバーと少し以下）用のブログ全体の横幅、ヘッダーの最大の横幅、縦置きアドセンスあり（使用されない）のヘッダーの横幅、中々の大画面用の注目の投稿のサムネイルの横幅

posts.width.stream

画面幅によるデザインの振り分け、ブログ全体の横幅、超大画面（投稿のスニペット三つとサイドバーと少し以上）用の縦置きアドセンスあり（使用されない）のブログ全体の横幅、可成の大画面（投稿のスニペット二つか三つまでとサイドバーと少し）用のブログ全体の横幅、可成の大画面用の縦置きアドセンスあり（使用されない）のブログ全体の横幅（使用されない）、中々の大画面（投稿のスニペット二つとサイドバーと少し以下）用のブログ全体の横幅、注目の投稿のサムネイルとメインカラムとアーカイブ／ラベルページのメッセージとページリスト（先頭）の横幅、投稿のスニペットの横幅、可成の大画面用の注目の投稿のサムネイルとメインカラムとアーカイブ／ラベルページのメッセージとページリスト（先頭）の横幅、投稿のスニペットの横幅、可成の大画面用の縦置きアドセンスあり（使用されない）の注目の投稿のサムネイルとメインカラムとアーカイブ／ラベルページのメッセージとページリスト（先頭）の横幅、ヘッダーの最大の横幅、縦置きアドセンスあり（使用されない）のヘッダーの最大の横幅、注目の投稿／投稿のスニペットの横幅、中々の大画面用の注目の投稿のサムネイルと注目の投稿／投稿のスニペットの横幅

Notable／ノータブル

定義済みのデザイン

sidebar.width

画面幅によるデザインの振り分け、サイドバーの横幅と最大の横幅、小画面用のサイドバーの開閉のアニメーション、メインコンテンツ（メインカラムとサイドバー）の最大の横幅、大画面用のヘッダーの最大の横幅とヘッダーのサイドバーのスペースの確保とサイドバーの最大の横幅とフッターのサイドバーのスペースの確保

feed.width

画面幅によるデザインの振り分け、メインカラムの最大の横幅、メインコンテンツ（メインカラムとサイドバー）の最大の横幅、ヘッダーの最大の横幅、説明文の最大の横幅、投稿／人気の投稿の最大の横幅、記事間のアドセンスの最大の横幅、記事／個別ページの説明文の最大の横幅、注目の投稿のスニペットのタイトルの最大の横幅、小画面用のメインカラムの最大の横幅、大画面用のヘッダーの最大の横幅

Essential／エッセンシャル

定義済みのデザイン

body.background.height

ヘッダー画像の高さ、ヘッダー画像の重ね合わせ色の高さ、大画面用のサイドバーの上の外側の余白と最小の高さと最初から開くサイドバーの上段の高さと上の外側の余白とサイドバーの上段の高さと最大の高さ

body.background.blur

ヘッダー画像のぼかしとぼかしによる領域のずれの調整

sidebar.width

画面幅によるデザインの振り分け、サイドバーの横幅と最大の横幅、小画面用のサイドバーの開閉のアニメーション、大画面用のサイドバーの下段の横幅と最大の横幅とサイドバーのスペースの確保とフローティングバーに対するサイドバーのスペースの調整とヘッダーに対するサイドバーのスペースの調整

content.width

画面幅によるデザインの振り分け、メインカラムの最大の横幅、フローティングバーのコンテンツの最大の横幅

content.margin

画面幅によるデザインの振り分け

Simple／シンプル

定義済みのデザイン

content.padding

ブログ全体の上下の内側の余白（反映しない）

content.padding.horizontal

ブログ全体の左右の内側の余白（反映しない）

content.shadow.spread

ブログ全体の左右と下の外側の余白と通常／moz系ブラウザでの影

content.shadow.spread.webkit

ブログ全体の外側のwebkit系ブラウザでの影

content.shadow.spread.ie

ブログ全体の外側のIEブラウザでの影

main.border.width

メインコンテンツ（メインカラムとサイドバー）の上の枠線

header.shadow.offset.left

ブログ名の影の左への移動

header.shadow.offset.top

ブログ名の影の下への移動

header.shadow.spread

ブログ名の影の広がり（ぼかし）

header.padding

ブログ名と説明文の周りの余白

header.border.size

タブの最初のリスト／ラベルの上の外側の余白と枠線

header.bottom.border.size

タブの最初の領域の上の枠線

header.border.horizontalsize

タブの最初のリスト／ラベルの左右の外側の枠線

tabs.margin.top

タブのリスト／ラベルの上の外側の余白（反映しない）

tabs.margin.side

タブのリスト／ラベルの左右の外側の余白

tabs.border.width

タブのリスト／ラベルの下の枠線とリンク付き項目の開始側の枠線（先頭は確認できない）、モバイルのタブのページリストの上下の枠線

tabs.bevel.border.width

タブのリスト／ラベルとリンク付き項目の終了側の枠線

post.margin.bottom

記事／個別ページの中心の下（コメントの上）の外側の余白

image.border.small.size

投稿と投稿のスニペットとプロフィールウィジェットと画像ウィジェットとブログリストの画像、投稿の説明文付きの画像の内側の余白（投稿と投稿の説明文付きの画像は反映しない）

image.border.large.size

投稿と投稿の説明文付きの画像の内側の余白

main.section.margin

メインコンテンツ（メインカラムとサイドバー）の左右の内側の余白

main.padding

メインカラムの左右の内側の余白

main.padding.top

メインコンテンツ（メインカラムとサイドバー）の上の内側の余白

main.padding.bottom

メインコンテンツ（メインカラムとサイドバー）の下の内側の余白

footer.bevel

フッターの上の枠線

Dynamic Views／動的ビュー

Variableタグのlengthのtypeは使われてない。

Picture Window／画像ウィンドウ

定義済みのデザイン

content.margin

ブログ全体の上下の外側の余白

content.padding

ブログ全体の内側の余白

content.border.radius

ブログ全体の角丸

content.shadow.spread

ブログ全体の影の広がり（ぼかし）

header.padding

ブログ名と説明文の周りの左右の内側の余白

header.border.radius

ヘッダーとヘッダーの周りとヘッダー画像の角丸

main.border.radius.top

メインカラムの上側の角丸

footer.border.radius.top

フッターの上側の角丸

footer.border.radius.bottom

フッターの下側の角丸

region.shadow.spread

タブの現在ページのリンク付き項目（ページリストの個別ページ以外は確認できない）と選択済みリンクとメインカラムとフッターの影の広がり（ぼかし）

region.shadow.offset

メインカラムとフッターの影の下への延び

tab.border.radius

タブのリンク付き項目の上側の角丸

tab.first.border.radius

タブのウィジェットの最初のリンク付き項目の上の開始側の角丸

tabs.border.radius

タブのリスト／ラベルとウィジェットの最初のリンク付き項目の下の開始側のの角丸

tabs.spacing

タブのリンク付き項目の外側の終了側の余白

tabs.margin.bottom

タブの外側の下の余白

tabs.margin.sides

タブの外側の左右の余白

main.padding.sides

メインカラムとフッターの内側の左右の余白

post.margin.sides

投稿とコメントの周りの外側の左右の余白

post.border.radius

投稿とコメントの周りの角丸

Awesome Inc.／オーサムインク

定義済みのデザイン

title.shadow.spread

ブログ名とウィジェットのタイトルと日付ヘッダーの文字の影の広がり（ぼかし）

header.padding.top

ブログ名の周りの内側の上の余白

header.margin.top

ヘッダーの外側の上の余白

header.margin.bottom

ヘッダーの外側の下の余白

widget.padding.top

メインコンテンツ（メインカラムとサイドバー）とフッターのウィジェットのタイトルありのコンテンツの内側の上の余白の外側の上の余白、メインコンテンツ（メインカラムとサイドバー）のウィジェットのリスト（ラベルと人気の投稿など、ただしアーカイブは反映しない）とアーカイブウィジェットのフラットリスト部分とアーカイブウィジェットの外側の上の逆向きの余白

widget.padding.side

メインコンテンツ（メインカラムとサイドバー）のウィジェットの内側の左右の余白

widget.outer.margin.top

サイドバーの外側の上の余白

widget.border.radius

サイドバー自体とメインカラムとサイドバーのウィジェットと日付ヘッダーとページャー（上側は反映しない）の角丸

outer.shadow.spread

サイドバーの影の広がり（ぼかし）

date.header.border.radius.top

日付ヘッダーの上側の左右の角丸

date.header.position

日付ヘッダーの開始側からの位置決め（date.positionがrelativeなどの設定で反映し得る）

date.space

メインコンテンツ（メインカラムとサイドバー）の内側の上の余白、日付ヘッダーありのコンテンツの外側の上の余白（確認できない）

date.padding.bottom

日付ヘッダーの内側の下の余白

date.border.size

日付ヘッダーの上と左右の枠線

date.first.border.radius.top

モバイルの日付ヘッダーを持つ最初のコンテンツの上側の左右の角丸

date.last.space.bottom

日付ヘッダーを持つ最後のコンテンツの外側の上の余白

date.last.border.radius.bottom

日付ヘッダーを持つ最後のコンテンツの周りの下側の左右の角丸

post.first.padding.top

日付ヘッダーを持つ最初のコンテンツの内側の上の余白（最初以外でも反映する）

image.shadow.spread

投稿画像の影の広がり（ぼかし）

image.border.radius

投稿画像の角丸

separator.outdent

メインコンテンツ（メインカラムとサイドバー）のウィジェットのタイトルとコンテンツと日付ヘッダーを持つコンテンツと記事／個別ページの記事間（本文下）のアドセンスの外側と内側の左右の余白（それぞれの外側が減って内側が増して余白が相殺されるから位置取りは変わらない）

title.separator.border.size

メインコンテンツ（メインカラムとサイドバー）とフッターのウィジェットのタイトルありのコンテンツの上の枠線

list.separator.border.size

メインコンテンツ（メインカラムとサイドバー）のウィジェットのリスト（ラベルや人気の投稿など、ただしアーカイブの階層では反映しない）とアーカイブのフラットリストの項目の上の枠線

shadow.spread

メインコンテンツ（メインカラムとサイドバー）のウィジェットと日付ヘッダーを持つコンテンツとページャーとフッターの影の広がり（ぼかし）、フッターの外側と内側の上の余白（外側が減って内側が増して余白が相殺されるから位置取りは変わらない）

pager.border.radius.top

ページャーの上側の左右の角丸

pager.space.top

ページャーの外側の上の余白

Watermark／ウォーターマーク

定義済みのデザイン

body.background.overlay.height

ヘッダーの初期画像の高さ

tabs.border.size

タブのページリストとリンクリストとラベルの周り上下の枠線

tabs.shadow.spread

タブのページリストとリンクリストとラベルの周りの影の広がり（ぼかし）

main.padding.top

メインコンテンツ（メインカラムとサイドバー）の内側の上の余白

main.cap.height

ヘッダーとフッターの開始と終了の挿入画像の高さ（使用されない）

post.border.size

投稿とコメントの周りの枠線

post.shadow.spread

投稿とコメントの周りの影の広がり（ぼかし）

Ethereal／エスィリアル

定義済みのデザイン

body.background.imageBorder.position.left

背景の外側と内側の左の余白（外側が減って内側が増して相殺されるから位置取りは変わらない）

body.background.imageBorder.position.right

背景の外側と内側の右の余白（外側が減って内側が増して相殺されるから位置取りは変わらない）

widget.padding.top

メインコンテンツとフッターのウィジェットのタイトルありのコンテンツの内側の上の余白、メインコンテンツのウィジェットのリスト（ラベルと人気の投稿など、ただしアーカイブは反映しない）とアーカイブウィジェットのフラットリストとアーカイブウィジェットの外側の上の逆向きの余白

date.space

メインコンテンツ（メインカラムとサイドバー）の内側の上の余白、日付ヘッダーありのコンテンツの外側の上の余白（確認できない）

post.first.padding.top

日付ヘッダーを持つ最初のコンテンツの内側の上の余白（最初以外でも反映する）

Travel／旅行

定義済みのデザイン

content.imageBorder.top.space

ヘッダーの上の高さ、ブログのコンテンツ全体の背景の逆向きの縦方向の位置取り

content.margin

ブログのコンテンツ全体の内側の上の余白

content.padding

コンテンツ全体の内側の余白、メインコンテンツ（メインカラムとサイドバー）の内側の上下の余白、サイドバーのコンテンツと背景の外側のメインカラム寄りの余白

content.posts.padding

メインコンテンツ（メインカラムとサイドバー）とメインカラムの内側の上下の余白

一つの変数はそのままでCSSに記載されるだけではなく、他のVariableタグの値に使われると間接的にデザインに影響を与え得る。

Bloggerの公式テーマではブログの各部の余白や枠線に多いけれどもどこかのデザインにVariableタグの値が使われていてもその部分を別のCSSで後から上書きされたりすると反映しなくなる。

参考サイト

• Variables d'habillage - Les dimensions [length]