Liquid Snippets by ALSEL
✨ UI部品初級

リッチテキスト

タイトル、説明文、プライマリ・セカンダリボタンを配置できるセクション。背景色・グラデーション、テキスト色、ボーダー、余白、コンテナ幅をカスタマイズ可能。

用途
ランディングページやキャンペーンバナーで、テキストと行動喚起ボタンを組み合わせたコンテンツブロックを作成するとき。
設置場所
sections/richtext.liquid に配置し、テーマカスタマイザーでセクションを追加するか、template ファイル内で `{% section 'richtext' %}` で呼び出す。
注意点
container_max_width は px 単位で手動入力するため、レスポンシブ対応が必要な場合は CSS メディアクエリで上書きする。プライマリ・セカンダリボタンのテキストが空白の場合、該当ボタンは非表示になるため、どちらか一方を無効にしたいときはテキストフィールドを空にする。背景グラデーション有効時は bg-gradient クラスが適用され、CSS で実装されているため、カスタムカラーが反映されない可能性がある。
タグ:sectionrichtextbuttonstylingresponsive

コード

305 行 / liquid
<div
  id="richtext-{{ section.id }}" 
  class="
    richtext 
    {{ section.settings.bg_color }} 
    {{ section.settings.bg_gradient }}
    {{ section.settings.text_color }}
    {{ section.settings.border_top_width | prepend: 'border-top-' }}
    {{ section.settings.border_bottom_width | prepend: 'border-bottom-' }}
    {{ section.settings.border_color }} 
    {{ section.settings.text_align }}
    {{ section.settings.pt | prepend: 'pt-' }} 
    {{ section.settings.pb | prepend: 'pb-' }}
  "
  style="
    --bs-bg-opacity: {{ section.settings.bg_opacity | append: '%' }};
    --bs-border-opacity: {{ section.settings.border_opacity | append: '%' }};
  ">
  <div 
    class="container" 
    style="max-width: {{ section.settings.container_max_width }}px;">
    {% unless section.settings.title == blank %}
      <h2 class="title mb-0 {{ section.settings.title_font_size }}">
        {{ section.settings.title }}
      </h2>
    {% endunless %}
    {% unless section.settings.description == blank %}
      <div class="description rte mt-3 mb-0 {{ section.settings.description_font_size }}">
        {{ section.settings.description }}
      </div>
    {% endunless %}
    {% unless section.settings.btn_primary_text == blank %}
      <div class="d-inline-flex mx-n2 mt-7">
        {% unless section.settings.btn_primary_text == blank %}
          <a 
            class="btn m-2 {{ section.settings.btn_primary_color }}" 
            href="{{ section.settings.btn_primary_url }}">
            {{ section.settings.btn_primary_text }}
          </a>
        {% endunless %}
        {% unless section.settings.btn_secondary_text == blank %}
          <a 
            class="btn m-2 {{ section.settings.btn_secondary_color }}" 
            href="{{ section.settings.btn_secondary_url }}">
            {{ section.settings.btn_secondary_text }}
          </a>
        {% endunless %}
      </div>
    {% endunless %}
  </div>
</div>

