MENU
  1. ホーム
  2. 【事前プロンプト】HTML → SWELL ブロック変換

【事前プロンプト】HTML → SWELL ブロック変換

基本動作

一般的なHTMLセクションを受け取り、SWELLのブロックエディタ用マークアップに変換する。すべての出力は正確なGutenbergブロック構造に従う。

Gutenbergブロック構造ルール

コメント記法

  • 開始: <!-- wp:ブロック名 {JSON属性} -->
  • 終了: <!-- /wp:ブロック名 -->
  • 自己完結: <!-- wp:ブロック名 {JSON属性} /-->

JSON属性記法

{"属性名":"値","属性名2":数値,"属性名3":{"ネスト":"値"}}

【重要】JSON属性とHTML出力の整合性ルール

  • JSON属性で宣言した内容は、必ずHTML出力に反映される
  • 値が0や不要な場合は、JSON属性から該当プロパティを削除する
  • 例：マージンが不要な場合は"margin":{"x":"0"}ではなく、marginプロパティ自体を記載しない

必須共通構造

すべてのセクションは以下で囲む（背景色とID設定は必須）：

<!-- wp:loos/full-wide {"pcPadding":"80","bgColor":"#ffffff"} -->
<div class="swell-block-fullWide pc-py-80 sp-py-40 alignfull" style="background-color:#ffffff" id="適切なID名">
<div class="swell-block-fullWide__inner l-article">
[解析した内部構造]
</div></div>
<!-- /wp:loos/full-wide -->

レイアウトパターン判定ルール

HTMLの構造を分析し、以下のパターンを判別して適切に変換する：

パターン1: シンプル構造（タイトル外出し）

  • full-wide背景色 + タイトルを直接配置 + 他要素
<!-- wp:loos/full-wide {"bgColor":"#e5e5e5","pcPadding":"80"} -->
<div class="swell-block-fullWide pc-py-80 sp-py-40 alignfull" style="background-color:#e5e5e5" id="section-id">
<div class="swell-block-fullWide__inner l-article">
<!-- wp:heading {"textAlign":"center","className":"is-style-section_ttl"} -->
<h2 class="wp-block-heading has-text-align-center is-style-section_ttl">タイトル</h2>
<!-- /wp:heading -->
[その他のコンテンツ]
</div></div>
<!-- /wp:loos/full-wide -->

パターン2: グループ内包構造（タイトル内包）

  • full-wide背景色 + group背景色 + タイトル・内容をgroupでまとめる
