✨ UI部品初級

区切り線

ページ内の要素を視覚的に区切るための水平線セクション。色・透明度・高さをカスタマイズでき、上下の余白も調整できる。

用途

ページ内で異なるセクション間に視覚的な区切りを入れたいときに使う。商品説明とレビューの間、複数のバナー間など、セクションの境目を明確にしたい箇所に配置する。

設置場所

sections/separator.liquid に配置し、テーマカスタマイザーまたはテンプレートで「セクションを追加」メニューから「区切り線」を選んで挿入する。

注意点

max_width の CSS 変数は `section.settings.max_width` で指定されているが、スキーマには `container_max_width` しか存在するため、実際の動作を確認したうえで両者を統一する必要がある。背景色のクラス名（`bg-primary`、`bg-secondary` など）は Bootstrap のカラー変数に依存しているため、テーマの CSS で該当クラスが定義されていることが前提となる。透明度は CSS カスタムプロパティ `--bs-bg-opacity` で制御されるため、ブラウザの CSS 変数非対応環境では見た目が異なる可能性がある。

タグ:separatordividerspacingstylingsection

コード

110 行 / liquid

<div 
  id="separator-wrapper-{{ section.id }}" 
  class="
    separator-wrapper 
    {{ section.settings.pt | prepend: 'pt-' }} 
    {{ section.settings.pb | prepend: 'pb-' }}
  ">
  <div 
    class="{{ section.settings.container }}" 
    style="max-width: {{ section.settings.max_width }}px;">
    <hr 
      class="separator my-0 {{ section.settings.bg_color }}" 
      style="
        opacity: 1;
        --bs-bg-opacity: {{ section.settings.bg_opacity | append: '%' }};
        height: {{ section.settings.height | append: 'px' }}
      ">
  </div>
</div>

{% schema %}
{
"name": "Separator",
"settings": [
  {
    "type": "header",
    "content": "Styling"
  },
  {
    "type": "select",
    "id": "bg_color",
    "label": "Background color",
    "default": "bg-primary",
    "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": 10,
    "unit": "%"
  },
  {
    "type": "range",
    "id": "height",
    "label": "Height",
    "min": 0,
    "max": 16,
    "default": 1,
    "step": 1,
    "unit": "px"
  },
  {
    "type": "header",
    "content": "General"
  },
  {
    "type": "select",
    "id": "container",
    "label": "Container",
    "default": "",
    "options": [
      { "value": "container", "label": "Yes" },
      { "value": "", "label": "No" }
    ]
  },
  {
    "type": "text",
    "id": "container_max_width",
    "label": "Container max-width (px)",
    "info": "Leave empty to use the global container width"
  },
  {
    "type": "header",
    "content": "Spacing"
  },
  {
    "type": "range",
    "id": "pt",
    "label": "Top",
    "min": 0,
    "max": 20,
    "step": 1,
    "default": 10
  },
  {
    "type": "range",
    "id": "pb",
    "label": "Bottom",
    "min": 0,
    "max": 20,
    "step": 1,
    "default": 10
  }
],
"presets": [
  {
    "name": "Separator"
  }
]
}
{% endschema %}

出典・ライセンス

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

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

区切り線

コード

出典・ライセンス

関連項目

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

エラーアイコン

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

静的コンテンツ

テキスト

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