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

些細な日常

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

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

Variableタグの五つの基本項目

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

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

colorのマークアップ例

<Variable name="body.text.color" description="Color" type="color" default="#757575" value="#757575"/>

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

$(body.text.color)

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

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

<data:skin.vars.body.text.color/>

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

<b:eval expr='data:skin.vars.body.text.color'/>

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

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

#757575

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

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

ブログの色を定義する

  • color／色：色名の入力や整数の省略は受け付けない
    • #色コード：色の種類（0～9とa～fの六桁の英数字／二つの同値の繰り返しを一つに纏めた三桁の短縮版も可能）
    • rgb(R値, G値, B値)：RGB値（0～255の三つ）による色の種類
    • rgba(R値, G値, B値, 透明度)：RGB値（0～255の三つ）による色の種類と透明度（0～1）
    • transparent：透明

CSSの色を指定するcolor要素と同様に記載するけれども色名での入力やrgbaの場合の透明度の整数の省略を行うとテンプレートを保存できなくなるから注意したい。

その他にhslとhslaの記載もCSSとは異なり、エラーになってしまうから避けなくてはならない。

colorの追加可能な項目と値

  • color：色名の入力や整数の省略は受け付けない
    • #色コード：色の種類（0～9とa～fの六桁の英数字／二つの同値の繰り返しを一つに纏めた三桁の短縮版も可能）
    • rgb(R値, G値, B値)：RGB値（0～255の三つ）による色の種類
    • rgba(R値, G値, B値, 透明度)：RGB値（0～255の三つ）による色の種類と透明度（0～1）
    • transparent：透明
    • colorのtypeの値を持つVariable
  • red
    • R値（0～255）
    • colorのtypeのR値を持つVariable
  • green
    • G値（0～255）
    • colorのtypeのG値を持つVariable
  • blue
    • BR値（0～255）
    • colorのtypeのB値を持つVariable
  • alpha
    • 透明度（0～1）
    • colorのtypeの透明度を持つVariable
  • hideEditor：Variableの内容のテーマデザイナーへの表示
    • true：表示する
    • false：表示しない

colorとredとgreenとblueとalphaは定義すると当該のVariableのdefaultやvalueの値に$(color)と$(red)と$(green)と$(blue)と$(alpha)で取り込むことができる。

hideEditorはBloggerの「テーマ」の「カスタマイズ」（テーマデザイナー）でVeriableタグの内容を表示するかどうかを切り替えられる。

colorで使用可能なプロパティ

Variableのデータをプロパティ毎に抽出することができる。

red
色のR値
green
色のG値
blue
色のB値
alpha
色の透明度
inverse
反転色
transparent
透明

六つのプロパティがあり、skin内のCSSは$(変数名.プロパティ)、その他のHTMLは<data:skin.vars.変数名.プロパティ/>のようなドット記法（半角ピリオドとプロパティ）でVariableから当て嵌まるデータを取り出せる。

公式テーマのcolorの変数名

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

Contempo／コンテンポ

