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に何が入力できるか。
ブログのフォントを定義する
- style/様式:キーワードのみ
- italic:筆記体
- obligation:斜体
- normally:標準
- weight/太さ:キーワードか数値
- bold:太い(700)
- lighter:親要素よりも細い
- bolder:親要素よりも太い
- normal:標準(400)
- 数値:個別の太さ(1~1000)
- size/大きさ:キーワードか単位
- xx-small:物凄く小さい
- x-small:非常に小さい
- small:小さい
- medium:普通(利用者の規定)
- large:大きい
- x-large:非常に大きい
- xx-large:物凄く大きい
- smaller:親要素よりも小さく
- larger:親要素よりも大きい
- 単位:個別の大きさ(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/髭付き風と手書き風の中間
※各要素の値は使用できると確認できたもので、他にも使用できる値がないとはかぎらない。
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/コンテンポ
- Soho/ソーホー
- Emporio/エンポリオ
- Notable/ノータブル
- Essential/エッセンシャル
- Simple/シンプル
- Dynamic Views/動的ビュー
- Picture Window/画像ウィンドウ
- Awesome Inc./オーサムインク
- Watermark/ウォーターマーク
- Ethereal/エスィリアル
- Travel/旅行
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で後から上書きされたりすると反映しなくなる。
コメント