記事制作 · WordPress
MarkdownをWordPressに貼ると表が崩れるときの直し方
豊藏翔太／シンクムーブ株式会社 · 更新
AIと一緒にMarkdownで原稿を作った。見出しも表もある。ところがWordPressに貼ると、表が縦棒の文字列になったり、記事全体が1つのブロックになったりする。
このサイトには、その受け渡しに使うMarkdown→WordPress変換ツールを置いています。原稿の文章を変える前に、WordPressへ渡す形式と貼り付け先を揃えます。
MarkdownとWordPressのブロック形式を分ける
Markdownの表は、縦棒と区切り行で書きます。一方、WordPressのブロックエディターは、表や見出しをそれぞれのブロックとして扱います。Markdownの文字列をそのまま貼ると、環境によっては表として認識されません。
ThinkMoveの変換ツールでは、通常のHTMLと、Gutenberg用のブロックコメントを含むHTMLを出力できます。ブロックとして編集したいときはGutenberg側を使います。
記事全体のコードエディターと、記事中にコードを見せるための「コード」ブロックは別です。コードブロックに貼ると、読者に変換後のコードを見せる記事になってしまいます。
参照：[1] ThinkMove：Markdown→WordPress変換ツール[2] WordPress公式：ブロックの使い方
短い原稿で、見出し・表・リストを一度試す
長い記事をいきなり移す前に、次のサンプルを変換ツールへ貼ってみます。記事タイトルはWordPress側のタイトル欄に入力する想定なので、本文はH2から始めています。
このサンプルは、構造の確認用に作ったものです。見出し1つ、表1つ、リスト1つが、それぞれ別のブロックになるか確認できます。表の列数も揃えてください。
動作確認用のMarkdown原稿
数字は含まない、変換確認専用のサンプルです。
## 公開前に確認すること 記事を貼り付けたら、次の項目を確認します。 | 項目 | 確認する場所 | | --- | --- | | タイトル | タイトル入力欄 | | 表 | 本文の表ブロック | | リンク | プレビュー画面 | - 見出しの階層を確認する - スマートフォン表示を確認する - リンク先を開く
変換した結果は、どこを見ればよいか
今回のサンプルにはH2が1つ、表が1つ、箇条書きが1つあります。表は見出し行を含めて4行・2列、箇条書きは3項目です。変換後も、その数と中身が保たれていることを確認しました。
次の画面は同じ原稿のGutenberg出力です。見出しはwp:heading、表はwp:table、リストはwp:listというブロックとして出力されます。これはWordPressがブロックを区切って読むための形式です。
プレビューの見た目だけを確認して、Markdownの入力欄をコピーし直すと、元の形式へ戻ってしまいます。「Gutenberg」を選び、出力側のコピーボタンから取得するところまで揃えます。
| 原稿の要素 | 確認した出力 | 貼り付け後に見るところ |
|---|---|---|
| H2 1つ | wp:heading | 段落ではなく見出しとして編集できる |
| 表 1つ、4行・2列 | wp:tableとtableタグ | 行・列・見出し・本文が欠けていない |
| 箇条書き 3項目 | wp:listと3つの項目 | 1つの長い段落に潰れていない |
参照：[1] ThinkMove：Markdown→WordPress変換ツール[2] WordPress公式：ブロックの使い方
表は出力できていても、プレビューだけ崩れることがある
この記事の手順を確認したとき、このサイトのプレビューにも問題がありました。表のセルの間隔がなく、箇条書きの記号も表示されていませんでした。下が修正前の実画面です。
調べると、HTMLには4行・2列の表と3つのリスト項目が残っていました。崩れていたのは表示用のスタイルです。プレビューに表の枠・セルの余白・箇条書きの記号を付けると、同じ変換結果が読みやすく表示されました。
このように、原稿の欠落、ブロック形式の問題、見た目のスタイルは分けて確認できます。表が崩れたからといって、すぐ原稿の文章を全部書き直す必要はありません。
Gutenberg形式を、記事全体のコードエディターへ貼る
まず、新しい下書きか、バックアップした下書きで試します。すでに本文がある記事へ貼る場合は、追加位置を確認してから操作してください。既存本文を選択したまま貼ると置き換わります。
WordPressの画面右上にあるメニューからコードエディターへ切り替え、変換後のGutenberg形式を貼ります。その後、ビジュアルエディターへ戻り、表やリストをクリックして別々に編集できるか確認します。
見た目だけでなく、見出しが見出しブロック、表が表ブロックになっているかを見るのがポイントです。単なるHTMLとして表示されることと、ブロックとして編集できることは同じではありません。
- 変換ツールにMarkdown原稿を貼る。
- 出力をGutenberg形式にしてコピーする。
- WordPressの下書きで、記事全体のコードエディターを開く。
- 貼り付けたらビジュアルエディターへ戻す。
- 見出し・表・リストを個別に選択して確認する。
参照：[1] ThinkMove：Markdown→WordPress変換ツール[3] WordPress公式：ビジュアル／コードエディターの切り替え
画像は、変換できてもアップロードされたとは限らない
原稿に  のような相対パスがあると、その画像は自分の作業フォルダにしかない場合があります。HTMLへ変換しても、WordPressのメディアライブラリへ自動でアップロードされるわけではありません。
このサイトの変換ツールは、ローカル相対パスの画像を検出すると警告します。画像をWordPressにアップロードし、公開ページから読めるURLへ差し替えてください。
表についても、結合セル、複雑な入れ子、テーマ固有の装飾は別途調整が必要です。ツールが扱うのは一般的なMarkdownの構造で、すべてのMarkdown方言やWordPressテーマの見た目を再現するものではありません。
| 起きたこと | 確認する場所 |
|---|---|
| 表が縦棒のまま表示される | 出力形式と貼り付け先 |
| 記事全体がコード表示になる | 「コード」ブロックに貼っていないか |
| 画像だけ出ない | メディアへの登録と画像URL |
| 表がスマートフォンからはみ出す | 列数、長い文字列、テーマの表表示 |
| ブロックが無効と出る | カスタムHTMLや手動編集、プラグインとの相性 |
公開前は、文章より先に受け渡しの欠落を確認する
変換後は、見出しの数、表の行列、リンク先、画像の枚数を元の原稿と照合します。文章が読めると安心しがちですが、リンクが落ちたり、脚注が別の場所に移ったりしていないかも見ます。
プレビューはパソコンとスマートフォンの両方で開きます。特に列の多い表は、スマートフォンで読めるかを確認してください。必要なら表を分けるか、列を減らします。
受け渡しが一度通れば、以後は同じ短いサンプルで環境差を確認できます。原稿の内容を直す作業と、WordPressへ移す作業を分けると、どこで崩れたか追いやすくなります。
公開前の確認リスト
WordPressの下書きと元原稿を見比べます。
□ タイトルがタイトル欄にある □ H2・H3の階層と数が一致する □ 表の行数・列数・見出しが一致する □ 箇条書きの項目が抜けていない □ 画像が表示され、代替テキストが入っている □ リンク先が意図したページになっている □ スマートフォンのプレビューで読める
「無効なコンテンツ」と出たら、短い原稿へ戻す
長い原稿を一度に貼って崩れたときは、まずこの記事の短いサンプルで同じ症状が出るか確認します。短いサンプルは通り、本原稿でだけ崩れるなら、表の中の改行、入れ子リスト、HTML直書きなどの差を調べられます。
コードの先頭と末尾を囲む```まで貼ると、それも記事の文字として入ってしまいます。コピーした範囲がGutenbergのコメントから始まっているか、カスタムHTMLブロックではなく記事全体のコードエディターへ貼っているかを確認してください。
この変換ツールは、入れ子リスト・脚注・定義リストなどには対応していません。編集可能な単純な表とリストで渡し、複雑な組み方はWordPress側で整える方が確認しやすくなります。
参照：[1] ThinkMove：Markdown→WordPress変換ツール[2] WordPress公式：ブロックの使い方
手元で使うテンプレート
よくある質問
Markdownを貼るだけでは駄目ですか？
エディターやプラグインによっては変換できますが、表などの対応は一律ではありません。短い原稿で確かめ、うまくいかない場合はGutenberg形式へ変換します。
通常のHTMLとGutenberg形式はどう選びますか？
WordPressのブロックとして個別に編集したいならGutenberg形式を使います。HTMLを必要とする別の貼り付け先では、その仕様に合わせます。
ツールはWordPressに自動投稿しますか？
このツールは原稿を変換してコピーするためのものです。WordPressへのログイン、投稿、画像アップロードは行いません。
出典・確認先
公式情報の確認日：2026-09-11。画面や仕様が変わった場合は、以下の提供元の案内を確認してください。