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

些細な日常

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

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

Variableタグの五つの基本項目

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

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

fontのマークアップ例

<Variable name="body.text.font" description="Font" type="font" default="$(robotoNormal15)" value="15px Roboto, sans-serif"/>

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

$(body.text.font)

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

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

<data:skin.vars.body_text_font/>

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

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

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

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

15px Roboto, sans-serif

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

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

ブログのフォントを定義する

  1. style／様式：キーワードのみ
    • italic：筆記体
    • obligation：斜体
    • normally：標準
  2. weight／太さ：キーワードか数値
    • bold：太い（700）
    • lighter：親要素よりも細い
    • bolder：親要素よりも太い
    • normal：標準（400）
    • 数値：個別の太さ（1～1000）
  3. size／大きさ：キーワードか単位
    • xx-small：物凄く小さい
    • x-small：非常に小さい
    • small：小さい
    • medium：普通（利用者の規定）
    • large：大きい
    • x-large：非常に大きい
    • xx-large：物凄く大きい
    • smaller：親要素よりも小さく
    • larger：親要素よりも大きい
    • 単位：個別の大きさ（px、em、%などを付けた数値）
  4. family／種類：名前かキーワード
    • 名前：個別の種類（Arial、Courier、Georgiaなど）
    • serif：髭付き
    • sans-serif：髭なし
    • monospace：等幅
    • cursive：筆記体
    • fantasy：装飾
    • system-ui：利用者の規定
    • ui-serif：利用者の規定の髭付き
    • ui-sans-serif：利用者の規定の髭なし
    • ui-monospace：利用者の規定の等幅
    • ui-rounded：利用者の規定の円形状
    • math：数学向け
    • emoji：絵文字向け
    • fangsong：中国のSongとKai／髭付き風と手書き風の中間

※各要素の値は使用できると確認できたもので、他にも使用できる値がないとはかぎらない。

CSSの書体を指定するfont要素から四つの値を取ることができる。

記載する順番は概ね決まっていてstyleとweight互いに入れ換えても大丈夫で、その他はエラーにはならないけれども変えるとブログに反映しない。

familyだけは複数の値を使うことができて二語以上で半角スペース（ ）があるものは半角二重引用符（""）で括ってそれぞれは半角，（,）で区切る。ブラウザで使用可能かどうかが判断されて先に記載された方が優先的にブログの表示に選び取られる。

fontの追加可能な項目と値

  • size：フォントの大きさ
    • 単位：個別の大きさ（px、em、%などを付けた数値）
  • family：種類：名前かキーワード
    • 名前：個別の種類（Arial、Courier、Georgiaなど）
    • serif：髭付き
    • sans-serif：髭なし
    • monospace：等幅
    • cursive：筆記体
    • fantasy：装飾
    • system-ui：利用者の規定
    • ui-serif：利用者の規定の髭付き
    • ui-sans-serif：利用者の規定の髭なし
    • ui-monospace：利用者の規定の等幅
    • ui-rounded：利用者の規定の円形状
    • math：数学向け
    • emoji：絵文字向け
    • fangsong：中国のSongとKai／髭付き風と手書き風の中間
  • hideEditor：Variableの内容のテーマデザイナーへの表示
    • true：表示する
    • false：表示しない

sizeとfamilyは定義すると当該のVariableのdefaultやvalueの値に$(size)と$(family)で取り込むことができる。

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

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

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

size
フォントの大きさ
family
フォントの種類

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

公式テーマのfontの変数名

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

Contempo／コンテンポ