定義済みのデザイン
keycolor
AndroidのChromeとFirefoxとOperaとWindows Phoneのアドレスバー（反映しない）
body.text.color
ブログ全体の文字、見出しh3（ウィジェットのタイトルなど）、投稿／人気の投稿のスニペットの省略記号
body.background.color
ブログ全体の背景
posts.background.color
フローティングバー、注目の投稿、投稿、人気の投稿、広告のプレビュー、投稿／人気の投稿のスニペットの省略記号の背景
posts.background.color.transparent
投稿／人気の投稿のスニペットの省略記号の背景
body.link.color
埋め込みコメントの削除と返信、フルページ／ポップアップコメントの投稿、プロフィールのボタン（プロフィールにアクセス）とリンク、プロフィールのボタン（プロフィールにアクセス）の訪問済みリンク、アーカイブ／ラベルの伸縮ボタン（もっと見る／一部のみ表示）、コメント範囲の中黒、ブログ全体のリンク、検索ページのラベルとキーワード、コメントへのリンク
body.link.color.red
ページネーションと投稿のスニペットの続きを読むとアーカイブ／ラベルページのメッセージのすべて表示のリンク装飾
body.link.color.green
ページネーションと投稿のスニペットの続きを読むとアーカイブ／ラベルページのメッセージのすべて表示のリンク装飾
body.link.color.blue
ページネーションと投稿のスニペットの続きを読むとアーカイブ／ラベルページのメッセージのすべて表示のリンク装飾
body.link.visited.color
ブログ全体の訪問済みリンク
body.link.hover.color
ブログ全体の選択済みリンク
blog.title.color
ブログ内検索の入力欄の枠線（反映しない）と入力の文字（反映しない）と入力前の文字の影（反映しない）と下線と検索ボタン、ページリストのタイトル、ブログ名、ブログのリンクと訪問済みリンクと選択済みリンク、ブログの説明文
blog.title.color.transparent
ブログ内検索の下の枠線
header.icons.color
ヘッダーのアイコン
tabs.color
ページリストの表示中のページ以外の項目のリンク
tabs.selected.color
ページリストの表示中のページの項目のリンクと下線
tabs.overflow.background.color
ページリストのポップアップ（もっと見る…）の背景
tabs.overflow.color
ページリストのポップアップ（もっと見る…）の表示中のページ以外のリンク
tabs.overflow.selected.color
ページリストのポップアップ（もっと見る…）の表示中のページのリンク
posts.title.color
埋め込みコメントの投稿者の名前とリンク、フルページ／ポップアップコメントの日付のリンク、フローティングバーのブログ内検索の入力の文字と検索ボタンと入力前の文字の影（反映しない）、投稿のタイトルとリンクと選択済みリンクと訪問済みリンク、記事用と縦置きのアドセンスのプレビュー
posts.title.color.red
埋め込みコメントの日付と日付のリンク
posts.title.color.green
埋め込みコメントの日付と日付のリンク
posts.title.color.blue
埋め込みコメントの日付と日付のリンク
posts.text.color
記事／個別ページのブログ内検索の入力欄の下線、記事／個別ページのフローティングバーのブログ内検索の入力欄の下線、フローティングバーのブログ内検索の検索ボタン（反映しない）、フローティングバーのブログ名とリンクと選択済みリンクと訪問済みリンク、アーカイブの投稿数、記事の本文、人気の投稿の全体（反映しない）とタイトルのリンク
posts.byline.color
投稿のフッター（プロフィールの本文）、投稿のヘッダー（著者名と日付）、投稿と注目の投稿のスニペットの著者名と日付
blockquote.color
引用文
posts.icons.color
コメントの投稿者（表示されない）の匿名画像と枠線、投稿とスニペットのアイコン（メールとコメントと共有ボタン）、フローティングバーのアイコン（←と🔍）
search.input.color
ブログ内検索の入力の文字
search.placeholder.color
ブログ内検索の設置の文字
sharing.background.color
共有ボタンのポップアップの背景
sharing.text.color
共有ボタンのポップアップの文字
sharing.icons.color
共有ボタンのポップアップのアイコン
popularposts.background.color
記事下の人気の投稿の背景と省略記号の背景
popularposts.background.color.transparent
記事下の人気の投稿の省略記号の背景
popularposts.byline.color
人気の投稿のヘッダー（著者名と日付／反映しない）
popularposts.title.color
人気の投稿のスニペットのタイトルとリンクと選択済みリンクと訪問済みリンク
popularposts.text.color
人気の投稿のスニペットの本文
popularposts.link.color
人気の投稿のリンクと選択済みリンクと訪問済みリンク
posts.navigation.link.color
ページネーションのリンク（反映しない）
posts.navigation.link.visited.color
ページネーションの訪問済みリンク（反映しない）
posts.navigation.link.hover.color
ページネーションの選択済みリンク（反映しない）
sidebar.backgroundColorTop
サイドバーの上段の背景とプロフィールの本文の省略記号の背景（反映しない）
sidebar.backgroundColorTop.transparent
サイドバーの上段のプロフィールの本文の省略記号の背景（反映しない）
sidebar.backgroundColorTopHD
大画面のサイドバーの上段の背景とプロフィールの本文の省略記号の背景（反映しない）
sidebar.backgroundColorTopHD.transparent
大画面のプロフィールの本文の省略記号の背景（反映しない）
sidebar.backgroundColorBottom
サイドバーとサイドバーの下段とサイドバーの下段の人気の投稿の省略記号の背景（反映しない）
sidebar.backgroundColorBottom.transparent
サイドバーの下段の人気の投稿の省略記号の背景（反映しない）
sidebar.separator.color
サイドバーと人気の投稿のスニペットの区切り線
widget.title.color
サイドバーのウィジェットのタイトル
sidebar.icons.color
サイドバーのアイコン（←、∨）
profile.title.color
プロフィールのタイトル（使用されない）
profile.text.color
プロフィールの本文と省略記号の背景
profile.link.color
プロフィールの名前のリンク
labels.text.color
ラベルウィジェットと記事下のラベルのリンク
labels.background.color
ラベルウィジェットと記事下のラベルの背景と枠線
attribution.text.color
帰属ウィジェットの文字
attribution.link.color
ページネーションのリンク、帰属ウィジェットのリンクと選択済みリンクと訪問済みリンク
attribution.icon.color
帰属ウィジェットのアイコン

Soho／ソーホー

定義済みのデザイン
shadowColor
フローティングバーと共有ボタンのポップアップとサイドバーの影
keycolor
AndroidのChromeとFirefoxとOperaとWindows Phoneのアドレスバー（反映しない）
body.background.color
共有ボタン（反映しない）とブログ全体とホームページのヘッダー画像（表示されない）と投稿のスニペットの省略記号（使用されない）と投稿／人気の投稿のスニペットの画像ありのヘッダー（著者名と日付）の背景
body.background.color.transparent
投稿のスニペットの省略記号（使用されない）の背景
body.title.color
プロフィールの名前とリンク（反映しない）
body.action.color
アーカイブ／ラベルの伸縮ボタン（もっと見ると一部のみ表示）、大画面のブログ内検索の検索ボタン、ページネーション、プロフィールのリンク（プロフィールにアクセス／反映しない）、大画面の記事／個別ページの共有ボタン
body.text.color
プロフィールのアイコンと枠線（使用されない）、プロフィールの本文（反映しない）、共有アイコンと文字（反映しない）、ブログ全体の文字（反映しない）
body.link.color
埋め込みコメントの削除／返信、アーカイブ／ラベルの伸縮ボタンの枠線（使用されない）と文字（反映しない）コメント範囲、ブログ全体のリンク
body.widget.title.color
ウィジェットのタイトル
body.filter.background.color
アーカイブ／ラベルページのメッセージの背景
body.filter.text.color
アーカイブ／ラベルページのメッセージ
body.filter.keyword.color
ラベルページのメッセージのラベル
body.filter.link.color
アーカイブ／ラベルページのリンク（すべて表示）
header.background.color
ヘッダーの背景、ページリストのポップアップの背景
header.title.color
ブログ名
header.text.color
ブログ内検索の枠線（反映しない）と入力欄の文字と入力前の文字の影（反映しない）、ブログの説明文
header.pageList.color
ページリストの現在ページを除く項目と中黒とポップアップの現在ページを除く項目
header.pageList.selected.color
ページリストの現在ページの項目
header.icon.color
ヘッダーのアイコン（≡と🔍）とブログ内検索の下線
post.text.background.color
投稿と人気の投稿のスニペットの画像なしの背景
post.title.color
投稿と注目の投稿のタイトル
post.text.title.color
投稿と人気の投稿のスニペットの画像なしのタイトル
post.header.color
投稿、投稿／人気の投稿のスニペットの画像ありのヘッダー（スニペット以外の共有、著者名、日付）、注目の投稿のヘッダー（著者名、日付）
post.text.header.color
投稿と人気の投稿のスニペットの画像なしのヘッダー（著者名と日付）
post.footer.color
投稿と人気の投稿のスニペットの画像ありのフッター（共有、コメントを投稿）、注目の投稿のフッター（共有、コメント、続きを読む）、記事／個別ページのフッター（メール投稿、プロフィール）
post.text.color
記事／個別ページの本文、注目の投稿のスニペットの省略記号
post.text.footer.color
投稿と人気の投稿のスニペットの画像なしのフッター（共有、コメント）
post.blockquote.color
記事／個別ページの引用文
post.caption.color
投稿画像の説明文
comment.header.color
コメントのヘッダー（日付）
comment.author.color
コメントのアイコンと枠線（使用されない）、コメントの著者名
comment.content.color
コメントの本文
comment.action.color
フルページ／ポップアップコメントの投稿ボタン
sidebar.background.color
サイドバーとサイドバーのスニペットの省略記号の背景
sidebar.background.color.transparent
サイドバーのスニペットの省略記号の背景
sidebar.separator.color
サイドバーの区切り線
sidebar.profile.name.color
サイドバーのプロフィールのアイコンと枠線（使用されない）とサイドバーのプロフィールの名前とリンク
sidebar.profile.description.color
サイドバーのプロフィールの説明文
sidebar.action.color
サイドバーのリンク、サイドバーのプロフィールのリンク（プロフィールにアクセス）
sidebar.widget.title.color
サイドバーのウィジェットのタイトル
sidebar.widget.text.color
サイドバーのウィジェットの文字
sidebar.icon.color
サイドバーのアイコン（←、∨）
sharing.background.color
共有ボタンのポップアップの背景
sharing.text.color
共有ボタンのポップアップの文字
sharing.icon.color
共有ボタンのアイコン
attribution.text.color
帰属ウィジェットの文字
attribution.icon.color
帰属ウィジェットのアイコン（B）

