Cocoonの吹き出しの使い方｜登録方法と、記事への入れ方、原稿から自動で作る方法

公開日: 2026年10月14日 ／ カテゴリ: WordPress入稿 ／ 執筆: エラバレル

「Cocoonで会話風の吹き出しを使いたいけれど、どこで登録すればいいのか分からない」「記事を入稿するたびに吹き出しを1つずつ作り直していて、時間がかかる」。無料のWordPressテーマ「Cocoon」を使っている人から、よく聞く悩みです。

先に結論をお伝えします。Cocoonの吹き出しは、管理画面の「Cocoon設定」の中にある「吹き出し」で人物（アイコンと名前）を登録し、記事の編集画面でCocoonのブロックから呼び出して使います。登録は最初に1回すれば、あとは記事ごとに選ぶだけです。

ただし、記事の数が増えると、原稿から吹き出しを1つずつ作り直す作業が負担になります。この記事では、吹き出しの登録から記事への入れ方、うまく表示されないときの確認、読みやすい使い方のコツまでを手順で解説し、最後に、Googleドキュメントの原稿に書いた指定から吹き出しを自動で作る方法も紹介します。

Cocoonの吹き出しとは？

Cocoonは、日本で広く使われている無料のWordPressテーマ（サイトのデザインと機能をまとめたひな形）です。Cocoonには、人物のアイコンの横に、マンガのような吹き出しで文章を表示する機能が最初から入っています。プラグインを追加しなくても使えるのが特徴です。

吹き出しは、次のような場面でよく使われます。

• 読者の疑問を「読者役」の人物に言わせ、筆者役が答える
• 専門家や担当者のひと言を、本文と区別して見せる
• 長い説明の途中に、要点を会話で入れて読みやすくする

Cocoonの吹き出しは、「人物の登録」と「記事への挿入」の2段階になっています。先に、アイコン画像・名前・吹き出しの見た目などを「人物」として登録しておき、記事ではその人物を選んでセリフを書く、という流れです。毎回アイコン画像を選び直す必要がないので、同じ人物を何度も登場させるのに向いています。

吹き出しを登録する手順

まずは、吹き出しに使う人物を登録します。WordPressの管理画面で作業します。

1. WordPressの管理画面にログインします。
2. 左側のメニューから「Cocoon設定」を開き、その中の「吹き出し」を選びます。
3. 吹き出しの一覧が表示されます。Cocoonのバージョンによっては、見本の吹き出しが最初からいくつか登録されています。
4. 「新規追加」を押します。
5. タイトル・名前・アイコン画像などの項目を入力します（各項目の意味は次の章で説明します）。
6. 画面下のボタンで保存します。
7. 一覧に戻り、登録した吹き出しが表示されていることを確かめます。

見本の吹き出しが登録されている場合は、それを開いて中身を書き換える方法でもかまいません。ただし、見本の画像を自分のサイトの人物として使い続けるより、自分で用意したアイコンに替えたほうが、サイトらしさが出ます。

登録の各項目の意味と決め方

吹き出しの登録画面にある主な項目を、表にまとめました。画面の項目名は、Cocoonのバージョンによって少し変わることがあります。

名前とタイトルは分けて考える

「タイトル」は管理画面の中だけで使う名前で、「名前」は読者に見える名前です。たとえば、同じ「筆者」を左向きと右向きの2つ登録しておきたいときは、タイトルを「筆者（左）」「筆者（右）」と分け、名前はどちらも「筆者」にしておくと、記事を作るときに迷いません。

アイコン画像の選び方

アイコン画像は、WordPressのメディアライブラリから選びます。まだ画像をアップロードしていない場合は、選ぶ画面の中でパソコンからファイルをアップロードできます。管理画面の「メディア」から先にアップロードしておき、あとで選ぶ方法でもかまいません。ファイル名は「icon-writer.png」のように、あとから見て何の画像か分かる名前にしておくと、差し替えるときに探しやすくなります。写真を使う場合は、顔が真ん中に来るように、あらかじめ正方形に切り抜いておくと安心です。イラストを使う場合は、ほかのサイトの画像を勝手に使わず、自分で用意したものか、利用条件を確認した素材を使ってください。

記事に吹き出しを入れる手順

人物を登録したら、記事の編集画面で吹き出しを入れます。ここでは、WordPressの標準の編集画面であるブロックエディタでの手順を説明します。

1. 投稿の編集画面を開きます。
2. 吹き出しを入れたい位置で、左上の「＋」（ブロック挿入）を押します。
3. 一覧の中から、Cocoonのブロックのまとまりにある「吹き出し」を選びます。見つからないときは、「すべて表示」を押すか、検索欄に「吹き出し」と入れて探します。
4. 吹き出しのブロックが追加されたら、右側の設定欄で、登録した人物を選びます。
5. 吹き出しの中に、セリフを書きます。
6. プレビューで、アイコン・名前・向きが意図どおりかを確かめます。

