SWELLでMarkdownとテンプレ構文を混在させたらどうなる？構文仕様の境界を検証

SWELLのブロックエディターって、Markdownで入力しても段落や表がちゃんと反映される。
それなのに、自分のCIではなぜすべての出力をHTML形式で統一しているんだっけ……？

管理人

いや、これ自分で設計したんだけど。完全に理由を忘れていた。笑

たしかにSWELLはMarkdownにもある程度対応しており、表やリストといった構文ならそのまま貼り付けてもそれなりに動作する。
だが実際に構造的なテンプレート──たとえばSTEPやFAQのような出力パーツを混在させようとすると、途端にブロックエディタの挙動は不安定になる。

SWELLテーマで記事を構築する際、Markdown形式の本文とテンプレート構文（STEPやFAQ）を同一セクション内で使いたい場面は多い。
しかし実際には、これらを混在させた場合にWordPressブロックエディタがどう解釈するかは明確に説明されていない。
この記事では、複数の混在パターンをテストし、SWELLが処理できる構文の境界線を明示的に検証する。

なお本記事は、筆者が自ら設計・運用している記事生成用カスタム命令（CI）に基づいて構成されている。
このCIでは、すべての出力をSWELLテーマで正しく動作するWPブロックエディタ互換のHTML構文（いわゆるSWELLブロック構文）で統一している。
これは、段落・見出し・表なども含めてすべてをWordPressのブロック構文として明示的に出力し、構文解釈の揺れを排除することを目的としている。
Markdownとテンプレ構文の混在は、WP変換時に構造崩壊やクラシック化を引き起こすリスクが高いため、CIの設計段階からHTMLベースでの出力整合性を優先している。

>>>Amazonのお得な最新の情報はここ

サーバー管理者歴17年の筆者が選んだレンタルサーバーはここ

SWELLが受け付ける構文の種類

まず、SWELLテーマがブロックエディタ経由で正しく処理できる構文を整理する。以下は主な要素の分類表である。

実験ケースと結果の概要

以下では、混在構文による表示崩壊の実例を取り上げ、使用構文・表示結果・分析コメントの順で整理する。

テストケース：Markdown段落10行＋STEPテンプレの混在

以下に示すのは、Markdown段落とSTEPテンプレを混在させた構文である。この構文を1つのセクションとしてSWELLブロックエディタに貼り付けた。

じぴ子

注意：この画面からhcbブロック内のコピーボタンを使用してご自分のブロックエディターに貼り付ける場合
HTMLのカッコなどをエスケープ処理したものがコピーされるので普通のコード扱いで表示されちゃいます。
純粋に結果を確認したいなら一旦テキストエディタなどにコピぺしてから、そこからさらに再度コピーして貼り付けると記事にあるような現象を再現できます。

## ChatGPTによる構成案作成手順  

ChatGPTの出力精度はプロンプトの工夫次第で大きく変わります。  
以下は具体的な活用ステップを平文で紹介します。  
あくまで例示なので、読者のニーズに応じてカスタマイズしてください。  
プロンプトの工夫は段階的に行うのが効果的です。  
焦らず、目的ごとに分けて試行することがポイントです。  
とくに構成案を作らせる際には、H2/H3構造の提示が有効です。  
ChatGPTは文脈を前提にしているので、前段の情報が鍵になります。  
無理に情報を詰め込まず、1つずつ試す姿勢が成功に繋がります。  
テンプレート活用も手段の一つとして視野に入れましょう。  
構成に迷ったらまず“何を伝えたいか”を明確にしましょう。

<!-- wp:loos/step -->
<div class="swell-block-step" data-num-style="circle">

<!-- wp:loos/step-item {"stepLabel":"STEP"} -->
<div class="swell-block-step__item">
  <div class="swell-block-step__number u-bg-main">
    <span class="__label">STEP</span>
  </div>
  <div class="swell-block-step__title u-fz-l">目的を明確にする</div>
  <div class="swell-block-step__body">
    <!-- wp:paragraph -->
    <p>どのような記事を作りたいかを整理する。</p>
    <!-- /wp:paragraph -->
  </div>
</div>
<!-- /wp:loos/step-item -->

</div>
<!-- /wp:loos/step -->

この操作により、Markdown段落はクラシックHTMLブロックとして認識され、装飾や改行制御が失われた。STEPテンプレ自体は動作したが、ブロック構造とはみなされず、HTMLの一部として巻き込まれるような表示になった。

以下の画像がその表示例である。

この挙動は、WordPress側が “HTMLコメント付き構文”（テンプレ）と “Markdown由来構文” を同時に解釈できず、全体をクラシックなHTMLブロックと誤認するためと考えられる。

結論：混在を避け、分離構造で設計すべき

本検証により、SWELLテーマでMarkdownとテンプレ構文を混在させると、ブロック構造が崩壊することが明確になった。
テンプレ（STEP／FAQなど）を使用する場合は、そのセクション全体をWPブロック構文で統一する必要がある。
Markdownで書いた草案は、WP化の段階で構文単位に分離し、テンプレ挿入は「本文＋テンプレ」ではなく「段落ブロック→テンプレブロック」として明確に構成すべきである。

筆者の場合、この処理を非常に面倒に感じるので　草案ー推敲までをマークダウン形式　WPへコピペする時には完全にSWELL対応のHTML化して一撃でコピペが完了する方が賢いと判断し冒頭にあるように「全てHTML出力」という形式をデフォルトにしています。

よくある質問