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

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の基本項目で使用可能な値

ブログの背景を定義する

  1. color/色:色名での入力は受け付けない
    • #色コード:色の種類(六桁の英数字/三桁へ短縮可能)
    • 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タグが使われている。

参考:Variables d'habillage - Les arrière-plans [background]

コメント

些細な日常の人気の投稿

PlayストアでAndroidアプリのダウンロードが非常に遅い場合の打開策

イメージ

偶に始まらなかったり、途中で止まったりもしていたPlayストアでのAndroidアプリのダウンロードは安定して来ていると思うし、喜ばしいかぎりの昨今だけれども速度自体はいつも同じではないから何だろうと訝られる。 余りに遅過ぎるわけではないし、お手上げとまでは行かないにせよ、非...

飽和脂肪酸の多いココナッツオイルの過剰摂取の危険性とその他の健康上の利点

イメージ

パンや菓子や揚げ物などに安く使用される マーガリンやショートニングなどのトランス脂肪酸が動脈硬化を引き起こすと世界的に避けられる 一方で、代わりに新しく使用される他の食用油によって必ずしも健康的な食生活が確保されるとはかぎらない状況も出て来てしまっているのが厄介なんだ。 脂...

早川愛の高校野球の夏の甲子園の大会歌の栄冠は君に輝くの独唱のソプラノの美声

イメージ

高校野球の夏の甲子園の 作新学院と今井達也の優勝の記事 を改善するために新しく引用できる動画はないかとYouTubeで探していたら2016年の地方予選の栃木大会だから当の作新学院と今井達也も参加して奇しくも予選の勝ち抜けと夏の甲子園での全国制覇への好影響を受けたかも知れなかった...