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

些細な日常

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

Bloggerの独自タグのVariableのurlのtypeについてどのように使われるかの内容と公式テーマのソースコードでurlの内容の定義と呼び出しに用いられる変数名を取り上げる。

Variableタグの五つの基本項目

  • name/変数名(半角の英数字とピリオドのみ)
  • description/説明(指定なし)
  • type/種別(決められたもの)
  • default/初期値(type毎に指定あり)
  • value/現在値(type毎に指定あり)

urlのtypeではvalue以外が省略できない必須項目となっている。

urlのマークアップ例

<Variable name="tabs.background.gradient" description="Tabs Background Gradient" type="url" default="none" value="url(https://resources.blogblog.com/blogblog/data/1kt/awesomeinc/tabs_gradient_light.png)"/>

URLの「https:」などは省略して「//」から記載しても構わない。

skin内のCSSで呼び出すならば

$(tabs.background.gradient)

半角ドル($)に変数名を半角括弧(())に入れて続ける。

その他のHTMLで呼び出すならば

<data:skin.vars.tabs_background_gradient/>

独自タグのdataを使って半角コロン(:)から「var.skin」に半角ピリオド(.)を挟んで変数名を続けるけれども変数名が半角ピリオドを含む場合は半角アンダースコア(_)に置き換えなくてはならない。

<b:eval expr='data:skin.vars.tabs_background_gradient'/>

dataは単体で別の独自タグに組み込んで使うこともできる。どんな場合でも変数名の扱いはタグのときと同じになる。

テンプレートへの出力結果の例

url(https://resources.blogblog.com/blogblog/data/1kt/awesomeinc/tabs_gradient_light.png)

urlの基本項目で使用可能な値

Variableタグのdefaultとvalueに何が入力できるか。

サイトアドレスを定義する

  • サイトアドレス
    • URL
    • url(URL)

二つの書き方が可能だけれども呼び出した際のマークアップは同じで、url(サイトアドレス)という出力結果になる。

主に画像URLの書き出しに使われるけれどもその他のURLを入力してもエラーにはならない。

公式テーマのurlの変数名

BloggerのテンプレートのVariableタグのvalueなどを書き換えると変数名で呼び出される部分のデザインを変更できる。

Simple/シンプル

定義済みのデザイン
body.background.gradient.cap
全体の裏の背景画像(不使用)
body.background.gradient.tile
ヘッダーの裏の背景画像(不使用)
header.background.gradient
ヘッダーの背景画像(不使用)
tabs.background.gradient
タブのリストの背景画像(不使用)

Picture Window/画像ウィンドウ

定義済みのデザイン
header.background.gradient
ヘッダーの背景画像(不使用)
tabs.background.gradient
タブのリストの背景画像(不使用)
tab.selected.background.gradient
タブのリストの選択と選択済みのリンク、モバイルのタブのページリストの背景画像(不使用)

Awesome Inc./オーサムインク

定義済みのデザイン
body.background.gradient.cap
ヘッダーの裏の投稿スニペットにかかる下の方の背景画像(不使用)
tabs.background.gradient
タブのリスト、タブのリストのリンクの選択と選択済み、モバイルのページネーションの背景画像(不使用)
header.background.gradient
ヘッダーの背景画像(不使用)
widget.outer.background.gradient
サイドバーの裏、モバイルのページネーションと下段ウィジェットの間の左右の領域の背景画像(不使用)
footer.background.gradient
フッター、モバイルのページネーションの裏の背景画像(不使用)

Watermark/ウォーターマーク

定義済みのデザイン
tabs.background.inner
タブのリストの背景画像(一枚目/不使用)
tabs.background.outer
タブのリストとラベルの背景画像(二枚目/不使用)
main.cap.image
確認できない(不使用)
main.cap.overlay
右上に重なる(不使用)
post.background.url
投稿、モバイルのスニペット、モバイルのページネーション、モバイルのタブのページリストの背景画像(極小点)

EtheReal/エスィリアル

定義済みのデザイン
body.background.gradient
全体の裏の背景画像(不使用)
body.background.imageBorder
ブログ全体の左と右の画像
header.background.gradient
CSSへの記載なし(不使用)
content.background.gradient
メインカラムとサイドバーとコメント、コメントの読み込み、返信コメントの背景画像

Travel/旅行

定義済みのデザイン
post.background.url
メインカラムの背景画像(不使用)
content.imageBorder.top
CSSへの記載なし(不使用)
tabs.background.gradient
タブのリストとラベルの背景画像(極小点)
tabs.selected.background.gradient
タブの選択と選択済みのリンク、モバイルのタブのページリストの背景画像(極小点)
widget.outer.background.gradient
サイドバーの左と右の背景画像(極小点)
footer.background.gradient
フッターの背景画像(不使用)

記載されていても殆どが不使用か極小点で、ブログのデザインに影響しないけど、しかし一部のテーマでは装飾用に使われている。

参考サイト

コメント

最近の投稿

日付: 

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

イメージ

人気の投稿

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

イメージ

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

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

イメージ

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

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

イメージ

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