Emporio／エンポリオ

固有の色の導入
white
白：#ffffff
black50
微かな黒：#fafafa
lightGray
薄い灰色：#f7f7f7
lightishGray
薄めの灰色：#efefef
black600
軽い黒：#757575
darkishGray
暗めの灰色：#535353
black800
軽めの黒：#424242
black900
殆ど黒：#212121
offBlack
オフブラック：#1f1f1f
black
黒：#000000
vegeGreen
ベガグリーン：#729c0b
lime
ライム：#f4ff81
blueGray
ブルーグレー：#607d8b
blueGrayDark
暗いブルーグレー：#263238
beige
ベージュ：#eed7c2
beigeDark
暗いベージュ：#da7d5e
beigeBlue
ベージュブルー：#374561
aqua
水色：#18ffff
peach
桃色：#f59b82
peachBright
明るい桃色：#ee582e
peachDark
暗い桃色：#e8937b
transpDark03
殆ど透明の黒：rgba(0, 0, 0, 0.03)
transpDark10
透明に近い黒：rgba(0, 0, 0, 0.1)
transpDark30
相当に透明の黒：rgba(0, 0, 0, 0.3)
transpLight
相当に透明の白：rgba(255, 255, 255, 0.3)
transpBlack
幾らか透明の黒：rgba(0, 0, 0, 0.87)
定義済みのデザイン
keycolor
AndroidのChromeとFirefoxとOperaとWindows Phoneのアドレスバー（反映しない）
body.background.color
ブログの背景
body.text.color
ブログ全体の文字、ウィジェットのタイトル
body.link.color
埋め込みコメントの返信／削除（反映しない）、アーカイブ／ラベルウィジェットの伸縮ボタン（もっと見る／一部のみ表示）の枠線と文字（反映しない）、コメント範囲の文字、アイコン（反映しない）、記事中のアイコン（反映しない）、ハンバーガーメニュー（≡）、ブログ全体のリンク、ラベルの全体の枠線と文字（確認できない）
body.link.visited.color
ブログ全体の訪問済みリンク
body.link.hover.color
ブログ全体の選択済みリンク
body.button.color
アーカイブ／ラベルウィジェットの伸縮ボタン（もっと見る／一部のみ表示）、アーカイブ／ラベルページのメッセージのリンク（反映しない）、ページネーション、ページリストの項目（反映しない）、記事のフッターのリンク（反映しない）
blog.collapsed.title.color
フローティングバーのブログ名
blog.title.color
ブログ名
header.background.color
フローティングバーの背景
header.icons.color
ヘッダーのアイコン（︙）、検索アイコン（🔍）
blog.description.color
ブログの説明文
tabs.text.color
リンクリストの現在ページ以外の項目
tabs.selected.color
リンクリストの現在ページの項目
tabs.background.color
ページリストとポップアップの背景
posts.background.color
投稿のスニペットの背景の省略記号、アドセンスの置き換え（プレビュー）の背景、投稿とスニペットの背景、投稿のスニペットのタイトルの省略記号、投稿のスニペットのラベル（表示されない）、コメントの背景
posts.background.color.transparent
投稿のスニペットの背景の省略記号、投稿のスニペットのタイトルの省略記号
posts.title.color
埋め込みコメントの投稿者、投稿とスニペットのタイトルとリンクと訪問済みリンクと選択済みリンク、アドセンスの置き換え（プレビュー）の文字
posts.title.color.red
コメントの日付
posts.title.color.green
コメントの日付
posts.title.color.blue
コメントの日付
posts.byline.color
投稿とスニペットのヘッダー（著者名と日付）
posts.text.color
記事の本文
posts.link.color
コメントと投稿のリンク、投稿のラベル、スニペットのラベルと多くのラベル（表示されない）、投稿のスニペットの画像ありの背景（確認できない）、投稿とスニペットのフッターのリンク（プロフィールの著者名やフルページ／ポップアップコメントの投稿やコメント数など）
posts.link.color.red
記事のラベルの背景
posts.link.color.green
記事のラベルの背景
posts.link.color.blue
記事のラベルの背景
posts.icons.color
コメントのアイコン（反映しない）、投稿とスニペットのアイコン（コメントとメールと共有ボタン）
postFilter.background.color
アーカイブ／ラベルページのメッセージの背景
postFilter.message.color
アーカイブ／ラベルページのメッセージの文字
postFilter.message.link.color
アーカイブ／ラベルページのメッセージのリンク（すべて表示）
sharing.background.color
投稿とスニペットの共有ボタンのポップアップの背景
sharing.text.color
投稿とスニペットの共有ボタンのポップアップの文字
sharing.icons.color
投稿とスニペットの共有ボタンのポップアップのアイコン
blockquote.color
引用文
picture.caption.text.color
投稿画像の説明文
sidebar.background.color
サイドバーと人気の投稿の省略記号の背景
sidebar.background.color.transparent
人気の投稿の省略記号の背景
sidebar.separator.color
サイドバーとコメントの区切り線
widget.title.color
サイドバーのウィジェットのタイトル、プロフィールウィジェットの名前（反映しない）
sidebar.icons.color
プロフィールのアイコンと枠線（確認できない）、サイドバーのアイコン（∨／×は反映しない）
sidebar.link.color
ラベルウィジェットのラベルの項目、投稿とスニペットのラベル（表示されない）、サイドバーの注目の投稿のスニペットのタイトル（使用されない）、人気の投稿のスニペットのタイトル、サイドバーのリンク
sidebar.link.color.red
ラベルウィジェットのラベルの背景
sidebar.link.color.green
ラベルウィジェットのラベルの背景
sidebar.link.color.blue
ラベルウィジェットのラベルの背景
sidebar.posts.text.color
人気の投稿のスニペットの本文と省略記号
search.text.color
ブログ内検索の入力文字
search.icon.color
ブログ内検索の内側のアイコン（🔍）と検索アイコン（🔍／反映しない）
search.placeholder.color
ブログ内検索の設定文字（このブログを検索）
search.background.color
ブログ名検索の背景
search.background.color.transparent
検索アイコンの背景
attribution.text.color
帰属ウィジェットの文字
attribution.link.color
帰属ウィジェットのリンクと訪問済みリンクと選択済みリンク
attribution.icon.color
帰属ウィジェットのアイコン（B）

