スキップしてメイン コンテンツに移動

些細な日常

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タグの値に使われると間接的にデザインに影響を与え得る。

参考サイト

コメント