Liquid Snippets by ALSEL
📘 公式リファレンス🔧 リファレンス/フィルター中級

color_modify フィルター(色成分を調整)

指定した色の RGB・HSL・アルファ値などの成分を数値で増減させる。16進数やrgb()形式の色を入力し、特定の色成分だけを修正する。

用途
テーマカスタマイザーで選んだ基本色に対して、より薄い影色やハイライト色を自動生成したいとき。あるいは、ダーク/ライトモード対応で色の明るさを動的に変更する場合に使う。
設置場所
CSS 変数や style タグ内で `{{ color_value | color_modify: 'red', 50 }}` のように Liquid コードを埋め込む。あるいは section の settings から取得した色をループ内で加工するときに使う。
注意点
修正対象の色成分によって出力形式が変わる(例:16進数の色に alpha を指定すると rgba()形式に変換される)ため、CSS 変数に代入する場合は形式の違いに注意する。red・green・blue は 0~255、hue は 0~360、saturation・lightness は 0~100、alpha は 0~1.0 の範囲が有効。負の値を指定すると下限、上限を超える値は上限にクリップされるため、想定外の色になるリスクがある。
タグ:colorrgbhslcss-variablecolor-manipulation

仕様

59 行 / json
{
  "category": "color",
  "deprecated": false,
  "deprecation_reason": "",
  "description": "The following table outlines valid color components, and the value range for their modifications:\n\n| Component | Value range |\n| --- | --- |\n| <ul><li>`red`</li><li>`green`</li><li>`blue`</li></ul> | An integer between 0 and 255 |\n| `alpha` | A decimal between 0 and 1 |\n| `hue` | An integer between 0 and 360 |\n| <ul><li>`saturation`<li>`lightness`</li></ul> | An integer between 0 and 100 |",
  "parameters": [
    {
      "description": "The color component that you want to modify.",
      "name": "color_component",
      "positional": true,
      "required": true,
      "types": [
        "string"
      ]
    },
    {
      "description": "The amount to modify the supplied color component by.",
      "name": "modification_value",
      "positional": true,
      "required": true,
      "types": [
        "number"
      ]
    }
  ],
  "return_type": [
    {
      "type": "string",
      "name": "",
      "description": "",
      "array_value": ""
    }
  ],
  "examples": [
    {
      "name": "",
      "description": "",
      "syntax": "",
      "path": "/",
      "raw_liquid": "{{ '#EA5AB9' | color_modify: 'red', 255 }}",
      "parameter": false,
      "display_type": "text",
      "show_data_tab": true
    },
    {
      "name": "",
      "description": "The format of the modified color depends on the component being modified. For example, if you modify the `alpha` component of a color in hexadecimal format, then the modified color will be in `rgba()` format.\n",
      "syntax": "",
      "path": "/",
      "raw_liquid": "{{ '#EA5AB9' | color_modify: 'alpha', 0.85 }}",
      "parameter": false,
      "display_type": "text",
      "show_data_tab": true
    }
  ],
  "summary": "Modifies a specific color component of a given color by a specific amount.",
  "syntax": "string | color_modify: string, number",
  "name": "color_modify"
}

出典・ライセンス

License:
MIT

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

関連項目

📘 公式リファレンス🔧 リファレンス/フィルター初級

avatar フィルター(顧客アバター画像HTML生成)

顧客アバターが存在する場合、それを表示する HTML タグを生成するフィルター。customer オブジェクトに対して使用する。

📁 theme-liquid-docs·MIT·19
📘 公式リファレンス🔧 リファレンス/フィルター初級

default_errors フィルター(フォーム送信エラーを日本語化)

form.errors の各エラーコードに対応する既定のエラーメッセージを自動生成するフィルター。フォーム送信時の入力値不正や必須項目空白などのエラーを言語別に出力する。

📁 theme-liquid-docs·MIT·19
📘 公式リファレンス🔧 リファレンス/フィルター初級

date フィルター(日付を指定形式でフォーマット)

日付値を指定されたフォーマット文字列に従って整形する。フォーマット文字列が空の場合は元の値がそのまま返される。入力が日付に変換できない場合も元の値が返される。

📁 theme-liquid-docs·MIT·19
📘 公式リファレンス🔧 リファレンス/フィルター初級

payment_terms フィルター(Shop Pay分割払いバナーを生成)

product フォームまたは cart フォームに対して使用し、Shop Pay の分割払いオプションを表示するための HTML を生成するフィルター。顧客が購入時に分割払いプランを選択できるようにする。

📁 theme-liquid-docs·MIT·19
📘 公式リファレンス🔧 リファレンス/フィルター初級

abs フィルター(数値の絶対値を取得)

負の数を正の数に変換する。数値の絶対値(ゼロからの距離)を返すフィルター。

📁 theme-liquid-docs·MIT·30
📘 公式リファレンス🔧 リファレンス/フィルター初級

append フィルター(文字列の末尾に追加)

文字列の末尾に別の文字列を連結するフィルター。URL パスの結合やテキストの接尾辞追加に使う。

📁 theme-liquid-docs·MIT·30