Notable／ノータブル

定義済みのデザイン
keycolor
AndroidのChromeとFirefoxとOperaとWindows Phoneのアドレスバー（反映しない）
body.background.color
ページリストのポップアップの背景、ブログ全体の背景、アーカイブ／ラベルページのメッセージの文字とリンク（すべて表示）、投稿と人気の投稿のスニペットの省略記号の背景
body.background.color.transparent
投稿と人気の投稿のスニペットの省略記号の背景
body.text.color
コメントのヘッダー（投稿者名と説明文／フルページ／ポップアップのリンクありの著者名は反映しない）と本文、通常のブログ内検索の下線、ブログ内検索の入力文字（通常のものは反映しない）、ブログ内検索の入力前の影（反映しない）、ブログ全体の文字、ページリストのポップアップの項目（反映しない）、記事／個別ページの本文、投稿のサイドバーの見出し（表示されない）、記事ページのフッターのラベルの説明文、アーカイブウィジェットの項目の投稿数、投稿と人気の投稿のスニペットの省略記号
body.link.color
埋め込みコメントの返信／削除ボタン、アーカイブ／ラベルウィジェットの伸縮ボタン（もっと見る／一部のみ表示）コメント範囲の文字、ブログ全体のリンク、アーカイブ／ラベルページのメッセージの背景
body.link.visited.color
ブログ全体の訪問済みリンク
body.link.hover.color
ブログ全体の選択済みリンク
blog.title.color
ブログ名
heropost.main.background.color
注目の投稿の画像なしのタイトルと画像ありのスニペットと省略記号の背景
heropost.main.background.color.transparent
注目の投稿のスニペットの省略記号の背景
heropost.main.title.color
注目の投稿のタイトル
heropost.main.text.color
注目の投稿の画像ありの本文と省略記号とヘッダー／フッターの文章（反映しない）とリンク（反映しない）
heropost.main.button.color
注目の投稿のヘッダー（著者名と日付）と画像ありの場合のフッター（共有とコメントを投稿と続きを読む）
heropost.main.button.color.red
注目の投稿のフッター（共有とコメントを投稿と続きを読む）のリンクの背景
heropost.main.button.color.green
注目の投稿のフッター（共有とコメントを投稿と続きを読む）のリンクの背景
heropost.main.button.color.blue
注目の投稿のフッター（共有とコメントを投稿と続きを読む）のリンクの背景
heropost.main.link.color
注目の投稿の本文のリンク（使用されない）
heropost.secondary.background.color
注目の投稿の画像なしの本文と省略記号の背景
heropost.secondary.background.color.transparent
注目の投稿の画像なしの省略記号の背景
heropost.secondary.text.color
注目の投稿の画像なしの本文（反映しない）と省略記号
heropost.secondary.button.color
注目の投稿の画像なしのフッター（共有、コメントを投稿、続きを読む）
heropost.secondary.dropcap.color
注目の投稿の画像なしのスニペットの最初の大きな文字
header.background.color
ヘッダーの背景
header.description.color
ブログの説明文、ページリストのタイトル、ブログ内検索の入力文字（フローティングバーのものを除く）
header.pages.color
ページリストの現在ページ以外の項目
header.pages.selected.color
ページリストの現在ページの項目
header.items.color
ヘッダーのアイコン（🔍と≡）と検索ボタン（大画面用）
feed.title.color
投稿と人気の投稿のスニペットのタイトル
feed.subtitle.color
投稿と人気の投稿のスニペットのヘッダー（著者名と日付）
feed.text.color
投稿とサイドバーの人気の投稿の本文
feed.button.color
投稿、投稿と人気の投稿のフッター（共有、コメントを投稿、続きを読む）、投稿の本文のアイコン（メール）、ページネーション
feed.button.color.red
投稿、投稿と人気の投稿のフッター（共有、コメントを投稿、続きを読む）のリンクの背景と訪問済みリンクの背景
feed.button.color.green
投稿、投稿と人気の投稿のフッター（共有、コメントを投稿、続きを読む）のリンクの背景と訪問済みリンクの背景
feed.button.color.blue
投稿、投稿と人気の投稿のフッター（共有、コメントを投稿、コメント、続きを読む）のリンクの背景と訪問済みリンクの背景
sharing.background.color
共有ボタンのポップアップの背景
sharing.text.color
共有ボタンのポップアップの文字
sharing.icons.color
共有ボタンのポップアップのアイコン
item.title.color
記事／個別ページのタイトル
item.title.background.color
記事／個別ページのタイトルの背景と著者画像の背景と上の枠線
item.subtitle.color
コメントの日付、サイドバー以外の人気の投稿のタイトル、コメントのタイトル
item.byline.color
使用されない
item.action.color
コメントのアバターの枠線と色（表示されない）、記事／個別ページの本文の一行目と投稿のサイドバーのラベル（表示されない）とフッターのラベル、コメントの返信（反映しない）
sidebar.backgroundColor
サイドバーの背景、プロフィールウィジェットの本文の省略記号の背景
sidebar.backgroundColor.transparent
プロフィールウィジェットの本文の省略記号の背景
sidebar.icon.color
サイドバーのアイコン（→、∨）、プロフィールのアイコンと枠線（使用されない）
sidebar.separator.color
サイドバーの区切り線（反映しない）
sidebar.widget.title.color
サイドバーのウィジェットのタイトル
sidebar.profile.title.color
プロフィールウィジェットのタイトルと名前
sidebar.profile.text.color
プロフィールウィジェットの場所と本文と省略記号
sidebar.profile.link.color
使用されない
attribution.icon.color
帰属ウィジェットのアイコン（B）

