🏗️ テーマ基盤中級

テーマ設定のCSS変数化

テーマカスタマイザーで設定されたフォント、色、余白をCSS変数（カスタムプロパティ）に変換し、全ページで再利用可能にする。font_faceフィルターでWebフォントを読み込み、RGB値を分解してカラーレイヤーを柔軟に扱える仕様。

用途

ストアの共通スタイルを一元管理するとき。テーマカスタマイザーの設定値を JavaScript や CSS セレクタから参照できるようにして、デザイン調整の手間を大幅に削減する。

設置場所

theme.liquid の <head> 内、または layout/theme.liquid に直接配置するか、snippets/css-variables.liquid などのスニペットとして分離し、{% render 'css-variables' %} で theme.liquid から呼び出す。

注意点

settings.type_body_font などのフォント設定は Shopify 管理画面のテーマカスタマイザーで「フォント」タイプとして定義されていることが前提。RGB値を分解する際（settings.colors_text.red など）、色が RGB オブジェクト型で入力されていないとエラーになるため、管理画面で「色」フィールドを正しく設定する。グラデーション設定（gradient_background_1 など）が blank の場合は単色にフォールバックする条件分岐があるため、ここは必須。ページ幅を rem 単位に変換する際に divided_by: 10 で計算しているため、設定値は「1200」のように10の倍数を前提に入力する。

タグ:css-variabletheme-settingsfont-facecolordesign-system

コード

40 行 / liquid

<div>
    {% style %}
      {{ settings.type_body_font | font_face: font_display: 'swap' }}
      {{ body_font_bold | font_face: font_display: 'swap' }}
      {{ body_font_italic | font_face: font_display: 'swap' }}
      {{ body_font_bold_italic | font_face: font_display: 'swap' }}
      {{ settings.type_header_font | font_face: font_display: 'swap' }}

      :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 }};

        --font-body-scale: {{ settings.body_scale | divided_by: 100.0 }};
        --font-heading-scale: {{ settings.heading_scale | times: 1.0 | divided_by: settings.body_scale }};

        --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;
      }
    {% endstyle %}
</div>

出典・ライセンス

Source:: Shopify/theme-tools/packages/prettier-plugin-liquid/src/test/liquid-style-tag/index.liquid
Repository:: https://github.com/Shopify/theme-tools
License:: MIT

このコードは Shopify 著作の MIT ライセンスソースです。原本の著作権は Shopify が保有します。日本語訳は ALSEL によるものです。

テーマ設定のCSS変数化

コード

出典・ライセンス

関連項目

セクションスキーマのカスタムブロック定義

セクション呼び出しのフォーマット

レイアウトテンプレートの指定

Liquid フォーマッター互換のセクション表記

基本的なHTMLレイアウト

layout タグのフォーマット