吹き出し・枠・マーカー・ボタン・FAQ。WordPressのテーマ「SWELL」の装飾は、AIに「SWELLの装飾で書ける?」と聞いて、テスト記事を1本書かせ、崩れていない部品だけを「型集」に固定してもらうと、次の記事から自動で付きます。 あなたがやるのは、吹き出しを登録することと、プレビューを見て「崩れている」か「全部OK」かを言うことだけ。コードを読む必要も、コピーする必要もありません。 Claude CodeでもChatGPTアプリのCodexでも同じ頼み方です。
この手順を作った人が、実際に運用している数字です。
人・AI・WordPressの分担はこれだけです。
ポイントは、AIが自分で書いたコードのうち、あなたのサイトで崩れずに出たものだけを型集にすることです。AIはSWELLの装飾の書き方を知っていますが、あなたのサイトの吹き出しの番号と、SWELLの版ごとの細かい違いは知りません。だから一度テストして、通った部品だけを固定します。
<!-- wp:… --> というブロックのコードでできています。管理画面の右上「⋮」→「コードエディター」で見られますが、この手順ではAIが裏口から読むので、あなたは開かなくて構いません。前提は、WordPressにAIが繋がっていること(別の1枚「ChatGPT(Codex)でWordPressに下書き投稿」または「AIエージェントでWordPressに半自動投稿」)。繋がっていないときは、手順3の壁にある「コードを自分で渡す道」で同じことができます。
手順1:SWELLに吹き出しを登録する(プロンプト無し・管理画面だけ・既にあれば飛ばす)
手順2:プロンプト①「装飾テストを作って」を貼る → AIが自分で調べて、装飾を並べたテスト記事を下書きに入れる
手順3:プレビューを見て、崩れていればプロンプト③「◯番目が崩れている」。全部きれいなら「全部OK」→ AIが型集を保存
毎回:原稿と一緒にプロンプト②「装飾して入れて」を貼る → プレビューで見て公開
「ふきだし」の一覧に4つ並んでいれば完了です。番号は覚えなくて大丈夫。次の手順でAIが自分で読みに行きます。
WordPressに繋いだフォルダ(WordPress編なら blog)のチャット欄に、そのまま貼って送ります。書き換える所はありません。
このサイトのWordPressテーマはSWELLです。SWELLの装飾(吹き出し・キャプション付きの枠・マーカー・ボタン・FAQ・表・リスト)を、ブロックのコードで書けますか。書けるなら、次の順で進めてください。分からない所は推測で書かず、私に聞いてください。 1. WordPressに繋いである道具で、裏口から「ふきだし」の一覧を読む(GET /wp-json/wp/v2/swell-balloon)。番号(balloonID)と名前を控えて、私に見せる。1つも無ければ「ふきだしが登録されていません」と言って止まる。 2. 「装飾テスト(AI用)」という題名の記事を、下書きで1本作る。中身は、装飾を1つずつ、見出し(H2)に装飾の名前を付けて並べる。 ・吹き出し(登録されている番号ごとに1つ。左向き・右向きも1つずつ) ・ポイントの枠(キャプション付きの枠。中は箇条書き) ・注意の枠(色違いのキャプション付きの枠) ・マーカー(文の一部に) ・番号つきリスト/チェックリスト ・表(2列×3行) ・ボタン(リンク先は https://example.com) ・FAQ(Q&Aを2つ) 文章は何でもよい。コードはSWELLの正しいブロック記法で、属性(波かっこの中)を省かない。枠の中の文章は必ず wp:paragraph か wp:list で包む。 3. 入れたら、管理画面で見る場所(URL)を教えて。私がプレビューを見て、崩れている装飾があれば「◯番目が崩れている」と伝えます。 4. 私が「全部OK」と言ったら、その記事のコードを裏口から読み直し、装飾ごとに切り出して「装飾の型集.md」をこのフォルダに保存する。これからの記事は、この型集の部品だけを使い、中の文章だけ差し替える。 公開(publish)は絶対にしない。
AIがふきだしの一覧(番号と名前)を見せ、「装飾テスト(AI用)」が下書きに入り、管理画面のURLが返ってくれば手順2は完了です。
手順1がまだか、「SWELL設定 → ふきだし」の画面を一度も開いていないかのどちらかです。開くまでは裏側の保存場所が作られないので、AIには「無い」と見えます。
管理画面で「SWELL設定 → ふきだし」を開いて登録し、AIに「登録した、もう一度」と言ってください。
プレビューで「◯番目(装飾の名前)」が崩れています。(管理画面で「想定されていないか無効なコンテンツ」と出た場合もこれを貼る) 「復旧を試みる」は押しません。その装飾のコードを見直して(属性が抜けていないか・引用符が二重引用符か・枠の中が wp:paragraph で包まれているか・ふきだしの番号が一覧にあるか)、下書きを更新してください。直した箇所を私に分かる言葉で教えて。 2回直しても崩れる装飾は、いったん外して、その旨を教えてください。
フォルダに 装飾の型集.md ができ、AIが「吹き出し・驚き(balloonID 2)/ポイントの枠/…」のような一覧を返せば、準備は全部です。テスト記事は下書きのまま残しておきます(あとで装飾を足すとき、ここに足します)。
AIがコードを「それらしく」書いたときに起きます。この手順を作った環境で多かったのは、FAQのブロックの属性(波かっこの中)を省いた場合と、枠の中の文章を <!-- wp:paragraph --> で包まなかった場合です。
「復旧を試みる」は押さず、プロンプト③を貼ってください。1〜2回で直ることがほとんどです。
SWELLの更新で記法が変わっている装飾は、AIの知識だけでは合わないことがあります。そのときは、あなたのサイトで実際に動いているコードを渡すのが一番確実です。
管理画面で「装飾テスト(AI用)」を開き、崩れている装飾だけをブロックエディターで作り直して下書き保存。AIに「◯番目は私が管理画面で作り直した。裏口から読み直して、そのコードを型集に使って」と言います。WordPressに繋いでいない人は、右上の「⋮」→「コードエディター」でその部分のコードをコピーして、チャットに貼ってください。
この手順を作った人のサイトでは、「吹き出しは2つ続けない」「1つの見出しに枠は1つ」「マーカーは1段落に1か所」を決めています。テスト記事に並べる装飾は8〜10種類あれば十分です。
プロンプト②に、その決まりを入れてあります。増やしたくなったら、AIに「テスト記事に◯◯を足して、型集も更新して」と言えば足せます。
商品リンクのプラグイン(ポチップなど)や、目次プラグインの見た目は、SWELLのブロックとは別のコードです。混ぜると、AIが区別できずに崩れやすくなります。
型集にはSWELLの装飾だけ。プラグインの部品は、あとで別のテスト記事として足せます。
原稿(ふつうの文章で構いません)をチャットに貼って、その下にこう付けます。文体を覚えさせたい場合は、好きな記事を2〜3本先に渡して「この文体で」と一言添えます。
上の原稿を、「装飾の型集.md」の部品だけを使って装飾し、下書きで入れて。 装飾のルール: ・見出し(H2)の最初か最後に、吹き出しを1つ(表情は内容に合わせる。2つ続けない) ・要点は「ポイント」の枠、注意は「注意」の枠。1つの見出しに枠は1つまで ・大事な一言はマーカー。1段落に1か所まで ・手順は番号つきリスト、比べるものは表 ・最後にFAQを3問(FAQのコードは型集のまま。属性を消さない) 入れたら管理画面のURLを教えて。公開はしないで。
テスト記事と同じ見た目の装飾が、原稿の内容に合わせて付いていれば成功です。2本目からは、装飾の指示は要りません。「型集で装飾して下書きに」の一言で同じ形に仕上がります。
| 見たいもの | 場所 |
|---|---|
| 型集 | WordPressに繋いだフォルダの中の 装飾の型集.md。AIに「型集の一覧を見せて」と言えばチャットで見られます。開いて編集しても構いませんが、コードは触らないほうが安全です |
| テスト記事 | 管理画面 → 投稿 → 下書き → 「装飾テスト(AI用)」。装飾を足したいときは、AIに「テスト記事に◯◯を足して、型集も更新して」 |
| 吹き出しの番号 | 「SWELL設定 → ふきだし」の一覧。型集の最初にある対応表と同じ並びです |
| 装飾が崩れていないか | 下書きの「プレビュー」。赤い帯(無効なコンテンツ)が出たらプロンプト③ |
| やり方 | 向いている人 | この手順との違い |
|---|---|---|
| この手順(AIが書く → テストで確かめる → 型集に固定) | 装飾つきの記事を続けて出す人 | 人が作るものは無い。崩れた所を一言伝えるだけで、以後は原稿を渡すだけ |
| 毎回「SWELLの装飾で書いて」と頼む(型集なし) | 試しに1本だけの人 | 1本目は同じ。ただし会話が変わると直した所を忘れ、同じ崩れが再発する。吹き出しの番号も毎回教える必要がある |
| 自分で見本の記事を作ってコードを渡す | WordPressにAIを繋いでいない人/どうしても崩れる装飾がある人 | 確実だが、管理画面で装飾を1つずつ作る手間がある。手順3の壁に書いてあります |
| 装飾を自分で後から付ける | 月1本の人 | AIは文章だけ。1本ごとに管理画面で10〜20分の作業が残る |
この手順自体は無料です。必要なのは、SWELL(購入済みのはず)と、AIエージェント(Claude CodeかChatGPTのCodex)が使える契約だけ。追加のプラグインは要りません。
覚える必要はありません。「何が動いているか知りたい」ときだけどうぞ。
| やりたいこと | 裏側 |
|---|---|
| 見本のコードを読む | GET /wp-json/wp/v2/posts/記事ID?context=edit の content.raw(合鍵が要る。見た目のHTMLではなくブロックのコードが返る) |
| 吹き出し | <!-- wp:loos/balloon {"balloonID":"2"} -->。番号は「SWELL設定 → ふきだし」の登録順 |
| キャプション付きの枠 | <!-- wp:loos/cap-block {"dataColSet":"col1","className":"is-style-inner"} -->。中の文章は必ず wp:paragraph か wp:list で包む |
| FAQ | 親 wp:loos/faq と子 wp:loos/faq-item。属性を省くと無効ブロックになりやすい |
| ボタン | wp:loos/button(色・サイズ・is-style-btn_shiny などの形は属性で決まる) |