結城永人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
- フッターの背景画像（不使用）
記載されていても殆どが不使用か極小点で、ブログのデザインに影響しないけど、しかし一部のテーマでは装飾用に使われている。
コメント