Essential／エッセンシャル

定義済みのデザイン
keycolor
AndroidのChromeとFirefoxとOperaとWindows Phoneのアドレスバー（反映しない）
body.text.color
ブログ全体の文字、h3の見出し（注目の投稿のタイトル、人気の投稿のタイトルなど）、投稿と人気の投稿のスニペットの省略記号
body.background.shadow
ヘッダーの背景
body.background.color
ブログ全体の背景
posts.background.color
フローティングバーの背景、注目の投稿のスニペットの背景、アドセンスの置き換え（プレビュー）の背景、投稿のスニペットの省略記号の背景
posts.background.color.transparent
投稿のスニペットの省略記号の背景
body.link.color
コメントボタン（コメントを投稿）、埋め込みコメントの返信／削除、プロフィールウィジェットのボタン（プロフィールにアクセス）、アーカイブ／ラベルウィジェットの伸縮ボタン（もっと見る／一部のみ表示）、コメント範囲のリンク、ブログ全体のリンク、ラベルページのメッセージのラベル
body.link.color.red
ページネーションと投稿のスニペットの続きを読むとアーカイブラベルページのメッセージのすべて表示のリンク装飾
body.link.color.green
ページネーションと投稿のスニペットの続きを読むとアーカイブラベルページのメッセージのすべて表示のリンク装飾
body.link.color.blue
ページネーションと投稿のスニペットの続きを読むとアーカイブラベルページのメッセージのすべて表示のリンク装飾
body.link.visited.color
ブログ全体の訪問済みリンク
body.link.hover.color
ブログ全体の選択済みリンク
blog.title.color
ブログ内検索の検索ボタンと入力前の設定文字の影（反映しない）と下線、ページリストのタイトル、ブログ名、ブログの説明文
blog.title.color.transparent
ブログ内検索の下の枠線
header.icons.color
ヘッダーのアイコン（≡と🔍）
tabs.color
ページリストの現在ページ以外の項目
tabs.selected.color
ページリストの現在ページの項目
tabs.overflow.background.color
ページリストのポップアップの背景
tabs.overflow.color
ページリストのポップアップの現在ページ以外の項目
tabs.overflow.selected.color
ページリストのポップアップの現在ページの項目
posts.title.color
埋め込みコメントの投稿者、フローティングバーの検索ボタンと入力文字と入力前の文字の影（反映しない）、投稿と投稿のスニペットのタイトル、アドセンスの置き換え（プレビュー）の文字
posts.title.color.red
コメントの日付
posts.title.color.green
コメントの日付
posts.title.color.blue
コメントの日付
posts.text.color
記事／個別ページとフローティングバーのブログ内検索（記事／個別ページでは使用されない）の入力時の下線（表示されない）、フローティングバーのブログ内検索の検索ボタン（反映しない）とブログ名、アーカイブウィジェットの項目の投稿数、投稿と投稿のスニペットの本文、人気の投稿とタイトル（反映しない）
posts.byline.color
投稿と投稿のスニペットのヘッダー（著者名と日付）とフッター（ラベルと場所の接頭辞、プロフィールの本文）
blockquote.color
引用文
posts.icons.color
コメントとプロフィールのアバターと枠線（表示されない）、投稿と投稿のスニペットのアイコン（コメントとメールと共有ボタン）、フローティングバーのアイコン（≡、←、🔍）
posts.boxshadow.color
注目の投稿と投稿と投稿のスニペットの周りの影
search.input.color
ブログ内検索の入力文字（フローティングバー以外）
search.placeholder.color
ブログ内検索の設置文字
sharing.background.color
共有ボタンのポップアップの背景
sharing.text.color
共有ボタンのポップアップの文字
sharing.icons.color
共有ボタンのポップアップのアイコン
popularposts.background.color
記事下の人気の投稿とスニペットの本文の省略記号の背景
popularposts.background.color.transparent
記事下の人気の投稿のスニペットの本文の省略記号の背景
popularposts.byline.color
人気の投稿のヘッダー（著者名）
popularposts.title.color
人気の投稿のスニペットのタイトル
popularposts.text.color
人気の投稿のスニペットの本文
popularposts.link.color
人気の投稿のリンクと訪問済みリンクと選択済みリンク（日付と続きを読むなど）
posts.navigation.link.color
ページネーションのリンク（反映しない）
posts.navigation.link.visited.color
ページネーションの訪問済みリンク（反映しない）
posts.navigation.link.hover.color
ページネーションの選択済みリンク（反映しない）
sidebar.backgroundColorTop
小画面用のサイドバーの上段とプロフィールウィジェットの本文の省略記号の背景
sidebar.backgroundColorTop.transparent
小画面用のプロフィールウィジェットの本文の省略記号の背景
sidebar.backgroundColorTopHD
大画面用のサイドバーの上段とプロフィールウィジェットの本文の省略記号の背景
sidebar.backgroundColorTopHD.transparent
大画面用のプロフィールウィジェットの本文の省略記号の背景
sidebar.backgroundColorBottom
サイドバーの下段とサイドバーの人気の投稿のスニペットの省略記号の背景
sidebar.backgroundColorBottom.transparent
サイドバーの人気の投稿のスニペットの省略記号の背景
sidebar.separator.color
サイドバーのウィジェットと人気の投稿のスニペットの区切り線
widget.title.color
サイドバーのウィジェットのタイトル
sidebar.icons.color
サイドバーのアイコン（←、∨）
profile.title.color
プロフィールのタイトル（表示されない）
profile.link.color
プロフィールウィジェットの名前
labels.text.color
ラベル
labels.background.color
ラベルの枠線と背景
attribution.text.color
帰属ウィジェットの文字
attribution.link.color
ページネーション、帰属ウィジェットのリンクと訪問済みリンクと選択済みリンク
attribution.icon.color
帰属ウィジェットのアイコン（B／表示されない）