フォントの種類の導入
damionRegular36
Demianの400の36pxのフォント
damionRegular62
Damionの400の62pxのフォント
playfairDisplayBlack28
Playfair Displayの900の28pxのフォント
playfairDisplayBlack36
Playfair Displayの900の36pxのフォント
playfairDisplayBlack44
Playfair Displayの900の44pxのフォント
robotoNormal15
Roboの15pxのフォント
robotoNormal16
Roboの16pxのフォント
robotoLightItalic15
Roboの細い筆記体の15pxのフォント
robotoBold22
Robotの太い22pxのフォント
robotoBold30
Robotの太い30pxのフォント
robotoBold45
Robotの太い45pxのフォント
定義済みのデザイン
body.text.font
ブログ全体の文章
body.text.font.size
ページリストの最大の高さと項目の行間
body.text.font.family
購読の設置／入力と登録ボタン（メール通知を受け取る）
blog.title.font
ブログ名
blog.title.font.size
小画面用のブログ名のサイズと行間
tabs.font
タブの文字
posts.title.font
記事のタイトル
posts.stream.title.font
スニペットのタイトル
posts.text.font
記事の本文
blockquote.font
引用文（反映しない）
search.input.font
ブログ検索の入力文字

Soho／ソーホー

フォントの種類の導入
garamond12
EB Garamondの400の12pxのフォント
garamond14
EB Garamondの400の14pxのフォント
garamond16
EB Garamondの400の16pxのフォント
garamond18
EB Garamondの400の18pxのフォント
garamond20
EB Garamondの400の20pxのフォント
garamond24
EB Garamondの400の24pxのフォント
garamond36
EB Garamondの400の36pxのフォント
lato12
Latoの400の12pxのフォント
lato14
Latoの400の14pxのフォント
lato16
Latoの400の16pxのフォント
lato20
Latoの400の20pxのフォント
lato24
Latoの400の24pxのフォント
latoBold12
Latoの700の12pxのフォント
latoBold14
Latoの700の14pxのフォント
latoBold16
Latoの700の16pxのフォント
latoBold24
Latoの700の24pxのフォント
latoBold28
Latoの700の28pxのフォント
latoLight18
Latoの300の18pxのフォント
latoLight20
Latoの300の20pxのフォント
latoLight24
Latoの300の24pxのフォント
latoLight36
Latoの300の36pxのフォント
lora14
Loraの400の14pxのフォント
lora16
Loraの400の16pxのフォント
montserrat12
Montserratの400の12pxのフォント
montserrat14
Montserratの400の14pxのフォント
montserrat16
Montserratの400の16pxのフォント
montserrat24
Montserratの400の24pxのフォント
montserratBold12
Montserratの700の12pxのフォント
montserratBold14
Montserratの700の14pxのフォント
定義済みのデザイン
body.title.font.small
小画面用のプロフィールの名前（反映しない）
body.title.font.large
大画面用のプロフィールの名前（反映しない）
body.action.font.small
小画面用のアーカイブ／ラベルの伸縮ボタン（もっと見る」と「一部のみ表示）と検索ボタンと購読ボタンと登録ボタン（メール通知を受け取る）とページネーションとプロフィールの名前のリンク（反映しない）とラベル（反映しない）の文字
body.action.font.large
大画面用の購読ボタンと購読メッセージとページネーションと検索ボタンと投稿／個別のサイドバーとプロフィールの名前のリンク（反映しない）の文字
body.text.font
ブログ全体とプロフィールウィジェットの文章
body.text.font.family
購読の設置／入力と登録ボタン（メール通知を受け取る）の文字
body.widget.title.font.small
小画面用のウィジェットのタイトルと購読のメッセージ（このブログに登録）と設置／入力欄の文字
body.widget.title.font.large
大画面用のウィジェットのタイトルと購読のメッセージ（このブログに登録）と設置／入力欄の文字
body.filter.text.font.small
小画面用のアーカイブ／検索ページの説明文
body.filter.text.font.large
大画面用のアーカイブ／検索ページの説明文
body.filter.keyword.font.small
小画面用の検索ページのキーワード
body.filter.keyword.font.large
大画面用の検索ページのキーワード
body.filter.link.font.small
小画面用のアーカイブ／検索ページのホーム（すべて表示）のリンクの文字
body.filter.link.font.large
大画面用のアーカイブ／検索ページのホーム（すべて表示）のリンクの文字
header.title.font.small
小画面用のブログ名
header.title.font.large
大画面用のブログ名
header.text.font
ブログの説明文
header.pageList.font
ページリストの項目（現在ページに当たる場合を含まない）の文字
header.pageList.font.size
ページリストの最大の高さと項目の行間
header.pageList.selected.font
ページリストの現在ページに当たる場合の項目の文字
post.title.font.small
小画面用の記事とスニペットのタイトル
post.title.font.large
大画面用の記事とスニペットのタイトル
post.header.font
記事とスニペットのヘッダー（著者名と日付）の文字
post.footer.font
記事とスニペットのフッター（ラベルや場所など）の文字
post.text.font.small
小画面用の記事／個別ページの本文と投稿のスニペット（表示されない）の本文
post.text.font.small.size
小画面用の記事／個別ページの本文と投稿のスニペット（表示されない）のの行間
post.text.font.large
大画面用の記事／個別ページと投稿のスニペット（表示されない）の本文
post.text.font.large.size
大画面用の記事／個別ページと投稿のスニペット（表示されない）の行間
post.blockquote.font.small
小画面用の記事／個別ページの引用文
post.blockquote.font.large
大画面用の記事／個別ページの引用文
post.caption.font
記事／個別ページのの画像の説明文
comment.header.font
コメントのヘッダー（日付）の文字
comment.author.font
コメントの投稿者名
comment.content.font
コメントの本文
comment.action.font
コメントの編集ボタンの文字
sidebar.profile.name.font
サイドバーのプロフィールの名前
sidebar.profile.description.font
サイドバーのプロフィールの説明文
sidebar.action.font
サイドバーのプロフィールのリンク（プロフィールにアクセス）の文字
sidebar.widget.title.font
サイドバーのウィジェットのタイトル
sidebar.widget.text.font
サイドバーのウィジェットの文章
search.input.font
ブログ内検索の入力欄の文字
sharing.text.font
共有ボタンの文字（文字サイズは反映しない）
attribution.text.font
帰属ウィジェットの文字

