Bloggerの独自タグのVariableのlengthのtypeについてどのように使われるかの内容と公式テーマのソースコードでlengthの内容の定義と呼び出しに用いられる変数名を取り上げる。
Variableタグの五つの基本項目
- name/変数名(半角の英数字とピリオドのみ)
- description/説明(指定なし)
- type/種別(決められたもの)
- default/初期値(type毎に指定あり)
- value/現在値(type毎に指定あり)
lengthのvalue以外が省略できない必須項目となっている。
lengthのマークアップ例
<Variable name="body.background.height" description="Background height" type="length" min="420px" max="640px" default="480px" value="480px"/>
skin内のCSSで呼び出すならば
$(body.background.height)
半角ドル($)に変数名を半角括弧(())に入れて続ける。
その他のHTMLで呼び出すならば
<data:skin.vars.body_background_height/>
独自タグのdataを使って半角コロン(:)から「var.skin」に半角ピリオド(.)を挟んで変数名を続けるけれども変数名が半角ピリオドを含む場合は半角アンダースコア(_)に置き換えなくてはならない。
<b:eval expr='data:skin.vars_background_height'/>
dataは単体で別の独自タグに組み込んで使うこともできる。どんな場合でも変数名の扱いはタグのときと同じになる。
テンプレートへの出力結果の例
480px
ブログに日本語などの左から右へ進む言語が設定されている場合は「startSide」の変数名から「left」の出力結果だけれども反対に右から左へ進む言語の場合は同じ呼び出し方で「right」に値が入れ替わる。
lengthの基本項目で使用可能な値
Variableタグのdefaultとvalueに何が入力できるか。
ブログの数値を定義する
- 長さ/大きさ
- 数値:0以外の値は単位として「px」か「em」のどちらかを必ず付ける。0はどちらかの単位を付けても付けなくても構わない。
数値を単位付きで定義してCSSなどで使える。単位は二つあって領域の長さで良く使われる「px」(画面の画素数)と文字の大きさで良く使われる「em」(基準の文字への相対的な大きさ)のどちらかが付けられる。0以外の値は単位が欠かせない。もしも単位を付けずに0以外の数値だけ入力したり、0も含めて規定されない単位を使った場合はエラーになってテンプレートを更新できなくなる。
Variableのlengthならではの特徴としてCSSで呼び出す場合にかぎってマークアップの変数名の値に四則演算を追加して出力結果を変更することができる。
例えば$(body.background.height + 50)
だと出力結果は元の値に「50」を足した値となり、元の値を「480px」とすると「530px」が得られることになる。
- 加算:+
- 減産:-
- 乗算:*
- 除算:/
記述する際の注意点として変更名と演算記号と演算用の値は半角スペースで離さなくてはならない。それぞれが一つでもくっ付いた場合はエラーにはならないけれども変数のマークアップがそのままで表示されるので、本来の数値の出力結果は得られない。
もう一つlengthのtypeの出力結果の値、すなわちvalueかvalueがなければdefaultは数値と共に単位の「px」か「em」が不可欠なので、演算する値についても同じ単位を使って揃えるか数値だけを使わなくてはならない。演算用の値に単位を付けなければ変更名の元の値の単位で演算された出力結果が得られる。元の値と異なる単位を演算用の値に使った場合はエラーにはならないけれども変数のマークアップがそのままで表示されるので、本来の数値の出力結果は得られない。
lengthで追加可能な項目と値
- min:テーマデザイナーでの最小値
- 数値:0以外の値は単位として「px」か「em」のどちらかを必ず付ける。0はどちらかの単位を付けても付けなくても構わない。
- max:テーマデザイナーでの最大値
- 数値:0以外の値は単位として「px」か「em」のどちらかを必ず付ける。0はどちらかの単位を付けても付けなくても構わない。
- hideEditor:Variableの内容のテーマデザイナーへの表示
- true:表示する
- false:表示しない
minとmaxはBloggerの「テーマ」の「カスタマイズ」(テーマデザイナー)でlengthに対応する値調節のスライダーが出たときの最小値と最大値をそれぞれに設定できる。Variableで入力する仕方は基本項目のdefaultやvalueと同じだけれどもminとmaxの単位はスライダーに影響しない。つまりスライダーの単位は実際にブログに反映するvalueかvalueがなければdefaultから取られるので、minもmaxも数値の部分しか関与しないわけだ。それらの単位は必要ないといって良いけれども省略するとエラーになってテンプレートを更新できなくなるから0以外の数値では付けずに入力してはならない。規定の「px」か「em」のどちらかが付いてさえいればdefaultやvalueと合ってなくても構わないようだ。
hideEditorはBloggerの「テーマ」の「カスタマイズ」(テーマデザイナー)でVeriableタグの内容を表示するかどうかを切り替えられる。
公式テーマのlengthの変数名
BloggerのテンプレートのVariableタグのvalueなどを書き換えると変数名で呼び出される部分のデザインを変更できる。
- Contempo
- Soho
- Emporio
- Notable
- Essential
- Simple
- Dynamic Views(不使用)
- Picture Window
- Awesome Inc.
- Watermark
- Ethereal
- Travel
Contempo/コンテンポ
定義済みのデザイン
- body.background.height
- ヘッダー画像の高さ、ヘッダー画像の重ね合わせ色の高さ、大画面用のサイドバーの上の外側の余白と最小の高さと最初から開くサイドバーの上段の高さと上の外側の余白とサイドバーの上段の高さと最大の高さ
- body.background.blur
- ヘッダー画像のぼかし、ぼかしによる領域のずれの調整
- sidebar.width
- 画面幅によるデザインの振り分け、サイドバーの横幅と最大の横幅と開閉のアニメーション、大画面用のサイドバーの下段の横幅と最大の横幅とサイドバーのスペースの確保とフローティングバーに対するサイドバーのスペースの調整とヘッダーに対するサイドバーのスペースの調整
- content.width
- 画面幅によるデザインの振り分け、メインカラムの最大の横幅、フローティングバーのコンテンツの最大の横幅
- content.margin
- 画面幅によるデザインの振り分け
Soho/ソーホー
定義済みのデザイン
- sidebar.width
- 画面幅によるデザインの振り分け、サイドバーの横幅と最大の横幅、小画面用のサイドバーの開閉のアニメーション、大画面のサイドバーのスペースの確保とフローティングでのコンテンツの調整
- content.width
- 画面幅によるデザインの振り分け、中画面(メインカラムよりも240px広い)以上のヘッダーとメインカラムと投稿/スニペットとコメントと記事間のアドセンスと人気の投稿と注目の投稿のサムネイルの横幅
- content.margin
- 画面幅によるデザインの振り分け
Emporio/エンポリオ
定義済みのデザイン
- bodyLineHeight
- 変数名のposts.text.lineHeightの初期値
- bodyLineHeightSmall
- 変数名のposts.snippet.text.lineHeightの初期値
- posts.text.lineHeight
- 記事/個別ページの本文の行間
- posts.snippet.text.lineHeight
- 投稿のスニペットの行間(使用されない)と最大の高さ(使用されない)
- posts.border.radius
- 投稿のスニペットと記事/個別ページの本文の上の左右とコメントの下の左右の角丸
- sidebar.width
- 画面幅によるデザインの振り分け、サイドバーの横幅と最大の横幅、超大画面(投稿のスニペット三つとサイドバーと少し以上)用の縦置きアドセンスあり(使用されない)のブログ全体の横幅、可成の大画面(投稿のスニペット二つから三つまでとサイドバーと少し)用のブログ全体の横幅、可成の大画面用の縦置きアドセンスあり(使用されない)のブログ全体の横幅、中々の大画面(投稿のスニペット二つとサイドバーと少し以下)用のブログ全体の横幅、ヘッダーの最大の横幅、縦置きアドセンスあり(使用されない)のヘッダーの横幅、中々の大画面用の注目の投稿のサムネイルの横幅
- posts.width.stream
- 画面幅によるデザインの振り分け、ブログ全体の横幅、超大画面(投稿のスニペット三つとサイドバーと少し以上)用の縦置きアドセンスあり(使用されない)のブログ全体の横幅、可成の大画面(投稿のスニペット二つか三つまでとサイドバーと少し)用のブログ全体の横幅、可成の大画面用の縦置きアドセンスあり(使用されない)のブログ全体の横幅(使用されない)、中々の大画面(投稿のスニペット二つとサイドバーと少し以下)用のブログ全体の横幅、注目の投稿のサムネイルとメインカラムとアーカイブ/ラベルページのメッセージとページリスト(先頭)の横幅、投稿のスニペットの横幅、可成の大画面用の注目の投稿のサムネイルとメインカラムとアーカイブ/ラベルページのメッセージとページリスト(先頭)の横幅、投稿のスニペットの横幅、可成の大画面用の縦置きアドセンスあり(使用されない)の注目の投稿のサムネイルとメインカラムとアーカイブ/ラベルページのメッセージとページリスト(先頭)の横幅、ヘッダーの最大の横幅、縦置きアドセンスあり(使用されない)のヘッダーの最大の横幅、注目の投稿/投稿のスニペットの横幅、中々の大画面用の注目の投稿のサムネイルと注目の投稿/投稿のスニペットの横幅
Notable/ノータブル
定義済みのデザイン
- sidebar.width
- 画面幅によるデザインの振り分け、サイドバーの横幅と最大の横幅、小画面用のサイドバーの開閉のアニメーション、メインコンテンツ(メインカラムとサイドバー)の最大の横幅、大画面用のヘッダーの最大の横幅とヘッダーのサイドバーのスペースの確保とサイドバーの最大の横幅とフッターのサイドバーのスペースの確保
- feed.width
- 画面幅によるデザインの振り分け、メインカラムの最大の横幅、メインコンテンツ(メインカラムとサイドバー)の最大の横幅、ヘッダーの最大の横幅、説明文の最大の横幅、投稿/人気の投稿の最大の横幅、記事間のアドセンスの最大の横幅、記事/個別ページの説明文の最大の横幅、注目の投稿のスニペットのタイトルの最大の横幅、小画面用のメインカラムの最大の横幅、大画面用のヘッダーの最大の横幅
Essential/エッセンシャル
定義済みのデザイン
- body.background.height
- ヘッダー画像の高さ、ヘッダー画像の重ね合わせ色の高さ、大画面用のサイドバーの上の外側の余白と最小の高さと最初から開くサイドバーの上段の高さと上の外側の余白とサイドバーの上段の高さと最大の高さ
- body.background.blur
- ヘッダー画像のぼかしとぼかしによる領域のずれの調整
- sidebar.width
- 画面幅によるデザインの振り分け、サイドバーの横幅と最大の横幅、小画面用のサイドバーの開閉のアニメーション、大画面用のサイドバーの下段の横幅と最大の横幅とサイドバーのスペースの確保とフローティングバーに対するサイドバーのスペースの調整とヘッダーに対するサイドバーのスペースの調整
- content.width
- 画面幅によるデザインの振り分け、メインカラムの最大の横幅、フローティングバーのコンテンツの最大の横幅
- content.margin
- 画面幅によるデザインの振り分け
Simple/シンプル
定義済みのデザイン
- content.padding
- ブログ全体の上下の内側の余白(反映しない)
- content.padding.horizontal
- ブログ全体の左右の内側の余白(反映しない)
- content.shadow.spread
- ブログ全体の左右と下の外側の余白と通常/moz系ブラウザでの影
- content.shadow.spread.webkit
- ブログ全体の外側のwebkit系ブラウザでの影
- content.shadow.spread.ie
- ブログ全体の外側のIEブラウザでの影
- main.border.width
- メインコンテンツ(メインカラムとサイドバー)の上の枠線
- header.shadow.offset.left
- ブログ名の影の左への移動
- header.shadow.offset.top
- ブログ名の影の下への移動
- header.shadow.spread
- ブログ名の影の広がり(ぼかし)
- header.padding
- ブログ名と説明文の周りの余白
- header.border.size
- タブの最初のリスト/ラベルの上の外側の余白と枠線
- header.bottom.border.size
- タブの最初の領域の上の枠線
- header.border.horizontalsize
- タブの最初のリスト/ラベルの左右の外側の枠線
- tabs.margin.top
- タブのリスト/ラベルの上の外側の余白(反映しない)
- tabs.margin.side
- タブのリスト/ラベルの左右の外側の余白
- tabs.border.width
- タブのリスト/ラベルの下の枠線とリンク付き項目の開始側の枠線(先頭は確認できない)、モバイルのタブのページリストの上下の枠線
- tabs.bevel.border.width
- タブのリスト/ラベルとリンク付き項目の終了側の枠線
- post.margin.bottom
- 記事/個別ページの中心の下(コメントの上)の外側の余白
- image.border.small.size
- 投稿と投稿のスニペットとプロフィールウィジェットと画像ウィジェットとブログリストの画像、投稿の説明文付きの画像の内側の余白(投稿と投稿の説明文付きの画像は反映しない)
- image.border.large.size
- 投稿と投稿の説明文付きの画像の内側の余白
- main.section.margin
- メインコンテンツ(メインカラムとサイドバー)の左右の内側の余白
- main.padding
- メインカラムの左右の内側の余白
- main.padding.top
- メインコンテンツ(メインカラムとサイドバー)の上の内側の余白
- main.padding.bottom
- メインコンテンツ(メインカラムとサイドバー)の下の内側の余白
- footer.bevel
- フッターの上の枠線
Dynamic Views/動的ビュー
Variableタグのlengthのtypeは使われてない。
Picture Window/画像ウィンドウ
定義済みのデザイン
content.margin
- ブログ全体の上下の外側の余白
- content.padding
- ブログ全体の内側の余白
- content.border.radius
- ブログ全体の角丸
- content.shadow.spread
- ブログ全体の影の広がり(ぼかし)
- header.padding
- ブログ名と説明文の周りの左右の内側の余白
- header.border.radius
- ヘッダーとヘッダーの周りとヘッダー画像の角丸
- main.border.radius.top
- メインカラムの上側の角丸
- footer.border.radius.top
- フッターの上側の角丸
- footer.border.radius.bottom
- フッターの下側の角丸
- region.shadow.spread
- タブの現在ページのリンク付き項目(ページリストの個別ページ以外は確認できない)と選択済みリンクとメインカラムとフッターの影の広がり(ぼかし)
- region.shadow.offset
- メインカラムとフッターの影の下への延び
- tab.border.radius
- タブのリンク付き項目の上側の角丸
- tab.first.border.radius
- タブのウィジェットの最初のリンク付き項目の上の開始側の角丸
- tabs.border.radius
- タブのリスト/ラベルとウィジェットの最初のリンク付き項目の下の開始側のの角丸
- tabs.spacing
- タブのリンク付き項目の外側の終了側の余白
- tabs.margin.bottom
- タブの外側の下の余白
- tabs.margin.sides
- タブの外側の左右の余白
- main.padding.sides
- メインカラムとフッターの内側の左右の余白
- post.margin.sides
- 投稿とコメントの周りの外側の左右の余白
- post.border.radius
- 投稿とコメントの周りの角丸
Awesome Inc./オーサムインク
定義済みのデザイン
- title.shadow.spread
- ブログ名とウィジェットのタイトルと日付ヘッダーの文字の影の広がり(ぼかし)
- header.padding.top
- ブログ名の周りの内側の上の余白
- header.margin.top
- ヘッダーの外側の上の余白
- header.margin.bottom
- ヘッダーの外側の下の余白
- widget.padding.top
- メインコンテンツ(メインカラムとサイドバー)とフッターのウィジェットのタイトルありのコンテンツの内側の上の余白の外側の上の余白、メインコンテンツ(メインカラムとサイドバー)のウィジェットのリスト(ラベルと人気の投稿など、ただしアーカイブは反映しない)とアーカイブウィジェットのフラットリスト部分とアーカイブウィジェットの外側の上の逆向きの余白
- widget.padding.side
- メインコンテンツ(メインカラムとサイドバー)のウィジェットの内側の左右の余白
- widget.outer.margin.top
- サイドバーの外側の上の余白
- widget.border.radius
- サイドバー自体とメインカラムとサイドバーのウィジェットと日付ヘッダーとページャー(上側は反映しない)の角丸
- outer.shadow.spread
- サイドバーの影の広がり(ぼかし)
- date.header.border.radius.top
- 日付ヘッダーの上側の左右の角丸
- date.header.position
- 日付ヘッダーの開始側からの位置決め(date.positionがrelativeなどの設定で反映し得る)
- date.space
- メインコンテンツ(メインカラムとサイドバー)の内側の上の余白、日付ヘッダーありのコンテンツの外側の上の余白(確認できない)
- date.padding.bottom
- 日付ヘッダーの内側の下の余白
- date.border.size
- 日付ヘッダーの上と左右の枠線
- date.first.border.radius.top
- モバイルの日付ヘッダーを持つ最初のコンテンツの上側の左右の角丸
- date.last.space.bottom
- 日付ヘッダーを持つ最後のコンテンツの外側の上の余白
- date.last.border.radius.bottom
- 日付ヘッダーを持つ最後のコンテンツの周りの下側の左右の角丸
- post.first.padding.top
- 日付ヘッダーを持つ最初のコンテンツの内側の上の余白(最初以外でも反映する)
- image.shadow.spread
- 投稿画像の影の広がり(ぼかし)
- image.border.radius
- 投稿画像の角丸
- separator.outdent
- メインコンテンツ(メインカラムとサイドバー)のウィジェットのタイトルとコンテンツと日付ヘッダーを持つコンテンツと記事/個別ページの記事間(本文下)のアドセンスの外側と内側の左右の余白(それぞれの外側が減って内側が増して余白が相殺されるから位置取りは変わらない)
- title.separator.border.size
- メインコンテンツ(メインカラムとサイドバー)とフッターのウィジェットのタイトルありのコンテンツの上の枠線
- list.separator.border.size
- メインコンテンツ(メインカラムとサイドバー)のウィジェットのリスト(ラベルや人気の投稿など、ただしアーカイブの階層では反映しない)とアーカイブのフラットリストの項目の上の枠線
- shadow.spread
- メインコンテンツ(メインカラムとサイドバー)のウィジェットと日付ヘッダーを持つコンテンツとページャーとフッターの影の広がり(ぼかし)、フッターの外側と内側の上の余白(外側が減って内側が増して余白が相殺されるから位置取りは変わらない)
- pager.border.radius.top
- ページャーの上側の左右の角丸
- pager.space.top
- ページャーの外側の上の余白
Watermark/ウォーターマーク
定義済みのデザイン
- body.background.overlay.height
- ヘッダーの初期画像の高さ
- tabs.border.size
- タブのページリストとリンクリストとラベルの周り上下の枠線
- tabs.shadow.spread
- タブのページリストとリンクリストとラベルの周りの影の広がり(ぼかし)
- main.padding.top
- メインコンテンツ(メインカラムとサイドバー)の内側の上の余白
- main.cap.height
- ヘッダーとフッターの開始と終了の挿入画像の高さ(使用されない)
- post.border.size
- 投稿とコメントの周りの枠線
- post.shadow.spread
- 投稿とコメントの周りの影の広がり(ぼかし)
Ethereal/エスィリアル
定義済みのデザイン
- body.background.imageBorder.position.left
- 背景の外側と内側の左の余白(外側が減って内側が増して相殺されるから位置取りは変わらない)
- body.background.imageBorder.position.right
- 背景の外側と内側の右の余白(外側が減って内側が増して相殺されるから位置取りは変わらない)
- widget.padding.top
- メインコンテンツとフッターのウィジェットのタイトルありのコンテンツの内側の上の余白、メインコンテンツのウィジェットのリスト(ラベルと人気の投稿など、ただしアーカイブは反映しない)とアーカイブウィジェットのフラットリストとアーカイブウィジェットの外側の上の逆向きの余白
- date.space
- メインコンテンツ(メインカラムとサイドバー)の内側の上の余白、日付ヘッダーありのコンテンツの外側の上の余白(確認できない)
- post.first.padding.top
- 日付ヘッダーを持つ最初のコンテンツの内側の上の余白(最初以外でも反映する)
Travel/旅行
定義済みのデザイン
- content.imageBorder.top.space
- ヘッダーの上の高さ、ブログのコンテンツ全体の背景の逆向きの縦方向の位置取り
- content.margin
- ブログのコンテンツ全体の内側の上の余白
- content.padding
- コンテンツ全体の内側の余白、メインコンテンツ(メインカラムとサイドバー)の内側の上下の余白、サイドバーのコンテンツと背景の外側のメインカラム寄りの余白
- content.posts.padding
- メインコンテンツ(メインカラムとサイドバー)とメインカラムの内側の上下の余白
一つの変数はそのままでCSSに記載されるだけではなく、他のVariableタグの値に使われると間接的にデザインに影響を与え得る。
Bloggerの公式テーマではブログの各部の余白や枠線に多いけれどもどこかのデザインにVariableタグの値が使われていてもその部分を別のCSSで後から上書きされたりすると反映しなくなる。
コメント