Cocoonの吹き出しを自作する方法｜画像サイズ・登録手順・表示されないときの確認方法

Cocoonで吹き出しを使うとき、作業が止まる場所は人によって違います。画像の作り方で迷う人もいれば、登録したはずの吹き出しがエディターに見当たらない人、文章は出るのにアイコンだけ消える人もいます。

確認場所を混ぜないのが早く直すコツです。画像を用意し、Cocoonの設定画面へ登録し、記事編集画面から呼び出します。

最後にスマートフォン幅で表示を確認できれば、吹き出しを使う準備は完了です。

Cocoonの吹き出しは画像準備・登録・記事での挿入の3段階

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

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

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

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

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

顔写真やイラストの中心を画像の中央へ寄せ、上下左右には少し余白を残します。正方形に切り抜いた時点で問題なく見えても、円形マスクや枠が重なると端の髪や帽子が欠けることがあります。

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

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

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

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

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

タイトルは編集時の識別にも使います。似た名前を増やすより、「01_読者・左」「02_運営者・右」のように役割が分かる名前にしておく方が探しやすくなります。

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

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

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

ブロックエディター

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

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

旧ビジュアルエディター

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

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

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

挿入後は文章だけでなく、アイコン画像、人物名、左右位置も見ます。PCに加え、スマートフォン幅で吹き出し本文が細くなりすぎていないかも確認します。

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

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

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

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

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

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

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

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

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

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

アイコンの端が切れる

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

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

デモ画像だけ不安定

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

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

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

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

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

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

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

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

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

フォーラムへ相談するときも、「吹き出しが出ません」だけでは判断材料が足りません。文章は出るのか、アイコンURLは開けるのか、編集画面と公開画面で差があるのかまで書けば、確認すべき場所が伝わります。

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

Cocoonの吹き出しは無料テーマの機能だけで作成できます。今回の問題が一度の設定で解決し、その後は迷わず使えるなら、テーマを変える必要はありません。

一方、吹き出し以外にもCSSやブロック設定の調整が積み重なっているなら、記事を書く時間とデザインを直す時間を分けて記録すると判断しやすくなります。

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

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