🏗️ テーマ基盤中級

CSS カスタムプロパティのテーマ変数

テーマ設定の色、タイポグラフィ、レイアウトをCSS カスタムプロパティ（CSS 変数）に変換し、スタイルシート全体で参照可能にする。フォント、色、ボタンスタイル、ダイアログなどをテーマカスタマイザーから一元管理する。

用途

テーマの色・フォント・間隔をカスタマイザーの設定画面で調整したいとき、CSS に直接記述するのではなく、このファイルで変数化して管理することで、テーマ全体の統一感を保ちながら柔軟なカスタマイズを可能にする。

設置場所

assets/variables.css.liquid に配置し、theme.liquid の <head> 内で `{{ 'variables.css' | asset_url | stylesheet_tag }}` で読み込む。他の CSS ファイルより先に読み込まれるようにすることで、後続のスタイルシートから CSS 変数を参照できるようになる。

注意点

color_to_rgb フィルターを使って RGB 値を抽出する際、CSS で `rgba()` 関数に使えるよう 'rgb（' と '）' を remove で削除している。ブラウザの CSS カスタムプロパティ対応は IE 11 では動作しないため、古いブラウザ対応が必要なら PostCSS で変数をコンパイル時に展開する必要がある。テーマカスタマイザーで無効な色コード（例：8文字以上の16進数）が入力されると変数が破損するため、テーマ設定の color 型フィールドで入力値を事前検証しておく。

タグ:css-variablecustom-propertytheme-settingtypographycolor

コード

87 行 / liquid

{% comment %} 
    Fonts 
{% endcomment %}
{{ settings.font_headings | font_face: font_display: 'swap' }}

{% unless settings.font_body.system %}
  {{ settings.font_body | font_face: font_display: 'swap' }}
  {{ settings.font_body | font_modify: 'weight', '500' | font_face: font_display: 'swap' }}
  {{ settings.font_body | font_modify: 'weight', '700' | font_face: font_display: 'swap' }}
  {{ settings.font_body | font_modify: 'style', 'italic' | font_face: font_display: 'swap' }}
{% endunless %}
 
:root {
  {%- comment -%} 
    Colors
  {%- endcomment -%}
  --bs-primary: {{ settings.color_primary }};
  --bs-primary-rgb: {{ settings.color_primary | color_to_rgb | remove: 'rgb(' | remove: ')' }};
  --bs-secondary: {{ settings.color_secondary }};
  --bs-secondary-rgb: {{ settings.color_secondary | color_to_rgb | remove: 'rgb(' | remove: ')' }};
  --bs-body-bg: {{ settings.color_body_bg }};
  --bs-body-bg-rgb: {{ settings.color_body_bg | color_to_rgb | remove: 'rgb(' | remove: ')' }};
  --bs-body-color: {{ settings.color_body_color }};
  --bs-body-color-rgb: {{ settings.color_body_color | color_to_rgb | remove: 'rgb(' | remove: ')' }};

  {% comment -%} 
    General
  {%- endcomment -%}
  --bs-container-max-width: {{ settings.container_max_width | append: 'px' }};
  --bs-border-radius: {{ settings.border_radius | append: 'rem' }};

  {% comment -%} 
    Typography
  {%- endcomment -%}
  --bs-body-font-family: {{ settings.font_body.family }}, {{ settings.font_body.fallback_families }};
  --bs-body-font-weight: {{ settings.font_body.weight }};
  --bs-body-font-size: {{ settings.font_body_size | append: 'rem'  }};
  --bs-headings-font-family: {{ settings.font_headings.family }}, {{ settings.font_headings.fallback_families }};
  --bs-headings-font-weight: {{ settings.font_headings.weight }};
  --bs-headings-text-transform: {{ settings.headings_text_transform }};

  {% comment -%} 
    Modal/Dialog
  {%- endcomment -%}
  --bs-dialog-backdrop-color-rgb: {{ settings.dialog_backdrop_color | color_to_rgb | remove: 'rgb(' | remove: ')' }};
  --bs-dialog-backdrop-opacity: {{ settings.dialog_backdrop_opacity | append: '%' }};
  --bs-dialog-backdrop-blur: {{ settings.dialog_backdrop_blur | append: 'px' }};
  --bs-dialog-backdrop-blur: {{ settings.dialog_backdrop_blur | append: 'px' }};
  --bs-dialog-header-bg-color-rgb: {{ settings.dialog_header_bg_color | prepend: 'var(--bs-' | append: '-rgb)' }};
  --bs-dialog-header-bg-opacity: {{ settings.dialog_header_bg_opacity | append: '%' }};
  --bs-dialog-header-text-color: {{ settings.dialog_header_text_color }};
  --bs-dialog-header-border-width: {{ settings.dialog_header_border_width | append: 'px' }};
  --bs-dialog-header-border-color-rgb: {{ settings.dialog_header_border_color | prepend: 'var(--bs-' | append: '-rgb)'  }};
  --bs-dialog-header-border-opacity: {{ settings.dialog_header_border_opacity | append: '%' }};
  --bs-dialog-header-title-font-size: {{ settings.dialog_header_title_font_size | append: 'em' }};

  {% comment -%} 
    Various
  {%- endcomment -%}
  --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(var(--bs-body-color-rgb), 0.075);
  --bs-box-shadow-md: 0 0.25rem 0.5rem rgba(var(--bs-body-color-rgb), 0.125);
  --bs-box-shadow-lg: 0 .5rem 1rem rgba(var(--bs-body-color-rgb), 0.175);
  --bs-focus-box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .125);
  --bs-box-shadow: var(--bs-box-shadow-md);
}

{%- comment -%} 
  Buttons
{%- endcomment -%}
.btn {
  --bs-btn-font-size: {{ settings.btn_font_size | append: 'rem' }};
  --bs-btn-text-transform: {{ settings.btn_text_transform }};
  --bs-btn-font-family-new: {{ settings.btn_font_family }};
  --bs-btn-font-weight: {{ settings.btn_font_weight }};
  --bs-btn-letter-spacing: {{ settings.btn_letter_spacing | times: 0.05 | append: 'rem' }};
  --bs-btn-bg-gradient: {% if settings.btn_bg_gradient %}var(--bs-gradient){% endif %};
  --bs-btn-padding-x: {{ settings.btn_padding_x | append: 'rem' }};
  --bs-btn-padding-y: {{ settings.btn_padding_y | append: 'rem' }};
}

{%- comment -%} 
  Other
{%- endcomment -%}
.form-check-input:checked[type=radio] {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23{{ settings.color_body_bg | remove: '#' }}'/%3e%3c/svg%3e");
}

出典・ライセンス

Source:: kondasoft/ks-bootshop/assets/variables.css.liquid
Repository:: https://github.com/kondasoft/ks-bootshop
License:: MIT

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

CSS カスタムプロパティのテーマ変数

コード

出典・ライセンス

関連項目

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

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

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

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

基本的なHTMLレイアウト

layout タグのフォーマット