吹き出しの中のセリフは、ふつうの段落と同じように、太字やリンクを付けることもできます。ただし、吹き出しの中で装飾を使いすぎると、どこが大事なのかがかえって分かりにくくなるので、強調は1つの吹き出しに1か所くらいにとどめましょう。

同じ人物の吹き出しを続けて使う場合は、1つ作った吹き出しのブロックを複製し、セリフだけを書き換えると早く進められます。ブロックの複製は、ブロックのツールバーの右端にあるメニューから行えます。

クラシックエディタを使っている場合

プラグインでクラシックエディタを使っている場合も、Cocoonの吹き出しは使えます。編集画面の上部にあるCocoonのメニューから吹き出しを選んで挿入する形になります。メニューの位置や名前は環境によって違うので、見つからない場合はCocoonの公式マニュアルを確認してください。エディタの違いはブロックエディタとクラシックエディタの違いの記事で説明しています。

吹き出しを読みやすく使うコツ

吹き出しは、使い方しだいで記事が読みやすくもなり、読みにくくもなります。次の点を意識すると、読者にとって分かりやすい記事になります。

1つの吹き出しは2〜3行まで

吹き出しの中に長い説明を書くと、吹き出しの幅が狭いぶん縦に長くなり、かえって読みにくくなります。セリフは2〜3行に収め、詳しい説明は本文に書きます。

同じ人物は、いつも同じ側に置く

読者役は左、筆者役は右、のように位置を固定すると、アイコンを見なくても誰が話しているのかが分かります。記事によって左右が入れ替わると、読者が混乱します。

吹き出しを連続させすぎない

吹き出しが5つも6つも続くと、本文の流れが見えにくくなります。会話は2〜4往復までにして、その後に本文でまとめる形がおすすめです。

結論は本文にも書く

吹き出しの会話の中だけで結論を言うと、ざっと読む読者が見落とします。大事な結論は、吹き出しのあとに本文でもう一度、短く書いておくと、読者にも検索エンジンやAIにも伝わりやすくなります。

場面別の吹き出しの使い方と文例

吹き出しは「どこに入れるか」で効果が大きく変わります。よく使われる場面ごとに、入れ方の例をまとめました。

文例1：記事の冒頭で悩みを代弁する

読者役（左）に「設定画面を開いたけれど、どこを押せばいいのか分からない…」と言わせ、すぐ下の本文で「この記事では、画面のどこを押すかまで順番に説明します」と受けます。吹き出しは悩みを見せる役、本文は答えを示す役、と分けるのがコツです。

文例2：手順の途中で注意を伝える

筆者役（右）に「ここで保存を押し忘れると、設定が消えてしまうので注意してください」と言わせます。本文の手順の番号のすぐ後に置くと、読者が手を動かしながら気づけます。

文例3：表の後で読み方を補足する

筆者役（右）に「迷ったら、まずは一番上の方法を試してみてください」と言わせます。表は情報を並べるのが得意ですが、「結局どれを選べばいいのか」は伝えにくいので、吹き出しでひと言添えると親切です。

吹き出しが表示されない・崩れるときの確認

吹き出しがうまく表示されないときは、次の順番で確かめてください。

特に多いのが、テーマを変えたときの崩れです。Cocoonの吹き出しは、Cocoonのデザインの仕組みで形が作られているため、ほかのテーマに切り替えると、吹き出しの形が失われてただの画像と文字になります。テーマを変える予定がある場合は、吹き出しを使っている記事が多いほど、移行の手間が増えることを覚えておいてください。

ライターに原稿を頼むときの、吹き出しの決めごと

外部のライターに記事を頼んでいる場合、吹き出しの書き方が人によってばらばらだと、入稿する人がそのたびに解釈して作り直すことになります。原稿を頼む前に、次のような決めごとを執筆のルールとして共有しておくと、やり取りが減ります。

1. 使う人物の一覧を渡す：「筆者＝右」「読者さん＝左」のように、名前と左右の位置をセットで決めて伝えます。一覧にない人物を勝手に増やさないことも書いておきます。
2. 書き方の形を1つに決める：「（読者）〜」「読者：〜」「【吹き出し・読者】〜」など、形がいくつも混ざると見落としが出ます。どの形にするかを1つに決め、見本を1つ付けておきます。
3. 1記事あたりの数の目安を決める：「1記事に3〜6個まで」のように目安を決めると、吹き出しだらけの原稿を防げます。
4. セリフの長さを決める：「1つの吹き出しは2〜3行まで」と書いておきます。
5. 吹き出しに入れてはいけない情報を決める：料金・手順・数字などの正確さが大事な情報は本文に書く、と決めておきます。

