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

些細な日常

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

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

Variableタグの五つの基本項目

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

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

urlのマークアップ例

<Variable name="tabs.background.gradient" description="Tabs Background Gradient" type="url" default="none" value="url(https://resources.blogblog.com/blogblog/data/1kt/awesomeinc/tabs_gradient_light.png)"/>

URLの「https:」などは省略して「//」から記載しても構わない。

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

$(tabs.background.gradient)

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

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

<data:skin.vars.tabs_background_gradient/>

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

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

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

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

url(https://resources.blogblog.com/blogblog/data/1kt/awesomeinc/tabs_gradient_light.png)

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

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

サイトアドレスを定義する

  • サイトアドレス
    • URL
    • url(URL)

二つの書き方が可能だけれども呼び出した際のマークアップは同じで、url(サイトアドレス)という出力結果になる。

主に画像URLの書き出しに使われるけれどもその他のURLを入力してもエラーにはならない。

公式テーマのurlの変数名

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

Simple/シンプル

定義済みのデザイン
body.background.gradient.cap
全体の裏の背景画像(不使用)
body.background.gradient.tile
ヘッダーの裏の背景画像(不使用)
header.background.gradient
ヘッダーの背景画像(不使用)
tabs.background.gradient
タブのリストの背景画像(不使用)

Picture Window/画像ウィンドウ

定義済みのデザイン
header.background.gradient
ヘッダーの背景画像(不使用)
tabs.background.gradient
タブのリストの背景画像(不使用)
tab.selected.background.gradient
タブのリストの選択と選択済みのリンク、モバイルのタブのページリストの背景画像(不使用)

Awesome Inc./オーサムインク

定義済みのデザイン
body.background.gradient.cap
ヘッダーの裏の投稿スニペットにかかる下の方の背景画像(不使用)
tabs.background.gradient
タブのリスト、タブのリストのリンクの選択と選択済み、モバイルのページネーションの背景画像(不使用)
header.background.gradient
ヘッダーの背景画像(不使用)
widget.outer.background.gradient
サイドバーの裏、モバイルのページネーションと下段ウィジェットの間の左右の領域の背景画像(不使用)
footer.background.gradient
フッター、モバイルのページネーションの裏の背景画像(不使用)

Watermark/ウォーターマーク

定義済みのデザイン
tabs.background.inner
タブのリストの背景画像(一枚目/不使用)
tabs.background.outer
タブのリストとラベルの背景画像(二枚目/不使用)
main.cap.image
確認できない(不使用)
main.cap.overlay
右上に重なる(不使用)
post.background.url
投稿、モバイルのスニペット、モバイルのページネーション、モバイルのタブのページリストの背景画像(極小点)

EtheReal/エスィリアル

定義済みのデザイン
body.background.gradient
全体の裏の背景画像(不使用)
body.background.imageBorder
ブログ全体の左と右の画像
header.background.gradient
CSSへの記載なし(不使用)
content.background.gradient
メインカラムとサイドバーとコメント、コメントの読み込み、返信コメントの背景画像

Travel/旅行

定義済みのデザイン
post.background.url
メインカラムの背景画像(不使用)
content.imageBorder.top
CSSへの記載なし(不使用)
tabs.background.gradient
タブのリストとラベルの背景画像(極小点)
tabs.selected.background.gradient
タブの選択と選択済みのリンク、モバイルのタブのページリストの背景画像(極小点)
widget.outer.background.gradient
サイドバーの左と右の背景画像(極小点)
footer.background.gradient
フッターの背景画像(不使用)

記載されていても殆どが不使用か極小点で、ブログのデザインに影響しないけど、しかし一部のテーマでは装飾用に使われている。

参考サイト

コメント