「WordPressで会話っぽい吹き出しを入れたい。でもプラグインはこれ以上増やしたくない」 「プラグインなしのやり方を調べたら、コピペするCSSとHTMLが出てきた。これを毎回貼るの？」 「貼ってみたら出た。でも2記事目で、もう面倒になった」
3つ目まで来た人は、吹き出しの作り方ではなく「毎回どう入れるか」の話を読んでください。この記事はそこから始めます。
先に結論です。プラグインなしで吹き出しを作る記事はたくさんあって、どれも「このCSSとHTMLをコピペしてください」で説明が終わっています。作り方としては正しいです。ところが実際に運営してみると、詰まったのはCSSではありませんでした。詰まったのは次の2つです。
- 吹き出し1個ごとにHTMLを貼る運用は、記事が10本を超えたあたりで続かなくなる
- アイコン（顔の画像）が出ていない吹き出しは、公開して読者が開くまで誰も気づかない
筆者のブログは現在114記事あって、全記事に吹き出しが入っています。吹き出しの総数は1,743個、1記事あたり平均15個、一番多い記事で30個です。これを1個ずつHTMLで貼っていたら、確実に途中でやめていました。今は本文に「> 社長(困)：」と1行書くだけで、顔つきの吹き出しが出るようにしてあります。
筆者は40代の会社員（非エンジニア）です。プログラムは書けません。この記事では、コピペで作る方法との違いも含めて、「1行書けば出る吹き出し」の作り方と、公開前に壊れを見つける方法を、専門用語を噛み砕いて説明します。
※ 本記事は Claude Code（筆者が使用中のAIアシスタント）が筆者の実体験を元に執筆しています。
この記事はこんな方向け
- 吹き出しのプラグインを入れるか、プラグインなしでやるかで迷っている人
- コピペのCSSで作れたけど、毎回HTMLを貼るのがしんどくなってきた人
- テーマの吹き出し機能を使っているが、テーマを乗り換えたときが不安な人
- 複数のキャラで会話させたいが、どう回せば読みやすいか分からない人
🎬 この記事に登場するキャラ
- 社長 — 筆者本人（40代・副業で複数の事業を運営）
- 凛 — 姉御肌の相棒。甘えを許さない
- 策 — 冷静な軍師。手順に落とす担当
- Claude — AIアシスタント。実測値を出す担当
社長：「吹き出し、プラグインなしでやろうと思ってコピペのCSS貼ったんだよ。ちゃんと出た。」
凛：「で、2記事目で止まったんでしょ。1個ずつHTML貼るのが面倒で。」
社長：「バレてる。1記事に15個も貼るんだぞ。しかもどれがどのキャラか、貼ってる途中で分からなくなる。」
策：「それはCSSの問題ではありません。作り方はできているのに、入れ方が決まっていないだけです。今日はそこを直します。」
Claude：「実測を先に出します。114記事・吹き出し1,743個。1個あたりHTMLが5行あるとして、手で貼ると約8,700行を目視で管理することになります。」
📌 目次（クリックでジャンプ）
1. 【問題提起】プラグインなしの吹き出しでつまずく本当の理由
1-1. 吹き出しの正体は「枝つきの引用ブロック」
まず、吹き出しが何でできているかを噛み砕きます。ネットで出てくるプラグインなしの吹き出しは、ほぼ全部が次の2つの組み合わせです。
| 部品 | 役割 | 読者に見えるもの |
|---|---|---|
| CSS（見た目のルール） | 背景色・枠・顔の画像の位置を決める | 色つきの箱と、左に顔 |
| HTML（1個ずつの中身） | 「この箱はこのキャラのセリフ」と印を付ける | セリフの文字 |
筆者のブログでは、記事の中の「引用ブロック（他の文章を囲む箱）」にキャラ名の印（class）を付けて、その印ごとに色と顔を変えています。「凛の箱はピンクで凛の顔」「策の箱は水色で策の顔」という具合です。
つまり、CSSはキャラの数だけ1回書けば終わりです。114記事あっても、CSSは4キャラぶんで4ブロックしかありません。ここは本当にコピペで済みます。問題は、その次です。
1-2. 1個ずつHTMLを貼る運用は、記事10本で限界が来る
吹き出し1個ぶんのHTMLは、だいたい次のような形になります。
<blockquote class="speech-owner">
<p><strong>社長</strong>：「俺も最初は分からんくてさ。」</p>
</blockquote>
1個なら簡単です。ところが筆者の記事は1記事に平均15個入っています。しかも会話なので、社長→凛→策→社長→凛……と、キャラの印を毎回書き換えながら貼ります。ここで起きたのが次の3つでした。
- 印を間違える：凛のセリフに社長の印を付けて、剃り頭の顔でお姉さんのセリフをしゃべらせた
- 貼り忘れる：普通の引用のまま残って、色も顔も出ない箱が混ざる
- 編集画面で読めない：本文がHTMLだらけになって、セリフの流れが追えなくなる
3つ目が地味に致命的でした。吹き出しは「会話の流れ」が命なのに、HTMLに埋もれて流れを確認できないのです。
凛：「あんたの1回目の記事、私のセリフが社長の顔でしゃべってたわよ。」
社長：「印のコピペを間違えたんだよ……。15個も貼ってると、どれがどれか分からなくなる。」
策：「これは注意力の問題ではありません。人間が15回同じ作業を正確にやる前提の運用が、そもそも無理なんです。」
1-3. テーマの吹き出し機能に任せると、乗り換えのときが怖い
もう1つの選択肢が、テーマ（ブログの見た目の着せ替え）に付いている吹き出し機能です。ボタン1つで入って便利ですが、筆者は使いませんでした。理由はテーマを替えたときに、そのテーマ専用の書き方が全記事に残るからです。
実際、筆者は運営の途中でテーマを乗り換えています。このとき吹き出しが記事の中に「引用ブロック＋キャラの印」というどのテーマでも通じる形で入っていたので、記事そのものは1本も直しませんでした。直したのはCSS側だけです。この話は3-2で具体的に書きます。
2. 【AI導入で変わった】吹き出しを「貼るもの」から「書けば出るもの」に変える
2-1. 発想を変える：本文には「誰が・どの顔で・何を言うか」だけ書く
答えは単純でした。HTMLを本文に書くのをやめて、公開のときに機械に変換させることにしたのです。
筆者が本文に書くのは、これだけです。
> **社長(困)**：「俺も最初は分からんくてさ。」
> **凛(叱)**：「いつまで悩んでるの。さっさとやりなさい。」
> **策(真)**：「まず、いまの記事に吹き出しが何個あるか数えましょう。」
「>」は引用の記号、「社長(困)」がキャラ名と表情、その後ろがセリフです。これを公開の直前に、AIに作ってもらった小さな変換の仕組みがキャラの印と顔の画像つきのHTMLに置き換えます。
この形にしたことで、1-2で挙げた3つの問題が全部消えました。
| 手でHTMLを貼っていた頃 | 1行で書くようにした後 |
|---|---|
| 印のコピペを間違える | キャラ名を書くだけ。印は機械が付ける |
| 貼り忘れて素の引用が残る | 「>」で始まる行は全部変換される |
| 本文がHTMLで読めない | 本文は会話の台本のまま。流れが見える |
2-2. 非エンジニアがAIに頼むときの言い方
筆者はプログラムが書けないので、この変換の仕組みは Claude Code（AIアシスタント）に作ってもらいました。頼んだ言い方はこうです。
「本文の中で、
> **社長(困)**：のように書いてある引用を、キャラごとに違う印（class）を付けた吹き出しに変換してほしい。カッコの中の『困』『笑』『真』は表情で、表情ごとに用意した顔の画像を使い分けたい。カッコが無いときは、いつもの顔でいい。」
コードの用語は1つも使っていません。「印を付けたい」「表情で顔を変えたい」「無いときは既定の顔」という、やりたいことの箇条書きです。AIはこれで動くものを作ってくれます。
ここで1つコツがあります。「表情が書いてないときはどうするか」を最初から決めておくことです。決めておかないと、表情の記号を書き忘れた吹き出しが、顔なしで出ます。この「書き忘れ」が後で一番の落とし穴になるので、3-1で実測を出します。
2-3. 会話の「型」を先に決めておく
仕組みができても、会話の中身がバラバラだと読みにくいままです。筆者は次のルールを決めてから書くようにしました。
- 1つの会話は3〜4人の掛け合いにする（1人がしゃべって終わり、はNG）
- 役割を固定する：社長が素朴な疑問→凛が「そのままじゃダメ」と檄→策が「こうすれば解決」→必要ならClaudeが実測を出す
- 記事の冒頭・各大見出しの中・まとめの直前に入れる。1記事で最低5か所
この「型」があるので、書くときに迷いません。吹き出しはデザインではなく、読者を次の段落へ連れていく道具として使っています。
社長：「型を決めてから、書くのが速くなったんだよな。誰が何を言うか、悩まなくなった。」
凛：「当然でしょ。セリフを考える前に、役割が決まってるんだから。」
策：「補足すると、読者にとっても効きます。社長のセリフを読めば『自分と同じ疑問だ』と分かり、策のセリフまで読めば答えが出る。吹き出しの並びが、そのまま記事の縮図になっています。」
3. 【具体例】114記事1,743個を運用して分かった3つのこと
実際にこの方式で運用した実測値を出します。集計対象は公開済みと予約中を合わせた114記事です。
3-1. 実測：吹き出し1,743個・顔なしは公開前に機械で見つける
| 項目 | 実測値 |
|---|---|
| 記事数 | 114記事（全記事に吹き出しあり） |
| 吹き出しの総数 | 1,743個（1記事あたり平均15個・最多30個） |
| キャラ別 | 社長584・策507・凛493・Claude159 |
一番大きかった気づきは、「表情の記号を書き忘れると、顔なしの吹き出しになる」という事故です。筆者の仕組みでは、カッコの表情から顔の画像を選ぶので、**凛**： と書いてカッコを落とすと、色の箱だけ出て顔が出ません。
しかも、これは編集画面では気づけません。文字は全部出ているからです。読者がスマホで開いたときに初めて「あれ、この箱だけ顔がない」となります。実際に筆者は公開済みの記事2本で、この顔なしを後から見つけました。
そこで、公開前に機械で数える工程を1つ足しました。やることは単純で、「吹き出しの数」と「顔の画像が付いている吹き出しの数」を数えて、一致しなければ公開を止めるだけです。数が合わない＝どこかで表情の記号を落としている、と分かります。この工程を入れてから、顔なしの吹き出しは新しい記事から出ていません。
3-2. テーマを乗り換えたら、顔の横に「別のマーク」が出た
筆者はテーマを乗り換えたときに、1つだけ想定外がありました。新しいテーマの引用ブロックには、もともと引用符のマークが飾りで付いていたのです。筆者の吹き出しは引用ブロックを土台にしているので、顔の画像の上に引用符のマークが重なって表示されました。
直し方は、CSSに「この印の付いた箱には、テーマの飾りを出さない」という1行を足すだけでした。記事本文は1本も触っていません。1-3で「テーマの機能に任せなかった」と書いた理由がここです。114記事の中身がどのテーマでも通じる形だったので、乗り換えの修正はCSS側の数行で済みました。
ちなみにこのCSSは、テーマ本体ではなく子テーマ（テーマの上に重ねる自分用の設定置き場）に書いています。テーマ本体に書くと、テーマの更新で消えることがあるからです。
3-3. スマホでは「文字が顔に食い込む」のが最初の壁だった
もう1つはスマホの表示です。パソコンで見ると綺麗なのに、スマホで見るとセリフの文字が左の顔に食い込んでいました。
原因は、箱の左側に顔ぶんの余白を取っていなかったことです。顔の画像を56ピクセル（だいたい親指の爪くらい）で置いているので、左の余白を80ピクセルに固定し、箱の高さも顔より低くならないように最低76ピクセルを指定しました。数字はブログの文字サイズによって変わりますが、「顔の幅＋少し」の余白を左に取る、と覚えておけば大丈夫です。
Claude：「実測を整理します。1,743個のうち、顔が出ていなかったのは公開後に見つけた2記事ぶん。公開前に数える工程を入れてからは0個です。」
社長：「2記事で済んだのは、たまたま早く気づいたからだよな。数えてなかったら、いま何個顔なしがあるか分からん。」
凛：「そう。壊れは音を立てないの。だから数えるのよ。」
策：「そして、テーマ乗り換えの修正がCSS数行で済んだのも、記事の中身をテーマに依存させなかったからです。作り方の選択が、1年後の手間を決めます。」
4. 【じゃあどうやる？】プラグインなしで吹き出しを「1行で出す」5ステップ
ここからは手順です。CSSのコピペで作る方法との違いは、Step 3以降にあります。
Step 1. キャラの数だけ、印と色を決める
まず、登場させるキャラを決めます。筆者は4人ですが、最初は2人で十分です。キャラごとに印の名前（例：speech-owner）と、箱の色・枠の色・顔の画像を決めて、1枚の表にしておきます。この表が、CSSと変換の仕組みの両方の元になります。
Step 2. CSSを子テーマに書く（ここはコピペでOK）
Step 1の表をもとに、キャラごとにCSSを書きます。ここは世の中の「プラグインなし吹き出し」の記事と同じで、コピペで済む部分です。書く場所だけ注意してください。テーマ本体ではなく子テーマ、もしくは管理画面の「追加CSS」に入れます。テーマの更新で消えない場所、が条件です。
ここで1行だけ足しておくと後で助かるのが、「テーマ側の引用の飾りを出さない」指定です。3-2の引用符マークの重なりは、これで防げます。
Step 3. 本文の書き方を「1行」に決める
ここが分かれ道です。本文にHTMLを貼るのをやめて、「> キャラ名(表情)：セリフ」という1行の書き方に統一します。表情の記号は、筆者は「笑・驚・困・真・怒・叱・呆・感」など10種類にしています。多すぎると自分が覚えられないので、最初は3つ（笑・困・真）で十分です。
カッコを書き忘れたときの既定の顔も、ここで決めます。「無ければ笑顔」と決めておけば、書き忘れても顔なしにはなりません。
Step 4. 変換の仕組みをAIに作ってもらい、公開の工程に入れる
Step 3の1行を、Step 1の印つきHTMLに変換する仕組みを Claude Code に作ってもらいます。頼み方は2-2の通りです。大事なのは、この変換を「公開の工程」に組み込むこと。「思い出したら変換する」にすると、思い出さなかった記事が素の引用のまま公開されます。筆者は「本文を書き終えたら、変換して、ブログに送る」までを1つの流れにしています。
Step 5. 公開前に、吹き出しの数と顔の数を数える
最後に、吹き出しの数と、顔の画像が付いている数を数えて、一致しなければ公開しないという関門を入れます。3-1の「顔なし」を防ぐのはこの工程だけです。数えるのは機械なので、1,743個あっても数秒で終わります。
社長：「また『最後に数える』か。目次のときも、アイキャッチのときも言ってたな。」
凛：「同じよ。まとめてやる作業のこわいところは、作業が違っても同じ。壊れは静かに残るから、数える。」
策：「補足すると、5つのうち吹き出しを作っているのはStep 2だけです。残りの4つは、続けられる形にするための工程です。作り方だけ知っても、114記事は回りません。」
5. よくある質問（FAQ）
Q. プラグインを使うのと、どちらが正解ですか？ A. 記事数が少なくて、キャラも1〜2人なら、プラグインでもテーマの機能でも十分です。この記事の方式が効いてくるのは、記事が増えて手作業が限界になったときと、テーマを乗り換えるときです。
Q. コピペのCSSとHTMLだけでは、ダメですか？ A. ダメではありません。作り方としては正しいです。しんどくなるのは「1個ずつHTMLを貼る」部分なので、そこだけ「1行で書いて変換する」に替えれば、CSSはそのまま使えます。
Q. 顔の画像は何枚必要ですか？ A. 最初はキャラ1人につき1枚で十分です。表情ごとに分けるのは、書き慣れてからで構いません。筆者も最初は1枚から始めて、あとから表情を足しました。
Q. 表情の記号を書き忘れたら、どうなりますか？ A. 仕組みによります。「無いときは既定の顔」を決めていれば、いつもの顔で出ます。決めていないと顔なしになるので、Step 3で必ず既定の顔を決めてください。そのうえでStep 5の数える工程を入れておけば、公開前に見つかります。
Q. 既に公開している記事にも、あとから入れられますか？ A. 入れられます。ただし公開済みの本文を書き換える作業になるので、先にバックアップを取り、まず1本だけ試して表示を確認してください。いきなり全記事に流さないでください。
Q. スマホで文字が顔に重なります。 A. 箱の左に顔ぶんの余白が足りていません。顔の幅＋少し（筆者は顔56ピクセルに対して余白80ピクセル）を左に取り、箱の最低の高さも顔より少し大きく指定してください（3-3）。
6. まとめ｜吹き出しは「作り方」より「入れ方」で決まる
社長：「コピペで作れるところまでは、ネットの記事で合ってたんだな。」
凛：「合ってたわよ。足りなかったのは、その後の114記事ぶんの入れ方。」
策：「そして、テーマに依存しない形で入れておいたから、乗り換えのときに記事を1本も直さずに済みました。最初の作り方の選択が、1年後の手間を決めます。」
Claude：「実測を再掲します。114記事・吹き出し1,743個・1記事平均15個。公開前に数える工程を入れてから、顔なしの吹き出しは0個です。」
この記事で伝えたかったことは3つです。
- CSSはキャラの数だけ書けば終わり。コピペで正しい。しんどいのは1個ずつHTMLを貼る運用のほう
- 本文には「> キャラ名(表情)：セリフ」の1行だけ書き、公開の工程で変換させる。印の間違いも貼り忘れも消える
- 顔なしの吹き出しは編集画面では気づけない。公開前に「吹き出しの数＝顔の数」を機械で数える
プラグインを使うかどうかは、正直どちらでもいいと思っています。ただ、吹き出しを「毎回貼るもの」だと思っている間は、記事が増えるほどしんどくなります。吹き出しは貼るものではなく、書けば出るものにできます。そこだけ先に変えておくと、あとが楽です。
次に読むべき記事
- Claude Code副業の始め方と実践事例 — この記事の前提になっている、AIに繰り返し作業を任せる考え方の総まとめ
- Claude CodeでWordPressに記事を自動投稿する方法 — 本記事の「公開の工程」の全体像。吹き出しの変換はこの流れの一部
- WordPressで目次をプラグインなしで作る方法 — 同じく「毎回貼る」をやめて公開の工程に入れた、目次側の話
- WordPressのアイキャッチを一括設定する方法 — 「入っていない記事を機械で数える」という同じ考え方の別作業
- WordPressで一括置換する方法 — 公開済みの本文をまとめて書き換えるときの注意点（FAQで触れた話）
※ 本記事は Claude Code（筆者が使用中のAIアシスタント）自身が、筆者の実体験を元に執筆しています。 ※ 本記事にはアフィリエイトリンクが含まれます。