ライター向けのルールをまとめた執筆マニュアルの作り方は、ライター向けの執筆マニュアルのテンプレートの記事で紹介しています。

原稿の段階で吹き出しを指定する方法

ここまでは、WordPressの編集画面で吹き出しを1つずつ入れる方法でした。記事が少ないうちはこれで十分ですが、外部のライターに原稿を頼んでいる場合や、毎週何本も入稿している場合は、次のような手間が出てきます。

• 原稿の「（読者）〇〇」のような書き方を見ながら、編集画面で吹き出しを1つずつ作り直す
• 人物の選び間違い、左右の入れ違いを、プレビューで1つずつ確かめる
• 原稿を直したら、WordPress側の吹き出しも直す

この作り直しを減らしたい人向けに、エラバレルではドクポスというウェブサービスを提供しています。GoogleドキュメントのURLを貼ると、WordPressに記事を作るサービスです。原稿の本文に次のように書くと、Cocoon・SWELLの吹き出しに変換されます。

[吹き出し 名前=太郎 位置=右]
この書き方なら、原稿の段階で吹き出しを指定できます。
[/吹き出し]

[吹き出し …] と [/吹き出し] で囲んだ部分がセリフになり、「名前」と「位置（右・左）」を指定できます。ドキュメントの先頭に「テーマ：cocoon」と書いておくと、Cocoonの吹き出しとして入ります。

ほかにも、次のような指定や変換ができます。

• [ボックス 種類=注意 タイトル=…]〜[/ボックス] で、Cocoon・SWELLのボックスになります（CocoonのボックスはCocoonのボックスの種類と使い方の記事で説明しています）
• [目次] で目次のショートコードが入ります
• 見出し・太字・リンク・箇条書き・表・画像は、WordPressのブロックに変換されます
• 状態は、下書き・予約・公開から選べます

ドクポスはAIを使っておらず、文章を書き換えることはありません。ドキュメントのとおりに変換します。ライターへの執筆ルールに吹き出しの書き方を1行加えるだけで、入稿のときに吹き出しを作り直す作業がなくなります。

SWELLを使っている人は、SWELLのふきだしの使い方の記事もあわせてご覧ください。GoogleドキュメントからWordPressへの入稿方法の全体像は、GoogleドキュメントをWordPressの記事に変換する方法の記事で比べています。

よくある質問

Cocoonの吹き出しは、プラグインなしで使えますか？

使えます。吹き出しはCocoonに最初から入っている機能なので、プラグインを追加する必要はありません。管理画面の「Cocoon設定」の中にある「吹き出し」で人物を登録すれば、記事の編集画面から呼び出せます。

登録した吹き出しの人物を変更すると、過去の記事にも反映されますか？

Cocoonでは、記事の吹き出しに入っている内容と、登録した人物の設定との関係によって、反映のされ方が変わることがあります。アイコンを差し替えたときは、過去の記事を何本か開いて、表示がどうなっているかを確かめてください。

吹き出しのアイコンに、ほかのサイトのイラストを使ってもいいですか？

利用条件で許可されていない画像は使わないでください。自分で用意したイラストや写真、または商用利用やアイコンとしての利用が認められている素材を使い、クレジット表記などの条件があれば守りましょう。

吹き出しは、SEOやAI検索に悪い影響がありますか？

吹き出しの中のセリフも、HTMLの中のふつうの文字なので、検索エンジンやAIは読むことができます。ただし、結論や料金などの大事な情報を会話の中だけに書くと、要点が伝わりにくくなります。大事なことは本文にも書いておくと安心です。

スマホで吹き出しが見づらいときは、どうすればいいですか？

スマホは画面が狭いので、セリフが長いと吹き出しが縦に伸びて読みにくくなります。セリフを2〜3行に短くし、詳しい説明は本文に移してください。プレビューのメニューからモバイルの表示に切り替えて確かめるのがおすすめです。

Googleドキュメントの原稿から、吹き出しを自動で作れますか？

ドクポスを使うと、原稿の本文に [吹き出し 名前=太郎 位置=右]〜[/吹き出し] と書いた部分を、Cocoon・SWELLの吹き出しに変換してWordPressに入稿できます。手作業で入れる場合も、原稿で書き方を決めておくと入稿が早くなります。

まとめ

Cocoonの吹き出しの使い方をまとめます。

吹き出しの多い記事の入稿を自動にしたい人は、ドクポスを試してみてください。Googleドキュメントの原稿に書いた吹き出しの指定を、Cocoon・SWELLの吹き出しに変換してWordPressに記事を作れます。5記事まで、カード登録なしで試せます。

参考にした資料

• Cocoon（公式サイト）
• 新しいアイコンを利用した「吹き出しデモ」を手っ取り早く登録する方法（Cocoon公式）
• Block Editor（WordPress.org Documentation）