Emporio／エンポリオ

フォントの種類の導入
generalFont
Ubuntuの400の16pxのフォント
generalFontLato
Latoの400の16pxのフォント
blogTitleFont
Ubuntuの500の62pxのフォント
blogTitleFontLato
Latoの700の62pxのフォント
blogTitleFontMerriweather
Merriweather700の62pxのフォント
blogCollapsedTitleFont
Ubuntuの500の36pxのフォント
blogCollapsedTitleFontLato
Latoの700の36pxのフォント
blogCollapsedTitleFontMerriweather
Merriweatherの700の36pxのフォント
blogDescriptionFont
Merriweatherの筆記体の300の14pxのフォント
headerItemFont
Ubuntuの700の12pxのフォント
headerItemFontLato
Latoの700の12pxのフォント
textButtonFont
Ubuntuの500の12pxのフォント
textButtonFontLato
Latoの500の12pxのフォント
searchFont
Merriweatherの400の16pxのフォント
searchPlaceholderFont
Merriweatherの筆記体400の15pxのフォント
sidebarTitleFont
Ubuntuの500の16pxのフォント
sidebarTitleFontLato
Latoの500の16pxのフォント
sidebarTitleFontMerriweather
Merriweatherの700の16pxのフォント
sidebarLinkFont
Merriweatherの400の14pxのフォント
sidebarPostTitleFont
Ubuntuの500の14pxのフォント
sidebarPostTitleFontLato
Latoの500の14pxのフォント
sidebarPostFont
Merriweatherの筆記体の400の14pxのフォント
titleFont
Ubuntuの500の24pxのフォント
titleFontLato
Latoの900の24pxのフォント
titleFontMerriweather
Merriweatherの900の24pxのフォント
bylineFont
Merriweatherの400の12pxのフォント
postFilterFont
Merriweatherの400の18pxのフォント
labelsFont
Ubuntuの500の10.5pxのフォント
labelsFontLato
Latoの500の10pxのフォント
sharingFont
Ubuntuの400の14pxのフォント
sharingFontLato
Latoの400の14pxのフォント
bodyFont
Merriweatherの400の16pxのフォント
bodyFontSmall
Merriweatherの400の14pxのフォント
定義済みのデザイン
body.text.font
ブログ全体とプロフィールウィジェットの文章
body.text.font.size
ウィジェットのタイトルのサイズと行間と外側の上下の余白
body.text.font.family
購読の設置／入力と登録ボタン（メール通知を受け取る）の文字
body.button.font
アーカイブ／ラベルの伸縮ボタン（もっと見ると一部のみ表示）とアーカイブ／検索のホーム（すべて表示）のリンクとページネーションとページリストの項目（反映しない）と記事／個別ページのフッター（ラベルや場所など）の文字
blog.title.font
ブログ名
blog.collapsed.title.font
小画面用の折れ曲がるブログ名
blog.description.font
ヘッダーの説明文
tabs.text.font
購読ボタンと説明文とページリストの項目の文字
tabs.text.font.size
ページリストの最大の高さ
posts.title.font
投稿と投稿のスニペットのタイトル（人気の投稿では反映せず、サイドバーの注目の投稿は使用されない）と投稿のスニペットのコメント数
posts.byline.font
投稿のヘッダー（著者名と日付）の文字の
posts.text.font
投稿／個別ページと人気の投稿のスニペットの本文（人気の投稿では反映しない）
posts.snippet.text.font
投稿のスニペットの本文（使用されないか反映しない）
postFilter.message.font
アーカイブ／検索ページの説明文
labels.font
ラベル（記事のフッターでは反映しない）の文字
sharing.text.font
共有ボタン（使用されない）の文字
blockquote.font
大画面用の記事／個別ページの引用文
picture.caption.font
記事／個別ページの画像の説明文
widget.title.font
ウィジェットのタイトルとプロフィールの名前
sidebar.link.font
サイドバーのリンク（プロフィールの名前やラベルなどを除く）の文字
sidebar.posts.title.font
サイドバーの注目の投稿と人気の投稿のスニペットのタイトル（注目の投稿は使用されてない）
sidebar.posts.text.font
人気の投稿のスニペットの本文
sidebar.posts.text.font.size
人気の投稿のスニペットのタイトルの行間
search.font
ブログ内検索の入力欄の文字
search.placeholder.font
ブログ内検索の設置欄の文字