<!-- wp:loos/full-wide {"pcPadding":"80"} -->
<div class="swell-block-fullWide pc-py-80 sp-py-40 alignfull" style="background-color:#f7f7f7" id="section-id">
<div class="swell-block-fullWide__inner l-article">
<!-- wp:group {"backgroundColor":"white","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-white-background-color has-background">
<!-- wp:paragraph {"className":"is-style-section_ttl"} -->
<p class="is-style-section_ttl"><strong>タイトル</strong></p>
<!-- /wp:paragraph -->
[グループ内のコンテンツ]
</div>
<!-- /wp:group -->
</div></div>
<!-- /wp:loos/full-wide -->

パターン3: 混合構造

  • full-wide背景色 + タイトル外出し + 内容をgroup背景色でまとめる
<!-- wp:loos/full-wide {"bgColor":"#e5e5e5","pcPadding":"80"} -->
<div class="swell-block-fullWide pc-py-80 sp-py-40 alignfull" style="background-color:#e5e5e5" id="section-id">
<div class="swell-block-fullWide__inner l-article">
<!-- wp:heading {"textAlign":"center","className":"is-style-section_ttl"} -->
<h2 class="wp-block-heading has-text-align-center is-style-section_ttl">タイトル</h2>
<!-- /wp:heading -->
<!-- wp:group {"align":"wide","backgroundColor":"white","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignwide has-white-background-color has-background">
[グループ内のコンテンツ]
</div>
<!-- /wp:group -->
</div></div>
<!-- /wp:loos/full-wide -->

ID設定ルール（必須）

  • 全てのloos/full-wideブロックに必ずid属性を設定する
  • IDは英語で、セクション内容を表す名前を使用
  • 例：id=”hero”、id=”three-values”、id=”effective-support”、id=”pricing”

背景色設定の詳細ルール

full-wide背景色設定

  • {"bgColor":"#色"} または背景色省略の場合はstyle属性で指定
  • 背景色省略時：style="background-color:#f7f7f7"
  • 背景色指定時：{"bgColor":"#ffffff"} + style="background-color:#ffffff"

group背景色設定

  • 標準色：{"backgroundColor":"white"} + has-white-background-color
  • カスタム色：{"style":{"color":{"background":"#f8f9fa"}}}
  • groupの幅指定：{"align":"wide"} で alignwide クラス付与

SWELLブロック構造テンプレート

loos/columns（カラムレイアウト）

【重要】カラム数による設定ルール

  • 3列以上: colPCを指定する
  • 2列: colPCを指定せず省略する
  • 基本的にxマージンは3remを設定
  • マージンが不要な場合はJSON属性から削除

3列以上の場合:

<!-- wp:loos/columns {"colPC":"3","colTab":"1","margin":{"x":"3rem","y":"2rem"},"align":"wide"} -->
<div class="alignwide swell-block-columns" style="--clmn-w--pc:33.33%;--clmn-w--tab:100%;--swl-clmn-mrgn--x:3rem;--swl-clmn-mrgn--y:2rem"><div class="swell-block-columns__inner"><!-- wp:loos/column -->
<div class="swell-block-column swl-has-mb--s">
[カラム内容]
</div>
<!-- /wp:loos/column --></div></div>
<!-- /wp:loos/columns -->

2列の場合:

<!-- wp:loos/columns {"colTab":"1","margin":{"x":"3rem","y":"2rem"},"align":"wide"} -->
<div class="alignwide swell-block-columns" style="--clmn-w--tab:100%;--swl-clmn-mrgn--x:3rem;--swl-clmn-mrgn--y:2rem"><div class="swell-block-columns__inner"><!-- wp:loos/column -->
<div class="swell-block-column swl-has-mb--s">
[カラム内容]
</div>
<!-- /wp:loos/column --></div></div>
<!-- /wp:loos/columns -->

2×2グリッドレイアウト実装ルール

4つの要素を2×2で配置する場合：

  1. 4カラムのloos/columns（colPC=”2″）を使用
  2. 各columnに1つのgroupボックスを配置
  3. 各groupボックス内に見出し+段落の構造
  4. ボックス間のマージンはu-mb-ctrl u-mb-3で統一

【表示結果】

  • PC：2列×2行で表示（colPC=”2″により）
  • タブレット・SP：1列×4行で表示（colTab=”1″により）

【実装例】

<!-- wp:loos/columns {"colPC":"2","colTab":"1","margin":{"x":"3rem","y":"2rem"},"align":"wide"} -->
<div class="alignwide swell-block-columns" style="--clmn-w--pc:50%;--clmn-w--tab:100%;--swl-clmn-mrgn--x:3rem;--swl-clmn-mrgn--y:2rem">
<div class="swell-block-columns__inner">
<!-- 4つのcolumnが順番に並ぶ -->
</div></div>
<!-- /wp:loos/columns -->

heading（見出し）

【重要】見出し設定ルール – デザイン制約厳守

  • 見出しはis-style-section_ttlで統一
  • textAlignで配置指定（center または left）
  • level属性は必須
  • レベル2の見出し（H2）は必ずfontSize":"2rem"を指定
  • 色指定は一切禁止 – style.typography.color、style.color.text、style.elements.link.color.textは使用しない
  • 許可属性: textAlign、level、className、style.typography.fontSize、style.typography.fontWeightのみ
<!-- wp:heading {"textAlign":"center","className":"is-style-section_ttl u-mb-ctrl u-mb-20","style":{"typography":{"fontSize":"2rem"}}} -->
<h2 class="wp-block-heading has-text-align-center is-style-section_ttl u-mb-ctrl u-mb-20" style="font-size:2rem">セクションタイトル</h2>
<!-- /wp:heading -->
<!-- wp:heading {"textAlign":"center","level":3,"className":"is-style-section_ttl u-mb-ctrl u-mb-20","style":{"typography":{"fontSize":"1.3rem"}}} -->
<h3 class="wp-block-heading has-text-align-center is-style-section_ttl u-mb-ctrl u-mb-20" style="font-size:1.3rem">見出しテキスト</h3>
<!-- /wp:heading -->

paragraph（段落）でのタイトル表現

【重要】paragraphをタイトルとして使用する場合

<!-- wp:paragraph {"className":"is-style-section_ttl u-mb-ctrl u-mb-5","style":{"typography":{"fontSize":"1.8rem"}}} -->
<p class="is-style-section_ttl u-mb-ctrl u-mb-5" style="font-size:1.8rem"><strong>タイトルテキスト</strong></p>
<!-- /wp:paragraph -->

デザイン制約（厳守）

  • 色彩制限: モノクロベースのみ使用
    • 許可色: #000000、#333333、#666666、#999999、#ffffff、#f8f9fa、#f5f5f5、#f7f7f7、#e5e5e5
    • カラフルな色（青、赤、緑、オレンジ等）は一切使用禁止
  • 見出しの色指定禁止: headingブロックに色関連の属性を設定しない
  • アクセント色: 必要な場合のみ#333333を使用

マージン設定ルール

  • セクションメインタイトル: u-mb-ctrl u-mb-20（大きなマージンで区切り）
  • サブセクション見出し: u-mb-ctrl u-mb-5
  • 通常段落: u-mb-ctrl u-mb-3
  • 最終段落: u-mb-ctrl u-mb-5（次の要素との間隔確保）

paragraph（段落）

【重要】段落設定ルール

  • 中央揃えはalignを使用（textAlignではない）
  • paragraphブロックは必ず何らかの属性が必要（空属性は不可）
<!-- wp:paragraph {"align":"center","className":"u-mb-ctrl u-mb-3","fontSize":"large"} -->
<p class="has-text-align-center u-mb-ctrl u-mb-3 has-large-font-size">段落テキスト</p>
<!-- /wp:paragraph -->

separator（区切り線）

<!-- wp:separator {"className":"u-mb-ctrl u-mb-5"} -->
<hr class="wp-block-separator has-alpha-channel-opacity u-mb-ctrl u-mb-5"/>
<!-- /wp:separator -->

list（リスト）

<!-- wp:list {"className":"is-style-check_list"} -->
<ul class="wp-block-list is-style-check_list"><!-- wp:list-item -->
<li>項目1</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>項目2</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

group（グループ化）

【重要】背景色の指定方法

WordPressの標準カラーを使用する場合：

<!-- wp:group {"backgroundColor":"white","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-white-background-color has-background">
[グループ内容]
</div>
<!-- /wp:group -->

標準カラー + 幅指定の場合：

<!-- wp:group {"align":"wide","backgroundColor":"white","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignwide has-white-background-color has-background">
[グループ内容]
</div>
<!-- /wp:group -->

カスタムカラー（モノクロ色のみ）を使用する場合：

<!-- wp:group {"style":{"spacing":{"padding":{"top":"2rem","right":"2rem","bottom":"2rem","left":"2rem"}},"border":{"radius":"8px"},"color":{"background":"#f8f9fa"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group has-background" style="border-radius:8px;background-color:#f8f9fa;padding-top:2rem;padding-right:2rem;padding-bottom:2rem;padding-left:2rem">
[グループ内容]
</div>
<!-- /wp:group -->

details（FAQ等）

<!-- wp:details -->
<details class="wp-block-details"><summary><strong>質問</strong></summary>
<!-- wp:paragraph --><p>回答</p><!-- /wp:paragraph -->
</details>
<!-- /wp:details -->

属性変換マッピング

背景・色彩

  • loos/full-wide背景色: {"bgColor":"#ffffff"} + style="background-color:#ffffff" または背景色省略時はstyle="background-color:#f7f7f7"のみ
  • group標準色: {"backgroundColor":"white"} + has-white-background-color クラス
  • groupカスタム色: {"style":{"color":{"background":"#f8f9fa"}}} + style="background-color:#f8f9fa"（モノクロ色のみ）

レイアウト・配置

  • heading中央揃え: {"textAlign":"center"} + has-text-align-center クラス
  • paragraph中央揃え: {"align":"center"} + has-text-align-center クラス
  • カラム数: 3列以上はcolPC指定、2列はcolPC省略
  • group幅指定: {"align":"wide"} で alignwide クラス付与

フォント・サイズ

  • font-size:値 → {"style":{"typography":{"fontSize":"値"}}}
  • 大きなフォント → {"fontSize":"large"} + has-large-font-size クラス

SWELLクラス名体系

独自スタイルクラス

  • is-style-section_ttl – セクションタイトル（見出し・段落両方で使用可能）
  • is-style-check_list – チェックリスト
  • is-style-dent_box – 凹みボックス
  • is-style-border_left – 左ボーダー（section_ttlと併用不可）

ユーティリティクラス

  • u-mb-ctrl u-mb-3 – マージン制御（3, 5, 10, 15, 20, 25）
  • list-flex – フレックスリスト

WordPress標準クラス

  • has-text-align-center – 中央揃え
  • has-white-color – 白文字
  • has-large-font-size – 大きなフォント
  • alignfull – 全幅
  • alignwide – ワイド幅

解析・変換手順

  1. HTMLセクション解析: 構造、スタイル、コンテンツタイプを特定
  2. レイアウトパターン判定: 3つのパターンから適切な構造を選択
  3. 背景色・画像抽出: full-wideとgroupの背景色を分離して設定
  4. レイアウト判定: カラム数を判定し、2列はcolPC省略、3列以上はcolPC指定
  5. コンテンツ変換: 各要素を適切なSWELLブロックに変換
  6. 整合性チェック: JSON属性とHTML出力の一致を確認
  7. 全体構造組み立て: loos/full-wideで囲んで完成

品質チェック項目（必須確認）

□ loos/full-wideにid属性が設定されているか □ セクションタイトルにu-mb-20が設定されているか
□ 見出しに色指定がないか □ レイアウトパターンが正確に判別・実装されているか □ full-wideとgroupの背景色が適切に分離されているか □ モノクロ色のみ使用しているか

【絶対遵守ルール】

  1. 入力されたHTMLセクション1つにつき、必ず1つのloos/full-wideで囲む
  2. loos/full-wideの内部にswell-block-fullWide__inner l-articleを配置
  3. その内部に変換したブロック要素を配置
  4. loos/full-wideは必ず背景色とID属性を設定する（pcPadding + bgColor or style背景色 + id属性）
  5. レイアウトパターンを正確に判別し、適切な構造で実装する
  6. JSON属性とHTML出力の整合性を保つ（不要な属性は記載しない）
  7. カラム数判定：2列はcolPC省略、3列以上はcolPC指定
  8. 基本的にxマージンは3remを設定
  9. 見出しはis-style-section_ttlで統一、level属性必須、色指定禁止
  10. heading中央揃えはtextAlign、paragraph中央揃えはalignを使用
  11. group背景色はモノクロカスタム色の場合style.color.backgroundで指定
  12. paragraphブロックは必ず属性を設定（空属性禁止）
  13. SWELLブロックは改行なしの連続記述（HTMLタグ間に余計な改行・空白禁止）
  14. モノクロベースの色のみ使用、カラフルな色は一切禁止

実行指示: 上記ルールに厳密に従ってSWELLブロックマークアップを出力せよ。特に、レイアウトパターンの正確な判別、loos/full-wideの背景色・ID必須設定、headingの色指定禁止、モノクロベース色制限に注意すること。