結城永人Bloggerの独自タグのVariableのbackgroundのtypeについてどのように使われるかの内容と公式テーマのソースコードでbackgroundの内容の定義と呼び出しに用いられる変数名を取り上げる。
Variableタグの五つの基本項目
- name／変数名（半角の英数字とピリオドのみ）
- description／説明（指定なし）
- type／種別（決められたもの）
- default／初期値（type毎に指定あり）
- value／現在値（type毎に指定あり）
backgroundのtypeではvalue以外が省略できない必須項目となっている。
backgroundのマークアップ例
<Variable name="body.background" description="Background" color="$(body.background.color)" type="background" default="$(color) none repeat scroll top left" value="$(color) url(https://themes.googleusercontent.com/image?id=L1lcAxxz0CLgsDzixEprHJ2F38TyEjCyE3RSAjynQDks0lT1BDc1OxXKaTEdLc89HPvdB11X9FDw) no-repeat scroll top center /* Credit: Michael Elkan (http://www.offset.com/photos/394244) */"/>URLの「https:」などは省略して「//」から記載しても構わない。
skin内のCSSで呼び出すならば
$(body.background)半角ドル（$）に変数名を半角括弧（()）に入れて続ける。
その他のHTMLで呼び出すならば
<data:skin.vars.body_background/>独自タグのdataを使って半角コロン（:）から「var.skin」に半角ピリオド（.）を挟んで変数名を続けるけれども変数名が半角ピリオドを含む場合は半角アンダースコア（_）に置き換えなくてはならない。
<b:eval expr='data:skin.vars.body_background'/>dataは単体で別の独自タグに組み込んで使うこともできる。どんな場合でも変数名の扱いはタグのときと同じになる。
テンプレートへの出力結果の例
#f5f5dc url(https://themes.googleusercontent.com/image?id=L1lcAxxz0CLgsDzixEprHJ2F38TyEjCyE3RSAjynQDks0lT1BDc1OxXKaTEdLc89HPvdB11X9FDw) repeat scroll top center /* Michael Elkan (http://www.offset.com/photos/394244) */項目名のcolorの値は他のVariableタグから$(body.background.color)で呼び出されて「#f5f5dc」になるけど、さらにそれが含まれる「body.background」の現在値に$(color)で呼び出されるために「#f5f5dc」と記載される。
backgroundの基本項目で使用可能な値
Variableタグのdefaultとvalueに何が入力できるか。
ブログの背景を定義する
- color／色：色名の入力や整数の省略は受け付けない
- #色コード：色の種類（0～9とa～fの六桁の英数字／二つの同値の繰り返しを一つに纏めた三桁の短縮版も可能）
- rgb(R値, G値, B値)：RGB値（0～255の三つ）による色の種類
- rgba(R値, G値, B値, 透明度)：RGB値（0～255の三つ）による色の種類と透明度（0～1）
- transparent：透明
- image／画像URL
- url(画像URL)：画像あり
- none：画像なし
- repeat／繰り返し（一つまでしか入力しない）
- repeat：繰り返す
- no-repeat：繰り返さない
- attachment／取り付け（一つまでしか入力しない）
- scroll：画面と一緒に移動
- fixed：画面の一部に固定
- position／垂直方向の位置（水平方向との値二つ構文）
- top：上
- center：中
- bottom：下
- position／水平方向の位置（垂直方向との値二つ構文）
- left：左
- center：中
- right：右
※各要素の値は使用できると確認できたもので、他にも使用できる値がないとはかぎらない。
CSSの背景指定のbackground要素に合わせるけれども決められた六種類の値だけを全て半角スペースで区切って順番通りに入力する。一つでも省略したり、どれかの値を増やしたり、または順番を変えたりするとテンプレートを新しく保存できなくなる。
通常のbackground要素よりも値の数や使い方が制限されているので、エラーにならないように注意しなくてはならない。背景のデザインをさらに編集したい場合はskin内のCSSなどを書き換える必要がある。
画像にはBloggerで特別に「Credit」を記載して参照元のサイトのリンクを追加すること（ブログのAttribution／帰属ウィジェットへの「テーマ画像の作成者」についてのリンク表示）もできる。
変数名の「body.background」のVariableを必ず記載しなくてはならず、必須項目として記載しないとテンプレートが新しく保存できなくなってしまうから注意したい。
カスタマイズの背景画像の取り込みからテンプレートに画像URLが自動的に入力されるVariableタグが「body.background」になってもいる。
backgroundの追加可能な項目と値
- color：色名での入力は受け付けない
- #色コード：色の種類（六桁の英数字／三桁へ短縮可能）
- transparent：透明
追加すると当該のVariableのdefaultやvalueの値に$(color)で取り込むことができる。
backgroundで使用可能なプロパティ
Variableのデータをプロパティ毎に抽出することができる。
- image
- 画像URL
- color
- 色
二つのプロパティがあり、skin内のCSSは$(変数名.プロパティ）、その他のHTMLは<data:skin.vars.変数名.プロパティ/>のようなドット記法（半角ピリオドとプロパティ）でVariableから当て嵌まるデータを取り出せる。
公式テーマのbackgroundの変数名
BloggerのテンプレートのVariableタグのvalueなどを書き換えると変数名で呼び出される部分のデザインを変更できる。
全てに共通
定義済みのデザイン
- body.background
- 背景の中心的なデザイン
決められた変数名で必ず使わなくてはならないので、公式テーマの全てのテンプレートで同じ変数名が使われている。
カスタマイズの背景画像の取り込みで画像URLが入力される唯一のVariableタグの変数名でもある。
Notable／ノータブル
定義済みのデザイン
- header.background
- ヘッダーの背景
Simple／シンプル
定義済みのデザイン
- paging.background
- ページネーションの背景
Picture Window／画像ウィンドウ
定義済みのデザイン
- content.background
- ブログ全体の背景
- tab.background
- タブのラベルとリンクリストの項目の背景
- main.background
- メインカラムとモバイルの投稿と投稿のスニペットのヘッダーとページネーションの背景
- footer.background
- フッターの背景
Awesome Inc.／オーサムインク
定義済みのデザイン
- date.background
- 投稿と投稿のスニペットのヘッダーの背景
Watermark／ウォーターマーク
定義済みのデザイン
- body.background.overlay
- ヘッダーの背景
- main.background
- メインカラムの背景
- footer.background
- フッターの背景
Travel／旅行
定義済みのデザイン
- content.background
- ヘッダーの背景
- comments.background
- コメントの背景
一部の公式テーマではブログの各部の背景のデザインにbackgroundの変数名のVariableタグが使われている。
コメント