✨ UI部品初級
テキスト
セクションに追加できるシンプルなテキストブロック。管理画面からドラッグ&ドロップで配置でき、固定テキスト「hello world」を表示する基本的なブロック実装。
用途
Online Store 2.0 のセクション内に自由なテキスト要素を挿入したいとき。ページビルダーで複数ブロックを組み合わせるサイト構築に使う。
設置場所
blocks/text.liquid として配置し、セクション JSON の `blocks` 配列に `{ "type": "text" }` を追加することで管理画面に「テキストブロック」として現れる。
注意点
このコードはスケルトン・サンプルで、実際には管理画面で編集可能にするには schema に `settings` を定義する必要がある。例えば `{ "type": "text", "id": "content", "label": "テキスト" }` を追加して `{{ block.settings.content }}` で出力する実装に書き換える。日本語を含む場合は UTF-8 エンコーディングが正しく設定されていることを確認する。
コード
15 行 / liquidhello world
{% schema %}
{
"name": "Text block",
"settings": [],
"presets": [
{
"name": "Text block",
"category": "Text"
}
]
}
{% endschema %}
出典・ライセンス
- Repository:
- https://github.com/Shopify/theme-tools
- License:
- MIT
このコードは Shopify 著作の MIT ライセンスソースです。 原本の著作権は Shopify が保有します。日本語訳は 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部品初級
セクション共通ヘッダー（タイトル・説明文）
セクション内で繰り返し使うタイトルと説明文をまとめて描画するスニペット。テーマカスタマイザーから設定したテキストとフォントサイズを条件付きで出力する。
📁 ks-bootshop·MIT·24 行
✨ UI部品初級
SVG アイコンの埋め込みテンプレート
エラーアイコン、ユーザープロフィールアイコン、背景グラフィックなど複数の SVG を HTML に埋め込むテンプレート。symbol 要素で定義したアイコンを use タグで参照し、再利用可能な構成にしている。
📁 theme-tools·MIT·25 行