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

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

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

  • サイトアドレス
    • 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
フッターの背景画像(不使用)

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

参考:Variables d'habillage - Les URLs [url]

コメント

些細な日常の人気の投稿

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

イメージ

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

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

イメージ

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

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

イメージ

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