Simple／シンプル

定義済みのデザイン
keycolor
AndroidのChromeとFirefoxとOperaとWindows Phoneのアドレスバー（反映しない）
body.text.color
ブログ全体の文字、モバイルの投稿のスニペットの本文
body.background.color
ブログ全体の背景（反映しない）
content.background.color
ブログの内側の背景、タブのリンク付き項目（リストとラベル）の開始側の枠線、ページネーションの背景、モバイルのブログの内側とフッターの背景
header.background.color
ブログのヘッダーの背景、日付ヘッダーの背景（反映しない）
link.color
ブログ全体のリンク、モバイルのページネーションの背景（反映しない）
link.visited.color
ブログ全体の訪問済みリンク
link.hover.color
ブログ全体の選択済みリンク
header.text.color
ブログ名
description.text.color
ブログの説明文
tabs.text.color
タブのリンク付き項目（リストとラベル）
tabs.selected.text.color
タブの現在ページのリンク付き項目（ページリストの個別ページ以外は確認できない）、タブのリンク付きリストの項目の選択済みリンク、モバイルのタブのページリストの表示項目
tabs.background.color
タブのリストとラベルの背景
tabs.selected.background.color
タブの現在ページのリンク付き項目の背景（ページリストの個別ページ以外は確認できない）の背景、タブのリンク付き項目（リストとラベル）の選択済みリンクの背景、モバイルのタブのページリストの表示項目の背景
date.header.color
日付ヘッダーの文字
date.header.background.color
日付ヘッダーの背景
post.footer.text.color
投稿のフッター（著者名やプロフィールの本文など）の文字
post.footer.background.color
投稿のフッター（著者名やプロフィールの本文など）とスレッドコメントの返信部分の背景
post.footer.border.color
投稿のフッターの下線
widget.title.text.color
ウィジェットのタイトル
widget.alternate.text.color
ウィジェットの文字以外（アーカイブの▼など）、コメントの読み込みのリンクと埋め込みコメントのコメントを追加と返信の返信ボタンの上の枠線、コメントの読み込みのリンクの下の枠線
image.background.color
投稿画像と投稿画像の説明文とプロフィールウィジェットの画像と画像ウィジェットの画像とブログリストのサムネイルの背景
image.border.color
投稿画像と投稿画像の説明文とプロフィールウィジェットの画像と画像ウィジェットの画像とブログリストのサムネイルとコメントのアバターの枠線
image.text.color
投稿画像の説明文
body.rule.color
メインコンテンツの上の枠線（反映しない）、サイドバーのメインカラムの側の枠線、コメントの区切り線、サイドバーの表示領域の分割線
tabs.border.color
タブの最初のコンテンツの上の枠線、タブの最初のコンテンツの項目（リストとラベル）の上と右と左の枠線（反映しない）、タブのリストとラベルウィジェットの下の枠線、タブのリンク付き項目の終了側の枠線、モバイルのタブのページリストの上と下とボタン（▼）の開始側の枠線
mobile.button.color
モバイルのページネーション

Dynamic Views／動的ビュー

定義済みのデザイン
keycolor
AndroidのChromeとFirefoxとOperaとWindows Phoneのアドレスバー（反映しない）
page.text.color
投稿とスニペットの本文
body.background.color
ブログ全体の背景
header.background.color
ヘッダーの背景
primary.color
タブの背景
menu.text.color
タブのページリストの項目
link.color
ブログ全体のリンク
link.hover.color
ブログ全体の選択済みリンク
link.visited.color
ブログ全体の訪問済みリンク
blog.title.color
ブログ名
blog.description.color
ブログの説明文
post.title.color
投稿とスニペットのタイトル
ribbon.color
投稿とスニペットの前の日付のリボン
ribbon.hover.color
投稿とスニペットの前の日付のリボンの選択済みリンク

Picture Window／画像ウィンドウ

定義済みのデザイン
keycolor
AndroidのChromeとFirefoxとOperaとWindows Phoneのアドレスバー（反映しない）
body.text.color
ブログ全体の文字、モバイルの投稿のスニペットの本文
body.background.color
ブログ全体の背景（反映しない）
header.background.color
ヘッダーの背景
post.background.color
投稿とスニペットの背景、モバイルのページネーション
link.color
ブログ全体のリンク、モバイルのページネーションの背景
link.visited.color
ブログ全体の訪問済みリンク
link.hover.color
ブログ全体の選択済みリンク、コメントの読み込みのリンクと埋め込みコメントのコメントを追加と返信の返信ボタンの上の枠線、コメントの読み込みのリンクの下の枠線
header.text.color
ヘッダーとブログ名
tabs.text.color
タブのリンク付き項目（リストとラベル）
tabs.selected.text.color
タブの現在ページのリンク付き項目（ページリストの個別ページ以外は確認できない）、タブのリンク付きリストの項目の選択済みリンク、モバイルのタブのページリストの表示項目
tabs.background.color
タブのリストとラベルの背景
tabs.selected.background.color
タブの現在ページのリンク付き項目の背景（ページリストの個別ページ以外は確認できない）、タブのリンク付き項目（リストとラベル）の選択済みリンク、モバイルのタブのページリストの表示項目の背景
tabs.separator.color
タブのリンク付き項目の終了側の枠線、モバイルのタブのページリストのボタン（▼）の開始側の枠線
date.header.color
日付ヘッダーの文字
post.footer.text.color
投稿のヘッダー（使用されない）、投稿のフッター（著者名やプロフィールの本文など）の文字
post.border.color
投稿と投稿のスニペットの枠線
widget.title.text.color
ウィジェットのタイトル
footer.text.color
フッターの文字
footer.widget.title.text.color
フッターのウィジェットのタイトル
footer.link.color
フッターのリンク
footer.link.visited.color
フッターの訪問済みリンク
footer.link.hover.color
フッターの選択済みリンク

