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

些細な日常

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

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/コンテンポ

定義済みのデザイン
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で後から上書きされたりすると反映しなくなる。

参考サイト

コメント