結城永人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は単体で別の独自タグに組み込んで使うこともできる。どんな場合でも変数名の扱いはタグのときと同じになる。
テンプレートへの出力結果の例
uppercaseVariableの現在値か現在値が省略された場合は初期値がマークアップの出力結果として得られる。
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タグの値に使われると間接的にデザインに影響を与え得る。
コメント