Awesome Inc.／オーサムインク

定義済みのデザイン
keycolor
AndroidのChromeとFirefoxとOperaとWindows Phoneのアドレスバー（反映しない）
body.background.color
ブログ全体の背景
body.text.color
ブログ全体の文字、記事／個別ページの本文の番号なしリストの項目とh2の見出し、モバイルの投稿のスニペットの本文
link.color
ブログ全体のリンク、モバイルのページネーションの背景
link.visited.color
ブログ全体の訪問済みリンク
link.hover.color
ブログ全体の選択済みリンク、投稿のスニペットのタイトルの選択済みリンク
header.text.color
ブログ名
header.background.color
ヘッダーの背景
description.text.color
ブログの説明文
tabs.text.color
タブのリンク付き項目（リストとラベル）、モバイルのタブのページリストの表示項目
tabs.selected.text.color
タブの現在ページのリンク付き項目（ページリストの個別ページ以外は確認できない）、タブのリンク付き項目（リストとラベル）の選択済みリンク
tabs.background.color
タブの背景
tabs.selected.background.color
タブの現在ページのリンク付き項目の背景（ページリストの個別ページ以外は確認できない）、タブのリンク付き項目（リストとラベル）の選択済みリンクの背景
tabs.border.color
タブの先頭と末尾の空きの枠線、タブのリンク付き項目（リストとラベル）の上と下と開始側の枠線、タブの最後のリンク付き項目の終了側の枠線、コメントの読み込みのリンクと埋め込みコメントのコメントを追加と返信の返信ボタンの上の枠線、コメントの読み込みのリンクの下の枠線、モバイルのタブのページリストの上と下とボタン（▼）の開始側の枠線
date.text.color
日付ヘッダーの文字
date.border.color
日付ヘッダーの上と左右の枠線（反映しない）
post.title.text.color
投稿とスニペットのタイトル、見出しのh4、コメント数と埋め込みコメントのメッセージ（コメントを投稿）
post.background.color
投稿とスニペットの背景
post.border.color
投稿とスニペットの枠線
post.border.bevel.color
投稿かスニペットの直後の記事間のアドセンスの上の枠線
widget.title.text.color
ウィジェットのタイトル
widget.text.color
サイドバーのウィジェットの文字
widget.alternate.text.color
メインのウィジェットのリストの項目（アーカイブウィジェットの投稿数、人気の投稿のスニペットの本文など）、メインのフラットリストのアーカイブウィジェットの項目（投稿数）、階層のアーカイブウィジェットの矢印
widget.link.color
サイドバーのウィジェットのリンク
widget.link.visited.color
サイドバーのウィジェットの訪問済みリンク
widget.link.hover.color
サイドバーのウィジェットの選択済みリンク
widget.background.color
メインのウィジェットの背景（サイドバーに反映する）
widget.border.color
メインのウィジェットの枠線（サイドバーに反映する）、日付ヘッダーかウィジェットのタイトルの次の領域の上の枠線、メインのウィジェットのリストの項目の上の枠線（人気の投稿のスニペットなど）、メインのフラットリストのアーカイブウィジェットの項目の上の枠線、ページネーションの枠線
widget.border.bevel.color
メインのウィジェットのタイトルとフッターのウィジェットのタイトルとメインのウィジェットのリストの項目（人気の投稿のスニペットなど）とメインのフラットリストのアーカイブウィジェットの項目と日付ヘッダーの下の枠線
widget.outer.background.color
サイドバーの背景、モバイルのサイドバーの背景（反映しない）
image.background.color
投稿画像の背景
image.border.color
投稿画像の枠線
feed.text.color
フィードの文字（登録）
feed.link.color
フィードのリンク（投稿、コメントの投稿）
feed.link.visited.color
フィードの訪問済みリンク（投稿、コメントの投稿）
feed.link.hover.color
フィードの選択済みリンク（投稿、コメントの投稿）
pager.background.color
ページネーションの背景
footer.background.color
フッターの背景、モバイルのページネーションの背景
footer.text.color
フッターの文字
mobile.button.color
モバイルのページネーション

Watermark／ウォーターマーク

