【Shopify】CSS変数(カスタムプロパティ)の扱い方(Dawnの場合)
※2021.11.11時点の情報です。
Shopifyの標準テーマDawnでは、CSSの変数(カスタムプロパティ)を使用して、フォントサイズやフォントファミリー、背景色などが定義されています。
ただし、Shopifyにおいては、settings_schema.jsonにおいて定義された変数をCSS変数に代入しているので、若干分かりづらいです。
ということでまとめました。
CSS変数(カスタムプロパティ)について理解する
こちらの記事が分かりやすかったです。
Shopify(Dawn)での定義場所
ここからは、CSSの変数(カスタムプロパティ)について理解している前提で記載します。
Dawnでは、theme.liquidで、以下のように定義されています。
:root {
--font-body-family: {{ settings.type_body_font.family }}, {{ settings.type_body_font.fallback_families }};
--font-body-style: {{ settings.type_body_font.style }};
--font-body-weight: {{ settings.type_body_font.weight }};
--font-heading-family: {{ settings.type_header_font.family }}, {{ settings.type_header_font.fallback_families }};
--font-heading-style: {{ settings.type_header_font.style }};
--font-heading-weight: {{ settings.type_header_font.weight }};
--color-base-text: {{ settings.colors_text.red }}, {{ settings.colors_text.green }}, {{ settings.colors_text.blue }};
--color-base-background-1: {{ settings.colors_background_1.red }}, {{ settings.colors_background_1.green }}, {{ settings.colors_background_1.blue }};
--color-base-background-2: {{ settings.colors_background_2.red }}, {{ settings.colors_background_2.green }}, {{ settings.colors_background_2.blue }};
--color-base-solid-button-labels: {{ settings.colors_solid_button_labels.red }}, {{ settings.colors_solid_button_labels.green }}, {{ settings.colors_solid_button_labels.blue }};
--color-base-outline-button-labels: {{ settings.colors_outline_button_labels.red }}, {{ settings.colors_outline_button_labels.green }}, {{ settings.colors_outline_button_labels.blue }};
--color-base-accent-1: {{ settings.colors_accent_1.red }}, {{ settings.colors_accent_1.green }}, {{ settings.colors_accent_1.blue }};
--color-base-accent-2: {{ settings.colors_accent_2.red }}, {{ settings.colors_accent_2.green }}, {{ settings.colors_accent_2.blue }};
--payment-terms-background-color: {{ settings.colors_background_1 }};
--gradient-base-background-1: {% if settings.gradient_background_1 != blank %}{{ settings.gradient_background_1 }}{% else %}{{ settings.colors_background_1 }}{% endif %};
--gradient-base-background-2: {% if settings.gradient_background_2 != blank %}{{ settings.gradient_background_2 }}{% else %}{{ settings.colors_background_2 }}{% endif %};
--gradient-base-accent-1: {% if settings.gradient_accent_1 != blank %}{{ settings.gradient_accent_1 }}{% else %}{{ settings.colors_accent_1 }}{% endif %};
--gradient-base-accent-2: {% if settings.gradient_accent_2 != blank %}{{ settings.gradient_accent_2 }}{% else %}{{ settings.colors_accent_2 }}{% endif %};
--page-width: {{ settings.page_width | divided_by: 10 }}rem;
--page-width-margin: {% if settings.page_width == '1600' %}2{% else %}0{% endif %}rem;
}
一番上のfont-famliyについて見てみましょう。
--font-body-family: {{ settings.type_body_font.family }}, {{ settings.type_body_font.fallback_families }};
となっています。
--font-body-familyが変数名なのは分かります。
ここからがポイントで、変数に入れている値
{{ settings.type_body_font.fallback_families }}について見ていきましょう。
※ちょっとややこししので、後ろについている{{ settings.type_body_font.fallback_families }}の方はいったん忘れてください。
最後に少し説明します。
{{ settings.type_body_font.fallback_families }}の定義場所
さきほどの変数{{ settings.type_body_font.fallback_families }}は、settings_scheme.jsonの118行目あたりに定義されています。
{
"type": "font_picker",
"id": "type_body_font",
"default": "assistant_n4",
"label": "t:settings_schema.typography.settings.type_body_font.label",
"info": "t:settings_schema.typography.settings.type_body_font.info"
},
「id」に着目してください。
"id": "type_body_font"となっています。
settings_scheme.jsonで定義された変数は、idで呼び出すことができますので、この場合は「type_body_font」で呼び出すことができます。
設定されているデフォルト値は「assistant_n4」というフォントになります。
結論
結論として、'type_body_font'には'assistant_n4'が入っていますので、
--font-body-family: {{ settings.type_body_font.family }}, {{ settings.type_body_font.fallback_families }};
の初期値は
--font-body-family: assistant_n4, {{ settings.type_body_font.fallback_families }};
となります。
なお、{{ settings.type_body_font.fallback_families }は何かと言えば、フォールバックフォントを定義しています。
※フォールバックフォントとは、指定されたフォントがデバイスにインストールされていない時に代替で適用されるフォントのことです。
'type_body_font.fallback_families'もsettings_scheme.jsonで定義されているかと思えば、fallback_familiesというテキストは出てきません。
fallback_familiesは、type_body_fontで呼び出したfontオブジェクトのプロパティで、フォールバックフォントファミリーを返します。
このあたりのことはShopifyのリファレンスをご参照ください。
ちょっと分かりにくかったかと思いますが、このあたりを理解しておくと、フォントの変更が一括で出来て便利なので、ぜひ実際に触って覚えてみてください。
もし間違いのご指摘や、ご質問などございましたら、いつでも気軽にご質問お待ちしております。