Notable／ノータブル

フォントの種類の導入
loraNormal20
Loraの400の20pxのフォント
openSansNormal14
Open Sansの400の14pxのフォント
openSansNormal16
Open Sansの400の16pxのフォント
openSansNormal20
Open Sansの400の20pxのフォント
openSansSemibold14
Open Sansの600の14pxのフォント
openSansSemiboldItalic36
Open Sansの筆記体の600の36pxのフォント
openSansSemiboldItalic44
Open Sansの600の44pxのフォント
openSansSemibold16
Open Sansの600の16pxのフォント
openSansSemibold48
Open Sansの600の48pxのフォント
openSansBold16
Open Sansの700の16pxのフォント
openSansBold24
Open Sansの700の24pxのフォント
openSansBold36
Open Sansの700の36pxのフォント
openSansExtraboldItalic24
Open Sansの800の24pxのフォント
openSansExtraboldItalic40
Open Sansの筆記体の800の40pxのフォント
openSansExtraboldItalic48
Open Sansの筆記体の800の48pxのフォント
ebGaramondNormal14
EB Garamondの400の14pxのフォント
ebGaramondNormal24
EB Garamondの400の24pxのフォント
ebGaramondNormal44
EB Garamondの400の44pxのフォント
ebGaramondNormal48
EB Garamondの400の48pxのフォント
ebGaramondSemiboldItalic44
EB Garamondの筆記体の600の48pxのフォント
latoNormal14
Latoの400の14pxのフォント
latoNormal16
Latoの400の16pxのフォント
latoNormal20
Latoの400の20pxのフォント
latoBold14
Latoの700の14pxのフォント
latoBold16
Latoの700の16pxのフォント
latoBold24
Latoの700の24pxのフォント
latoBold36
Latoの700の36pxのフォント
latoBold48
Latoの700の48pxのフォント
latoBoldItalic36
Latoの筆記体の700の36pxのフォント
latoExtrabold24
Latoの900の24pxのフォント
dancingScriptNormal36
Dancing scriptの400の36pxのフォント
dancingScriptNormal44
Dancing Scriptの400の44pxのフォント
dancingScriptNormal48
Dancing Scriptの400の48pxのフォント
定義済みのデザイン
body.text.font
ブログ全体と記事と投稿のスニペット（反映しない）の本文
body.text.font.size
記事／個別ページの本文の最初の文字のサイズと大画面用のスニペットの最大の高さと行間と投稿のスニペットの省略（…）のところの高さと画像なしの注目の投稿の最初の文字のサイズと小画面用のブログ全体と記事／個別ページの本文と最初の文字のサイズと記事／個別ページの本文と最初の文字の行間
body.text.font.family
購読の設置／入力と登録ボタン（メール通知を受け取る）の文字
blog.title.font
ブログ名
blog.title.font.size
ブログ名とブログ内検索の設置／入力文字とヘッダーのリンクとフローティングバーのブログ名と検索窓と検索ボタンと購読ボタンの行間と検索ボタン（🔍）の下の外側の余白とハンバーガーメニュー（≡）とフローティングバーのハンバーガーメニューの周りと検索ボタンの高さ
header.description.font
ブログの説明文
header.items.font
ヘッダーの購読のタイトルとページリスト全体の文字
header.items.font.size
ページリストの最大の高さと項目の高さ
search.input.font
ブログ内検索の入力欄の文字
feed.title.font
大画面用の投稿のスニペットのタイトル
feed.subtitle.font
インデックスページの見出し（最近の投稿）とアーカイブ／検索ページの説明文と記事のヘッダー（著者名と日付／反映しない）の文字
feed.text.font
大画面用の投稿のスニペットの本文
feed.button.font
スニペットのフッター（コメント数とコメントの投稿と続きを読む）と注目の投稿の日付とページネーションの文字
dialog.title.font
購読ウィジェットのメッセージ
dialog.input.font
購読ウィジェットの設置／入力欄の文字
dialog.action.font
購読ウィジェットの登録ボタン（メール通知を受け取る）の文字
item.title.font
記事／個別ページのタイトル
item.title.font.size
小画面用の記事／個別ページのタイトルの文字サイズ
item.subtitle.font
記事／個別ページのコメントと人気の投稿のタイトル
item.byline.font
CSSに記載なし
item.action.font
ラベルとコメントのヘッダー（投稿者と日付）と編集ボタン（反映しない）の文字
item.label.font
ラベルの文字
item.blockquote.font
記事／個別ページの引用文
sidebar.widget.title.font
サイドバーのウィジェットのタイトル
sidebar.profile.link.font
プロフィールのリンク（名前とプロフィールにアクセス／反映しない）と検索／ラベルウィジェットの伸縮ボタン（もっと見ると一部のみ表示／反映しない）の文字
attribution.text.font
帰属ウィジェットの文字