定義済みのデザイン
keycolor
AndroidのChromeとFirefoxとOperaとWindows Phoneのアドレスバー（反映しない）
body.text.color
ブログ全体の文字、モバイルの投稿のスニペットの本文
body.background.color
ブログ全体の背景
footer.background.color
フッターの背景
link.color
ブログ全体のリンク、モバイルのページネーション
link.visited.color
ブログ全体の訪問済みリンク
link.hover.color
ブログ全体の選択済みリンク
header.text.color
ブログ名
description.text.color
ブログの説明文
tabs.text.color
タブのリンク付き項目（リストとラベル）
tabs.selected.text.color
タブの現在ページのリンク付き項目（ページリストの個別ページ以外は確認できない）、タブのリンク付き項目（リストとラベル）の選択済みリンク、モバイルのタブのページリストの表示項目
tabs.background.color
タブのページリストとリンクリストとラベルの背景
tabs.separator.color
タブのリンク付き項目の終了側の枠線、タブのリンク付きの最初の項目の開始側の枠線、モバイルのタブのページリストのボタン（▼）の開始側の枠線
date.text.color
日付ヘッダーの文字、モバイルの日付ヘッダーの文字（投稿のスニペットは反映しない）
post.background.color
投稿とスニペットの背景、モバイルの投稿のスニペットの日付ヘッダーとページネーションとタブのページリストの背景
post.border.color
投稿とスニペットの枠線
post.footer.text.color
投稿とスニペットのヘッダー（使用されない）、投稿とスニペットのフッター（著者名やプロフィールの本文など）の文字
widget.title.text.color
見出しのh2（ウィジェットのタイトルを含む）
widget.alternate.text.color
投稿とスニペットのフッターの上の枠線、フルページとポップアップのコメントの投稿者の上の枠線、コメントの読み込みのリンクと埋め込みコメントのコメントを追加と返信の返信ボタンの上の枠線、コメントの読み込みのリンクの下の枠線、ウィジェットのリストの項目（人気の投稿のスニペットなど）とフラットリストのアーカイブウィジェットの項目の上の枠線、階層のアーカイブウィジェットの矢印
footer.text.color
フッターの文字
footer.widget.title.text.color
フッターのウィジェットのタイトル
footer.link.color
フッターのリンク
footer.link.visited.color
フッターの訪問済みリンク
footer.link.hover.color
フッターの選択済みリンク

Ethereal／エスィリアル

定義済みのデザイン
keycolor
AndroidのChromeとFirefoxとOperaとWindows Phoneのアドレスバー（反映しない）
body.text.color
ブログ全体の文字、記事／個別ページの本文のリスト
body.background.color
ブログ全体の背景（反映しない）
content.background.color
ブログ全体の背景（反映しない）、コメントの読み込みの背景、埋め込みコメントの返信の背景
body.border.color
ブログ全体の枠線
link.color
ブログ全体のリンク
link.visited.color
ブログ全体の訪問済みリンク
link.hover.color
ブログ全体と投稿のスニペットのタイトルの選択済みリンク
header.text.color
ブログ名
description.text.color
ブログの説明文
tabs.selected.text.color
タブの現在ページのリンク付き項目（ページリストの個別ページ以外は確認できない）、タブのリンク付き項目（リストとラベル）の選択済みリンク、モバイルのページネーションのリンクと選択済みリンク、モバイルのタブのページリストの表示項目とボタン（▼）の開始側の枠線
tabs.text.color
タブのリンク付き項目（リストとラベル）
tabs.selected.background.color
タブの現在ページのリンク付き項目の背景（ページリストの個別ページ以外は確認できない）、タブのリンク付き項目（リストとラベル）の選択済みリンクの背景、モバイルのページネーションの背景、モバイルのタブのページリストの背景
tabs.background.color
タブのリンク付き項目（リストとラベル）の背景
tabs.border.bevel.color
ページリストの下の枠線
post.title.text.color
投稿とスニペットのタイトル、見出しのh4
widget.title.text.color
見出しのh2（ウィジェットのタイトルと日付ヘッダーを含む）
widget.title.border.bevel.color
サイドバーのウィジェットのタイトルの下の枠線、日付ヘッダーの下の枠線、コメントの読み込みのリンクの上下の枠線、埋め込みコメントのコメントを追加と返信の返信ボタンの上の枠線
widget.alternate.text.color
階層のアーカイブウィジェットの矢印
widget.border.bevel.color
ウィジェットの下の枠線、記事間のアドセンスの直前の投稿かスニペットの下の枠線

Travel／旅行

定義済みのデザイン
keycolor
AndroidのChromeとFirefoxとOperaとWindows Phoneのアドレスバー（反映しない）
body.text.color
ブログ全体の文字、モバイルの投稿のスニペットの本文
body.background.color
ブログ全体の背景（反映しない）
content.background.color
メインカラムの背景
link.color
ブログ全体のリンク、フッターのウィジェットのリンクと選択済みリンク、モバイルのページネーションの背景
link.visited.color
ブログ全体の訪問済みリンク、フッターのウィジェットの訪問済みリンク
link.hover.color
ブログ全体の選択済みリンク
header.text.color
ブログ名
description.text.color
使用されない
tabs.text.color
タブのリンク付き項目（リストとラベル）
tabs.selected.text.color
タブの現在ページのリンク付き項目（ページリストの個別ページ以外は確認できない）、タブのリンク付き項目の選択済みリンク、モバイルのタブのページリストの表示項目とボタン（▼）の開始側の枠線
tabs.background.color
タブのリストとラベルの背景
tabs.selected.background.color
タブの現在ページのリンク付き項目の背景、タブのリンク付き項目の選択済みリンクの背景、モバイルのタブのページリストの背景
date.text.color
日付ヘッダー
post.title.text.color
投稿のスニペットのタイトル、コメントのタイトルとリンク（投稿者、日付、返信、削除、コメントを投稿をふくむ）、コメントの読み込みのリンクの上下の枠線、埋め込みコメントのコメントを追加と返信の返信ボタンの上の枠線、モバイルの投稿のスニペットのリンク（反映しない）
post.background.color
投稿とスニペットの背景、コメントの返信部分の背景
widget.title.text.color
見出しのh2（ウィジェットのタイトルを含む）
widget.text.color
フッターとサイドバーの文字
widget.link.color
サイドバーのリンクと選択済みリンク、モバイルのフッターのリンク
widget.link.visited.color
サイドバーの訪問済みリンク、モバイルのフッターの訪問済みリンク
widget.alternate.text.color
階層のアーカイブウィジェットの矢印
widget.outer.background.color
サイドバーの背景
widget.border.bevel.color
サイドバーのウィジェットの下の枠線
mobile.button.color
モバイルのページネーションのリンクと訪問済みリンク

一つの変数はそのままでCSSに記載されるだけではなく、他のVariableタグの値に使われると間接的にデザインに影響を与え得る。

Bloggerの公式テーマではブログ全体の文章の指定に多いけれどもどこかのデザインにVariableタグの値が使われていてもその部分を別のCSSで後から上書きされたりすると反映しなくなる。

参考サイト

コメント