{% schema %}
{
  "name": "Richtext",
  "tag": "section",
  "settings": [
    {
      "type": "header",
      "content": "Styling"
    },
    {
      "type": "select",
      "id": "bg_color",
      "label": "Background color",
      "default": "bg-body",
      "options": [
        { "value": "bg-primary", "label": "Primary" },
        { "value": "bg-secondary", "label": "Secondary" },
        { "value": "bg-body", "label": "Body" },
        { "value": "bg-white", "label": "White" }
      ]
    },
    {
      "type": "range",
      "id": "bg_opacity",
      "label": "Background opacity",
      "min": 0,
      "max": 100,
      "step": 1,
      "default": 100,
      "unit": "%"
    },
    {
      "type": "select",
      "id": "bg_gradient",
      "label": "Background gradient",
      "options": [
        { "value": "bg-gradient", "label": "Yes" },
        { "value": "", "label": "No" }
      ],
      "default": ""
    },
    {
      "type": "select",
      "id": "text_color",
      "label": "Text color",
      "default": "text-body",
      "options": [
        { "value": "text-primary", "label": "Primary" },
        { "value": "text-secondary", "label": "Secondary" },
        { "value": "text-body", "label": "Body" },
        { "value": "text-white", "label": "White" }
      ]
    },
    {
      "type": "range",
      "id": "border_top_width",
      "label": "Border top width",
      "default": 0,
      "min": 0,
      "max": 16,
      "step": 1,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "border_bottom_width",
      "label": "Border bottom width",
      "default": 0,
      "min": 0,
      "max": 16,
      "step": 1,
      "unit": "px"
    },
    {
      "type": "select",
      "id": "border_color",
      "label": "Border color",
      "default": "border-body",
      "options": [
        { "value": "border-primary", "label": "Primary" },
        { "value": "border-secondary", "label": "Secondary" },
        { "value": "border-body", "label": "Body" },
        { "value": "border-white", "label": "White" }
      ]
    },
    {
      "type": "range",
      "id": "border_opacity",
      "label": "Border opacity",
      "min": 0,
      "max": 100,
      "step": 1,
      "default": 100,
      "unit": "%"
    },
    {
      "type": "text",
      "id": "container_max_width",
      "label": "Container max-width (px)",
      "info": "Leave empty to use the global container width",
      "default": "900"
    },

    {
      "type": "select",
      "id": "text_align",
      "label": "Text align",
      "default": "text-center",
      "options": [
        { "value": "text-start", "label": "Left" },
        { "value": "text-center", "label": "Center" },
        { "value": "text-end", "label": "Right" }
      ]
    },
    {
      "type": "header",
      "content": "Text"
    },
    {
      "type": "text",
      "id": "title",
      "label": "Title",
      "default": "Richtext"
    },
    {
      "type": "select",
      "id": "title_font_size",
      "label": "Title font-size",
      "default": "h2",
      "options": [
        { "value": "h1", "label": "H1" },
        { "value": "h2", "label": "H2" },
        { "value": "h3", "label": "H3" },
        { "value": "h4", "label": "H4" },
        { "value": "h5", "label": "H5" },
        { "value": "h6", "label": "H6" }
      ]
    },
    {
      "type": "richtext",
      "id": "description",
      "label": "Description (optional)",
      "default": "<p>Add on optional description for this section</p>"
    },
    {
      "type": "select",
      "id": "description_font_size",
      "label": "Description font-size",
      "default": "fs-md",
      "options": [
        { "value": "fs-sm", "label": "sm" },
        { "value": "fs-md", "label": "md" },
        { "value": "fs-lg", "label": "lg" },
        { "value": "fs-xl", "label": "xl" },
        { "value": "fs-xxl", "label": "xxl" }
      ]
    },
    {
      "type": "header",
      "content": "Primary button"
    },
    {
      "type": "text",
      "id": "btn_primary_text",
      "label": "Button text",
      "default": "Primary button",
      "info": "Leave empty to disable"
    },
    {
      "type": "url",
      "id": "btn_primary_url",
      "label": "Button URL"
    },
    {
      "type": "select",
      "id": "btn_primary_color",
      "label": "Button color",
      "default": "btn-primary",
      "options": [
        { "group": "Solid", "value": "btn-primary", "label": "Primary" },
        { "group": "Solid", "value": "btn-secondary", "label": "Secondary" },
        { "group": "Solid", "value": "btn-white", "label": "White" },
        { "group": "Light", "value": "btn-light-primary", "label": "Primary" },
        { "group": "Light", "value": "btn-light-secondary", "label": "Secondary" },
        { "group": "Light", "value": "btn-light-white", "label": "White" },
        { "group": "Outline", "value": "btn-outline-primary", "label": "Primary" },
        { "group": "Outline", "value": "btn-outline-secondary", "label": "Secondary" },
        { "group": "Outline", "value": "btn-outline-white", "label": "White" }
      ]
    },
    {
      "type": "header",
      "content": "Secondary button"
    },
    {
      "type": "text",
      "id": "btn_secondary_text",
      "label": "Button text",
      "default": "Secondary button",
      "info": "Leave empty to disable"
    },
    {
      "type": "url",
      "id": "btn_secondary_url",
      "label": "Button URL"
    },
    {
      "type": "select",
      "id": "btn_secondary_color",
      "label": "Button color",
      "default": "btn-secondary",
      "options": [
        { "group": "Solid", "value": "btn-primary", "label": "Primary" },
        { "group": "Solid", "value": "btn-secondary", "label": "Secondary" },
        { "group": "Solid", "value": "btn-white", "label": "White" },
        { "group": "Light", "value": "btn-light-primary", "label": "Primary" },
        { "group": "Light", "value": "btn-light-secondary", "label": "Secondary" },
        { "group": "Light", "value": "btn-light-white", "label": "White" },
        { "group": "Outline", "value": "btn-outline-primary", "label": "Primary" },
        { "group": "Outline", "value": "btn-outline-secondary", "label": "Secondary" },
        { "group": "Outline", "value": "btn-outline-white", "label": "White" }
      ]
    },
    {
      "type": "header",
      "content": "Spacing"
    },
    {
      "type": "range",
      "id": "pt",
      "label": "Top",
      "min": 0,
      "max": 20,
      "step": 1,
      "default": 9
    },
    {
      "type": "range",
      "id": "pb",
      "label": "Bottom",
      "min": 0,
      "max": 20,
      "step": 1,
      "default": 9
    }
  ],
  "presets": [
    {
      "name": "Richtext"
    }
  ]
}
{% endschema %}

出典・ライセンス

Source:
kondasoft/ks-bootshop/sections/richtext.liquid
Repository:
https://github.com/kondasoft/ks-bootshop
License:
MIT

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

関連項目

✨ UI部品初級

成功チェックマークアイコン

緑色の円形背景にチェックマークを描いたSVGアイコン。フォームやメッセージの完了状態を視覚的に表現する。

📁 shopify-headless-theme·MIT·6 行
✨ UI部品初級

エラーアイコン

エラー状態を示す円形アイコン。SVG で描画されたアラート記号を含む UI 部品で、accessibility 対応により視覚障害ユーザーには非表示。

📁 theme-tools·MIT·8 行
✨ UI部品中級

カスタム要素のラッパーコンポーネント

child-element というカスタム HTML 要素をラップし、スロットに子要素を挿入するスニペット。Web Components パターンで再利用可能なコンポーネント構造を実現する。

📁 theme-tools·MIT·10 行
✨ UI部品初級

静的コンテンツ

管理画面で入力したテキストコンテンツを静的に描画するブロック。セクション内で複数回使い分けられる汎用コンテナとして機能する。

📁 theme-tools·MIT·11 行
✨ UI部品初級

テキスト

セクションに追加できるシンプルなテキストブロック。管理画面からドラッグ&ドロップで配置でき、固定テキスト「hello world」を表示する基本的なブロック実装。

📁 theme-tools·MIT·15 行
✨ UI部品初級

セクション共通ヘッダー（タイトル・説明文）

セクション内で繰り返し使うタイトルと説明文をまとめて描画するスニペット。テーマカスタマイザーから設定したテキストとフォントサイズを条件付きで出力する。

📁 ks-bootshop·MIT·24 行