Essential／エッセンシャル

フォントの種類の導入
damionRegular36
Damionの400の36pxのフォント
damionRegular62
Damionの400の62pxのフォント
playfairDisplayBlack28
Playfair Displayの900の48pxのフォント
playfairDisplayBlack36
Playfair Displayの900の36pxのフォント
playfairDisplayBlack44
Playfair Displayの900の44pxのフォント
robotoNormal15
Robotoの15pxのフォント
robotoNormal16
Robotoの16pxの
robotoLightItalic15
Robotoの筆記体の300の15pxのフォント
robotoBold22
Robotoの太い22pxのフォント
robotoBold30
Robotoの太い30pxのフォント
robotoBold45
Robotoの太い45pxのフォント
定義済みのデザイン
body.text.font
ページ全体とページリストの項目と不正報告の文字
body.text.font.size
ページリストの最大の高さと項目の行間
body.text.font.family
購読の設置／入力と登録ボタン（メール通知を受け取る）
blog.title.font
ブログ名
blog.title.font.size
ブログ名の文字のサイズと行間
tabs.font
ページリストの項目の文字
posts.title.font
大画面用の記事／個別ページのタイトル
posts.stream.title.font
大画面用の投稿のスニペットのタイトル
posts.text.font
記事／個別ページの本文と人気の投稿のスニペットの本文とヘッダーとフッターの文字
blockquote.font
引用文（反映しない）
search.input.font
ブログ内検索の設置／入力欄の文字

