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

hex_to_rgba フィルター(16進数カラーをRGBA形式に変換)

16進数形式のカラーコード(例: #EA5AB9)を RGBA 形式の文字列に変換するフィルター。アルファ値(透明度)を 0.0~1.0 の範囲で指定できる。

用途
CSS で RGBA カラー指定が必要なときに、Shopify 管理画面で設定した 16 進数カラーを動的に透明度付きで変換したいシーン。例えば、ボタンホバー時の背景色を半透明にするなど。
設置場所
Liquid テンプレート内で `{{ '#EA5AB9' | hex_to_rgba }}` または `{{ '#EA5AB9' | hex_to_rgba: 0.5 }}` の形で使用。アルファ値を省略した場合は 1.0(完全不透明)がデフォルト。
注意点
このフィルターは廃止予定(deprecated)のため、新規実装では `color_to_rgb` と `color_modify` の組み合わせに切り替える推奨。既存コードでの動作は変わらないが、今後のバージョンアップで削除される可能性がある。3 桁の短縮 16 進数形式(例: #EA5)も受け付ける。
タグ:colorformat-conversionrgbadeprecatedcss

仕様

50 行 / json
{
  "category": "color",
  "deprecated": true,
  "deprecation_reason": "The `hex_to_rgba` filter has been replaced by [`color_to_rgb`](/docs/api/liquid/filters/color_to_rgb) and\n[`color_modify`](/docs/api/liquid/filters/color_modify).",
  "description": "",
  "parameters": [
    {
      "description": "The desired alpha value.",
      "name": "alpha",
      "positional": true,
      "required": false,
      "types": [
        "number"
      ]
    }
  ],
  "return_type": [
    {
      "type": "string",
      "name": "",
      "description": "",
      "array_value": ""
    }
  ],
  "examples": [
    {
      "name": "",
      "description": "",
      "syntax": "",
      "path": "/",
      "raw_liquid": "{{ '#EA5AB9' | hex_to_rgba }}",
      "parameter": false,
      "display_type": "text",
      "show_data_tab": true
    },
    {
      "name": "alpha",
      "description": "The default `alpha` value is 1.0. However, you can specify a decimal value between 0.0 and 1.0.",
      "syntax": "string | hex_to_rgba: number",
      "path": "/",
      "raw_liquid": "{{ '#EA5AB9' | hex_to_rgba: 0.5 }}",
      "parameter": true,
      "display_type": "text",
      "show_data_tab": true
    }
  ],
  "summary": "Converts a CSS color string from  hexadecimal format to `RGBA` format. Shorthand hexadecimal formatting (`hex3`) is also accepted.",
  "syntax": "string | hex_to_rgba",
  "name": "hex_to_rgba"
}

出典・ライセンス

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