Cocoonの吹き出しを自作する方法｜画像サイズ・登録・表示されない時の対処

Cocoonの吹き出しは、画像を用意し、吹き出し設定へ登録してから記事へ挿入すれば作れます。画像準備とエディター操作を分けると、表示されないときも止まった工程を絞れます。まず正方形の自作アイコン1枚を登録し、短いセリフでスマホ表示まで確かめましょう。

吹き出しは「画像・登録・挿入」を一つずつ確認する

作業は次の順番で進めます。

2026年8月22日に自社検証サイトでCocoon 2.9.3.1の管理画面を操作しました。画面には「160px以上の正方形画像」と表示され、200×200pxのPNGを使った吹き出しを保存できました。

登録した吹き出しをGutenbergの検証用下書きへ挿入し、デスクトップと375px幅のプレビューでアイコン・名前・本文が表示されることも確認しています。これは同バージョンの検証結果であり、別バージョンでは画面表示が変わる可能性があります。

吹き出し画像は160〜200px程度の正方形から始める

画像は縦横比1:1の正方形から始めると扱いやすくなります。横長や縦長の写真をそのまま使うと、丸形表示で顔や重要部分が切れやすいためです。

画像は顔やイラストを中央に置き、周囲へ余白を残します。正方形の見た目だけで完成にせず、丸く表示したときに髪や帽子が切れないかも確認しましょう。小さな表示でも表情や人物を見分けられる構図を選びます。

アップロード前にはファイル容量も確認します。Cocoon公式は画像圧縮を案内していますが、特定サービスは必須ではありません。見た目を崩さない範囲で軽くしておけば、吹き出しが複数ある記事でも読み込み負荷を増やしにくくなります。

素材サイトや生成画像を使う場合は、サイズより先に利用条件を確認してください。商用利用、クレジット表記、加工の可否が素材ごとに違います。

Cocoonに用意されている一部のデモ画像は外部CDNから配信されています。公式はアクセス集中などで表示されない可能性を案内しているため、継続利用する自作画像は自分のサイトへアップロードしておくと管理しやすくなります。

Cocoon設定の吹き出し画面で自作アイコンを登録する

WordPress管理画面で「Cocoon設定→吹き出し」を開き、「新規作成」へ進みます。公式マニュアルでは、タイトルやアイコン画像などを入力し、作成後は一覧画面で登録したスタイルを確認する流れです。

登録名は、記事を書くときに役割と位置が分かるものにします。たとえば「読者・質問・左」「運営者・回答・右」のようにそろえると、似た画像が増えても選び間違いを減らせます。表示名とは用途を分けて考えてください。

アイコン画像を選んだら、人物名、左右位置、吹き出しの形や色など、画面に表示される項目を確認します。利用頻度が低い吹き出しを旧ビジュアルエディターのリストへ出したくない場合は、リスト表示を無効にできます。

登録画面で画像が見えたことと、記事の公開画面で正しく表示されることは別です。保存後は一覧だけで終わらせず、実際の記事へ挿入してプレビューします。

記事ではエディター方式に合わせて吹き出しを挿入する

ブロックエディター

主な入口は、投稿画面の追加ボタンにあるCocoon用ブロックです。

見つからないときは、Cocoonの更新状態とCocoon用ブロックの利用可否を確認します。

旧ビジュアルエディター

主な入口は、テキスト選択後に使う吹き出しのドロップダウンです。

見つからないときは、吹き出しが登録済みか、リスト表示が有効かを確認します。

Cocoon公式のブロック解説によると、Cocoon 1.6.4以降はCocoon Blocksがテーマ内に組み込まれています。古い解説にある別プラグイン導入手順を、現行環境へそのまま当てはめる必要はありません。

記事へ挿入したら、アイコン・人物名・左右位置を確認し、スマホ幅で本文を読みます。長い説明を一つの吹き出しへ詰め込むと細長くなるため、質問や短い補足に絞り、詳しい解説は通常の本文へ戻すと読みやすくなります。

吹き出しが表示されないときは発生場所から確認する

登録済み吹き出しが選択肢に出ない

最初に、吹き出し設定のリスト表示を確認します。

次に、使用中のエディター方式とCocoonの更新状態を確認します。

吹き出し本文は出るがアイコンだけ見えない

最初に、画像URLを直接開けるか確認します。

次に、メディアファイル、HTTPS、遅延読み込みの設定を確認します。

編集画面では見えるが公開画面で消える

最初に、プレビューと公開HTMLの差を確認します。

次に、キャッシュ、追加CSS、プラグインCSSを確認します。

アイコンの端が切れる

最初に、元画像の構図と余白を確認します。

次に、正方形の切り抜きと円形表示での見え方を確認します。

デモ画像だけ不安定

最初に、画像の配信元を確認します。

次に、自サイトへアップした画像への差し替えを検討します。

アイコンだけ見えない場合は、画像URLを新しいタブで開けるか確認します。URL自体が開かなければ、吹き出しの装飾より前に画像の保存先や参照先を見直します。

公開画面だけで消える場合は、開発者ツールで画像要素が存在するかを見ると切り分けが早くなります。要素はあるのに見えないなら、CSSで非表示や極端な縮小が起きていないかを確認します。

Cocoon公式フォーラムには、別プラグインがすべての figure 要素へ当てたCSSによって、吹き出し画像とカルーセル画像の両方へ影響した事例があります。

これは一つの解決例であり、表示不良が起きたら同じプラグインを停止すればよいという話ではありません。

プラグインを切り分けるときは、バックアップやステージング環境を用意し、変更前の状態を記録します。複数をまとめて無効化せず、一つずつ確認した方が原因を特定できます。

直らないときは環境情報と再現場所を記録する

• CocoonとWordPressのバージョン
• 使用中のエディター
• 症状が出るページのURL
• 登録画面・編集画面・公開画面のどこで見えないか
• 問題が起きる前に変更した設定やプラグイン
• PCとスマートフォンの違い
• 個人情報や認証情報を除いたスクリーンショット

表示されない場合は、失敗した場所と正常な場所を一緒に記録します。たとえば「編集画面では見えるが公開側だけ画像がない」なら、登録そのものとは違う確認が必要です。Cocoon・WordPressの版、エディター、対象ページと一緒にメモすれば、相談先にも状況を伝えやすくなります。

吹き出しを直した後はテーマの運用時間も確認する

吹き出し1個を保存し、公開ページで画像・人物名・文章が読めれば基本設定は完了です。Cocoonの機能で目的を満たせたなら、そのまま使い続けられます。テーマ変更はこの1機能のためだけでなく、今後繰り返す編集作業と移行の負担を合わせて判断してください。

吹き出し以外にも調整が多い場合は、記事を書く時間と装飾を直す時間を分けて振り返りましょう。テーマ変更も検討するなら、CocoonとSWELLの編集機能・移行作業を比較する記事で、今の課題が解消するか確認できます。

画像の準備、登録、記事への挿入まで進んだら、最後に公開前のスマートフォン表示を確認します。

問題が残る場合は、表示されない場所を一つに絞ってから設定を変えてください。