Simple／シンプル

定義済みのデザイン
body.font
ブログ全体の文章
header.font
ブログ名と投稿と投稿のスニペットのヘッダーの日付（反映しない）
tabs.font
タブのラベルとリンクリストの項目の文字
post.title.font
投稿とスニペットとコメントのタイトル
date.header.font
投稿と投稿のスニペットのヘッダーの日付の文字

Dynamic Views／動的ビュー

定義済みのデザイン
page.text.font
ブログ全体の文章（フォントの種類以外は反映しない）
menu.font
表示されない
link.font
リンクの文字（フォントの種類以外は反映しない）
blog.title.font
ブログ名（フォントの種類以外は反映しない）
blog.description.font
ブログの説明文（フォントの種類以外は反映しない）
post.title.font
投稿のタイトル（フォントの種類以外は反映しない）

Picture Window／画像ウィンドウ

定義済みのデザイン
body.font
ブログ全体の文章
header.font
ブログ名
tabs.font
タブのラベルとリンクリストの項目の文字
post.title.font
投稿と投稿のスニペットとコメントのタイトル
widget.title.font
ウィジェットのタイトル

Awesome Inc.／オーサムインク

定義済みのデザイン
body.font
ブログ全体の文章
header.font
ブログ名
description.font
ブログの説明文
tabs.font
タブのラベルとリンクリストの項目の文字
date.font
投稿のヘッダーの日付の文字
post.title.font
投稿と投稿のスニペットとコメントのタイトル
widget.title.font
ウィジェットのタイトル
widget.font
サイドバーのウィジェットの文章

Watermark／ウォーターマーク

定義済みのデザイン
body.font
ブログ全体の文章
header.font
ブログ名
tabs.font
タブのラベルとリンクリストの項目の文字
date.font
投稿のヘッダーの日付の文字
post.title.font
投稿と投稿のスニペットとコメントのタイトル
widget.title.font
ウィジェットのタイトル

Etereal／エスィリアル

定義済みのデザイン
body.font
ブログ全体の文章
header.font
ブログ名
tabs.font
タブのラベルとリンクリストの項目の文字
date.font
投稿のヘッダーの日付の文字
post.title.font
投稿と投稿のスニペットとコメントのタイトル
widget.title.font
ウィジェットのタイトル

Travel／旅行

定義済みのデザイン
body.font
ブログ全体の文章
header.font
ブログ名
tabs.font
タブのラベルとリンクリストの項目の文字
date.font
投稿と投稿のスニペットのヘッダーの日付の文字
post.title.font
投稿のスニペットのタイトル
widget.title.font
ウィジェットのタイトル
widget.font
ウィジェットの文章

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

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

参考サイト

コメント