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

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

Variableタグの五つの基本項目

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

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

stringのマークアップ例

<Variable name="widget.title.text.transform" description="Widget Title Text Transform" type="string" default="uppercase" value="uppercase"/>

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

$(widget.title.text.transform)

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

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

<data:skin.vars.widget_title_text_transform/>

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

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

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

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

uppercase

Variableの現在値か現在値が省略された場合は初期値がマークアップの出力結果として得られる。

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

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

色んなものを定義する

• 文字や数値や記号
  • 文字や数値や記号

stringのtypeでは何でも設定して変数として使えるといって良いかも知れない。普通にキーボードで入力できるようなものは基本的に値として受け入れられてVariableの定義に使える。

文字や数値や記号は個別だけではなくて「100vw」とか「Welcome!」なんてそれぞれを互いに組み合わせて記載しても構わない。

公式テーマのstringの変数名

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

Simple／シンプルのstring変数

定義済みのデザイン

date.header.padding

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

date.header.letterspacing

日付ヘッダーの文字間の長さ

date.header.margin

日付ヘッダーの外側の余白

body.background.override

使用されない

content.background.color.selector

メインコンテンツの背景色を指定するクラス名

description.text.size

ブログの説明文の文字サイズ

page.width.selector

ブログ全体の横幅を指定するクラス名

page.width

ブログ全体の横幅

mobile.background.overlay

モバイルの背景（確認できない）

mobile.background.size

モバイルの背景の寸法（確認できない）

Dynamic Views／動的ビューのstring変数

定義済みのデザイン

blitzview

ブログの表示全体（見え方）

Picture Window／画像ウィンドウのstring変数

定義済みのデザイン

widget.title.text.transform

ウィジェットのタイトルの文字状態（英語ならば大文字／小文字にするなど）

mobile.background.overlay

モバイルのブログ全体の背景（確認できない）

Awesome Inc.／オーサムインクのstring変数

定義済みのデザイン

body.background.size

使用されない

date.position

日付ヘッダーの位置取り

date.side

日付ヘッダーの位置付け（反映しない）

mobile.background.size

モバイルの背景画像の寸法

mobile.background.overlay

モバイルのブログ全体の背景

Watermark／ウォーターマークのstring変数

定義済みのデザイン

post.border.style

メインカラムの枠線の様式

mobile.background.overlay

モバイルのブログ全体の背景（確認できない）

EtheReal／エスィリアルのstring変数

定義済みのデザイン

link.decoration

リンクの様式

link.visited.decoration

訪問済みリンクの様式

link.hover.decoration

選択済みリンクの様式

mobile.background.overlay

モバイルのブログ全体の背景（確認できない）

mobile.background.size

モバイルの背景画像の寸法（確認できない）

Travel／旅行のstring変数

定義済みのデザイン

mobile.background.overlay

モバイルのブログ全体の背景（確認できない）

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

参考サイト

• Variables d'habillage - Les chaînes de caractères [string]