「Claude Codeに投稿してもらった記事が、編集画面でエラーになっている……」「ブロックエディターとかGutenbergとか、そもそも何のこと？」
WordPressの記事は見た目どおりの文章が保存されていると思いがちなので、ブロックの話が出てくると戸惑ってしまいますよね。
結論から言うと、WordPressの記事は「ブロック」という部品の組み合わせで保存されていて、その部品の書き方には決まった形があります。Claude Codeに記事を投稿してもらうときは、その形を推測で書かせず、投稿後に確認する仕組みを作っておくことが大切です。この記事では、Gutenberg（ブロックエディター）の基本と、初心者がつまずきやすいポイント、Claude Codeに任せるときの注意点を解説します。
- Gutenberg（ブロックエディター）とブロックの仕組みが分かる
- ブロックでつまずきやすいポイントと、その対処が分かる
- Claude Codeにブロックを書いてもらうときの注意点と、確認方法が分かる
プレビューでは普通に見えるのに、編集画面を開くとエラーが出ていて、びっくりしました……。
私のブログでも、同じようなことがありました。ブロックの仕組みを少し知っておくだけで、原因の見当がつくようになりますよ。
- 国立大学卒のサラリーマン
- 新卒でJTCに入社するも、新入社員研修中にFIREを決意。副業ブログを始めるが、収益が伸びず挫折。いつしかブログは放置。
- Claude codeと出会い、放置していたブログを久々に動かしてみると、できることの多さに驚く。収益も面白いほど増加。
- Claude codeで副業ブログを動かすノウハウを発信することで、さらに良い使い方が見えてくるのではないかと思い、本ブログを開始。
Gutenbergブロックとは
Gutenberg（グーテンベルク）は、WordPressの標準の編集画面である「ブロックエディター」の開発プロジェクトの名前です。ブロックエディターでは、段落、見出し、表、画像などを、1つ1つの「ブロック」という部品として組み合わせて記事を作ります。
画面上では普通の文章に見えますが、保存されている本文には、ブロックの始まりと終わりを示す「目印」が入っています。たとえば段落は、次のような形で保存されています。
| 部分 | 保存されている形 | 意味 |
|---|---|---|
| 始まりの目印 | <!-- wp:paragraph --> | ここから段落ブロックが始まる |
| 中身 | <p>本文の文章</p> | 実際に表示される文章 |
| 終わりの目印 | <!-- /wp:paragraph --> | ここで段落ブロックが終わる |
この目印は、編集画面の右上にあるメニュー（縦に3つ並んだ点）から「コードエディター」に切り替えると、実際に見ることができます。
テーマ独自のブロックもある
WordPressに最初から入っているブロックのほかに、テーマやプラグインが追加するブロックもあります。たとえばSWELLには、囲み枠や吹き出し、ブログパーツなどの独自のブロックがあります。これらは、そのテーマを使っているときだけ正しく表示されるブロックです。
Gutenbergブロックでつまずきやすいポイント
| つまずきやすいポイント | 起きること | 対処 |
|---|---|---|
| ブロックの目印がない | 編集画面で、記事全体が1つの「クラシック」ブロックとして表示され、編集しにくくなる | 本文をブロックの目印つきの形で書き直す |
| 終わりの目印の閉じ忘れ | 本文が崩れたり、重複して表示されたりすることがある | 始まりと終わりの目印が、すべて対応しているか確認する |
| 保存されている形が想定と違う | 「このブロックには、想定されていないか無効なコンテンツが含まれています」と表示される | 正しい形で書き直す。編集画面に「ブロックのリカバリーを試行」などの選択肢が出ることもある |
| テーマ独自のブロックの中身を書き換える | 表示が崩れたり、エラーになったりする | 自分で作ったお手本と同じ形にそろえる |
エラーの画面に表示される選択肢の名前は、WordPressのバージョンによって異なることがあります。
実際に起きたこと
私が運営している別のブログでは、表のブロックの終わりの目印を閉じ忘れたことが原因で、記事の本文が丸ごと重複して崩れてしまったことがありました。また、このサイトでは、SWELLの囲み枠の色を変えようとしてブロックのHTMLに独自の指定を書き足したところ、「無効なコンテンツ」のエラーが出ました。
SWELLの吹き出しのブロックでは、中身に独自の囲みを足すと、表示のときに囲みが二重になって崩れることが、このサイトでの検証で分かっています。吹き出しのように、表示するときにテーマ側で形を組み立てるブロックは、中身を最小限にしておく必要があります。
Gutenbergブロックの生成をClaude Codeに任せる際の注意点
Claude Codeは、ブロックの目印つきの本文を書くのが得意です。ただし、次の点に気をつけると、トラブルを大きく減らせます。
- 「ブロックの目印つきで書く」とルールにする：CLAUDE.mdに、段落や見出し、表などを必ずブロックの形式で書くよう明記しておく
- テーマ独自のブロックは、お手本を見せる：SWELLの囲み枠や吹き出しなどは、まず自分で編集画面から1つ作って下書き保存し、その本文を読ませてから同じ形で書いてもらう
- 書き方をCLAUDE.mdにまとめてもらう：お手本から分かったブロックの書き方を、CLAUDE.mdに記録しておいてもらう。次からは毎回同じ形で書いてくれる
- ブロックの中身に、推測で装飾を足させない：色などを変えたいときは、まず編集画面の設定から自分で変更し、保存された形を確認してから真似してもらう
SWELLのブロックを使ってもらうコツは、SWELLの記事でも紹介しています。
Gutenbergブロックの投稿後の確認方法
ブロックのトラブルは、見た目だけでは気づきにくいものです。投稿したあとは、次の順番で確認しましょう。
| 確認すること | やり方 |
|---|---|
| 送った本文が、そのまま保存されているか | Claude Codeに「送った本文と、WordPressに保存された本文が完全に一致しているか確認して」と頼む |
| ブロックの目印が正しく対応しているか | Claude Codeに「始まりと終わりの目印が、すべて対応しているか確認して」と頼む |
| 編集画面でエラーが出ていないか | 自分で編集画面を開き、エラーの表示がないか見る |
| 見た目が崩れていないか | プレビューを、パソコンとスマホの両方の表示で確認する |
編集画面で保存すると、本文の書き方が変わることがある
覚えておきたいのが、自分で編集画面を開いて保存すると、見た目は同じでも、保存される本文のHTMLの書き方が少し変わることがあるという点です。このサイトでも、編集画面で手を入れた記事は、見出しや表のHTMLに情報が自動で追加されたり、改行の位置が変わったりしていました。
そのため、「送った本文と完全に一致しているか」の確認は、Claude Codeが投稿した直後に行いましょう。編集画面で保存したあとの記事を直すときは、作業フォルダのファイルではなく、WordPressから最新の本文を読み込んでもらうのが安全です。
Gutenbergブロックに関するよくある疑問
Q. 「ブロックのリカバリーを試行」を押しても大丈夫ですか？
A. 押すと、WordPressがブロックを想定の形に直そうとします。うまく直ることもありますが、設定していた装飾などが変わってしまう場合もあります。押したあとはプレビューで見た目を確認し、おかしければリビジョンから元に戻しましょう。テーマ独自のブロックの場合は、お手本の形でClaude Codeに書き直してもらうほうが確実です。
Q. 昔ながらの「クラシックエディター」に戻したほうが簡単ですか？
A. SWELLの囲み枠や吹き出しなどは、ブロックエディターで使う前提の機能です。このサイトでは、ブロックエディターのまま、Claude Codeにブロックの形式で書いてもらう運用にしています。ルールとお手本を用意しておけば、ブロックの形式でも困ることはほとんどありません。
Q. 広告のコードのような、HTMLをそのまま入れたいときは？
A. 「カスタムHTML」ブロックを使います。コードを書き換えずに、そのままの形で残せます（アフィリエイトリンクの設置の記事を参照）。
Gutenbergブロック、まとめ
この記事では、Gutenberg（ブロックエディター）の仕組みと、Claude Codeにブロックを書いてもらうときの注意点を解説しました。ポイントを振り返っておきます。
- WordPressの記事は、始まりと終わりの目印がついた「ブロック」で保存されている
- 目印の閉じ忘れや、想定外の書き方は、表示の崩れやエラーの原因になる
- テーマ独自のブロックは、自分で作ったお手本の形を読ませてから書いてもらう
- 投稿直後に本文の一致を確認し、編集画面とプレビューでも見た目を確かめる
このカテゴリ（困ったら）の記事一覧は、困ったときのまとめ記事で紹介しています。
