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

些細な日常

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

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に何が入力できるか。

ブログの背景を定義する

  1. color/色:色名の入力や整数の省略は受け付けない
    • #色コード:色の種類(0~9とa~fの六桁の英数字/二つの同値の繰り返しを一つに纏めた三桁の短縮版も可能)
    • rgb(R値, G値, B値):RGB値(0~255の三つ)による色の種類
    • rgba(R値, G値, B値, 透明度):RGB値(0~255の三つ)による色の種類と透明度(0~1)
    • transparent:透明
  2. image/画像URL
    • url(画像URL):画像あり
    • none:画像なし
  3. repeat/繰り返し(一つまでしか入力しない)
    • repeat:繰り返す
    • no-repeat:繰り返さない
  4. attachment/取り付け(一つまでしか入力しない)
    • scroll:画面と一緒に移動
    • fixed:画面の一部に固定
  5. position/垂直方向の位置(水平方向との値二つ構文)
    • top:上
    • center:中
    • bottom:下
  6. 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タグが使われている。

参考サイト

コメント

最近の投稿

日付: 

あわだまで取るビタミンCと重曹が良い感じ

イメージ

人気の投稿

宜保愛子は本物の霊能力者だと考えられる三つの真実

イメージ

昭和から平成にかけてテレビや雑誌で何度も大きく取り上げられて物凄く活躍した霊能力者の 宜保愛子 がいた。何気なく昔のテレビ番組を観ていたら霊視は嘘だったと思えない内容で、本当にびっくりした。昔、そんなに引き付けられて観ていたわけではないし、改めて霊能力が本当かどうかを確かめようと...

伊良部秀輝が自殺した原因はミッドライフクライシスによる鬱と飲酒だと考える

イメージ

プロ野球選手の 伊良部秀輝 が自殺したと知ってショックを受けたことがあった。もう十年以上前になる。2011年の夏、享年四十二と早過ぎたのに加えて大好きな投手の一人だったので、とても残念に感じた。 目次 伊良部秀輝が大好きだった記憶 負けても自分のスタイルを貫き通した 野球への...

平田監督の白井球審の誤審への抗議はパワハラへの強力な対処法に他ならない

イメージ

日本プロ野球で 佐々木朗希が完全試合を実現して 次の試合も八回まで無安打と無失点の状況で、次の試合はどうかと注目した4月24日の対オリックスバファローズ戦は初回の先頭打者の初球にヒットを打たれて五回に二失点を喫して連続の無安打と無失点が両方とも途絶えてしまった。 しかし予想外...