SWELLの吹き出しが表示されない5つの症状と直し方

※本記事にはアフィリエイト広告（PR）が含まれます。

先に身も蓋もない話をします。SWELLの吹き出しが表示されないとき、原因の一覧を上から順に試すのが、いちばん遠回りです。

検索して出てくる解説には、原因が10個ほど並んでいます。キャッシュ、アイコン画像のURL、CSSの競合、プラグインの干渉。どれも間違いではありません。

ただ、読み終わっても「で、自分はどれ？」が分からないまま、管理画面に戻ることになります。仮に1つ5分で試すとしても、10個で50分です。

先に決めるべきは、原因ではなく症状です。どこで表示されていないのか。ここを5つに分けるだけで、次に開く画面は1つに決まります。

私はこのブログをSWELLで動かしています。この記事は、2026年9月4日にSWELL公式マニュアルの6ページを読み直し、あわせて当ブログの公開記事64本を実際に調べたうえで書きました（SWELL 2.18.0で確認）。

読み終わる頃には、あなたの症状が5つのどれなのかを言葉にできて、開く画面が1つに絞れているはずです。あとは、その1画面を直すだけです。

SWELLの吹き出しが表示されないときは、原因より先に「どこで出ないか」を決める

原因のリストが役に立ちにくいのには、はっきりした理由があります。

並んでいる項目に、SWELL固有の話とWordPress全般の話が混ざっているからです。

たとえば「登録パターンが選ばれていない」はSWELLの設定の話です。一方で「ブラウザのキャッシュ」「JavaScriptの読み込みエラー」は、テーマに関係なく起きます。

この2種類が同じ箇条書きに並ぶと、読者は上から順に総当たりするしかなくなります。

しかも症状が違えば、当てはまる原因の範囲はまったく違います。編集画面で見えているのに公開ページで消える。編集画面でも出ない。この2つで疑う場所が別なのは、想像がつくのではないでしょうか。

吹き出しが表示されない症状は5つに分けられる

この記事では、症状を次の5つに分けます。まず自分がどれかを決めてください。

症状	見えている状態	最初に開く画面
①	編集画面では出るのに、公開ページで出ない	「設定」→「SWELL設定」→キャッシュクリア
②	編集画面でも吹き出しにならない	ブロックの種類（SWELLブロックの「ふきだし」か）
③	「ふきだしセット」の一覧にセットが出てこない	管理メニューの「ふきだし」
④	吹き出しは出るが、アイコン画像だけ出ない	ブロック右側のパネル（アイコン画像の指定）
⑤	パソコンでは出るのに、スマホで崩れる	スマホ側のブラウザ（キャッシュの削除）

5つもあると身構えるかもしれませんが、分けるための質問は2つだけです。

症状①：編集画面では出るのに、公開ページで表示されない

検索していちばん多く見かける形です。書いているときは吹き出しなのに、公開して見に行くと普通の文章に戻っている。

編集画面で形になっているなら、ブロックの指定そのものは通っています。疑うのは、読者に届くまでの間にある仕組みのほうです。

最初に押すのは、SWELLのキャッシュクリアボタン

SWELLにはキャッシュ機能があります。公式マニュアルによると、設定場所は「SWELL設定」の「高速化」タブです。

仕組みはWordPressのTransients APIです。キャッシュ情報をデータベースに保存する方式だと説明されています。

そして手動で消すためのキャッシュクリアボタンが、管理メニューの「設定」→「SWELL設定」の中に用意されています。まずはここを押してから、公開ページを開き直してみてください。

キャッシュは3つの層に分かれている

ここでつまずく人が多いので、少していねいに書きます。

「キャッシュを消したのに変わらない」の正体は、たいてい消した層が違うことです。関係する層は3つあります。

層	どこが持っているか	消し方
テーマ	SWELLのキャッシュ機能	「設定」→「SWELL設定」のキャッシュクリアボタン
サーバー	レンタルサーバー側のコンテンツキャッシュ	サーバーの管理画面からキャッシュを削除
ブラウザ	あなたのパソコン・スマホ	スーパーリロード、または閲覧履歴の削除

ブラウザのスーパーリロードは、Windowsなら Ctrl＋Shift＋R、Macなら Command＋Shift＋R です。

サーバー側のキャッシュは、契約しているサービスによって場所も呼び名も変わります。自分がどのサーバーを使っているか分からなくなっていたら、契約時のメールや請求書に書かれたサービス名で確認してください。

順番は、テーマ → サーバー → ブラウザ。手前から消すほうが、原因の切り分けがきれいに残ります。

ページ遷移の高速化を、いったん切って確かめる

キャッシュを3層とも消しても変わらないなら、次はページ遷移高速化の設定です。

公式マニュアルでは、この機能はβ機能として実装されており、不具合の可能性があると説明されています。方式は2つあります。

この設定を含め、SWELLで最初に触っておく箇所はSWELLの初期設定を6つに絞った記事にまとめています。

症状②：編集画面でも吹き出しにならない

書いている最中から吹き出しの形になっていないなら、話は早いです。公開側ではなく、ブロックの指定を見ます。

そのブロックは「ふきだしブロック」になっていますか

SWELLのふきだしは、専用のブロックとして用意されています。公式マニュアルの手順はこうです。ブロック追加ボタンから「SWELLブロック」タブを開き、その中の「ふきだし」を選ぶと挿入されます。

実装されたのは ver.1.1.4 のアップデートです。そして公式には、この機能はブロックエディター専用だと書かれています。

段落ブロックのまま名前を入れても、吹き出しにはなりません。当たり前に思えますが、コピー＆ペーストで記事を作っていると意外と起きます。

クラシックエディターの場合はショートコードになる

ブロックエディターではなくクラシックエディターを使っているなら、呼び出し方そのものが変わります。

公式マニュアルでは、ショートコード

または

で呼び出す形が案内されています。登録済みのセットを使うときは set="セット名" を付け、ver.2.3.0 以降は id="セットID" の指定が推奨とされています。

色や向きなどの属性も公式に一覧があります。主なものは次のとおりです。

属性	指定できる値
col	gray / green / blue / red
type	gray / green / blue / red / thinking
icon	画像URL
name	名前
align	left / right
border	on / none
icon_shape	circle / square

ショートコードのつづりが1文字違うだけでも、そのまま文字として表示されます。角かっこごとコピーして貼り直すのが早いです。

HTMLで自分で書いた吹き出しには、見た目が付かないことがある

ここは、上位の解説であまり触れられていない落とし穴です。

ブロックを使わず、カスタムHTMLブロックに自分で吹き出しのタグを書く人がいます。他のサイトのソースを見て、それらしく真似た形です。

これはうまくいかないことがあります。SWELLが想定しているクラス構成・データ属性・登録済みのふきだしセットへの参照を、手書きで再現しきれないためです。

ブロックとして置いたときの記述は、記事のコード表示に切り替えるとこう見えます。

<!-- wp:loos/balloon {"balloonName":"名前","balloonCol":"blue"} -->
<p>ここに話す内容が入ります</p>
<!-- /wp:loos/balloon -->

先頭と末尾のコメント行が、ブロックとしての目印です。この目印がないと、SWELL側は「これはふきだしだ」と扱えません。

症状③：「ふきだしセット」の一覧にセットが出てこない

ブロックは置けた。でも右側のパネルを開いても、登録したはずのセットが選べない。この形もよく見かけます。

セットは「ふきだし」メニューから登録する

公式マニュアルによると、ふきだしセットは管理メニューの「ふきだし」から、通常の投稿と同じように追加していきます。

つまり、記事の投稿一覧と同じ感覚で、ふきだしの一覧が別に存在するということです。カスタマイザーの中を探しても見つかりません。

ここを一度も開いていなければ、セットは0件です。一覧に出てこないのは当然で、まず1つ登録するところから始めます。

セットとブロック、優先されるのはどちらか

セットを選んだのに色が変わらない。この現象には、公式の説明ではっきり答えが出ています。

ふきだしブロックの解説ページに、優先順位の記述があります。ふきだしセットの設定項目よりも、ブロック右側のパネルでの設定内容のほうが優先度は高い、という趣旨です。

ブロック側で色を触った覚えがあるなら、そちらが勝っています。セットの設定を効かせたいときは、ブロック側の指定を戻すのが筋道です。

やりたいこと	触る場所	注意点
全記事の吹き出しをまとめて変える	管理メニューの「ふきだし」（セット）	ブロック側で個別指定していると、そちらが優先される
この1か所だけ色を変える	ブロック右側のパネル	あとからセットを変えても、この吹き出しは追随しない
アイコンを差し替える	セット側で差し替える	画像を直接指定したブロックには反映されない

公式マニュアルでは、セットを更新するとその変更が設置済みのふきだしブロックにも反映される、と説明されています。

ただし例外が添えられています。画像を直接指定しているふきだしブロックでは、変更が反映されません。

過去の記事でアイコン画像を個別に選んでいたなら、その記事だけ取り残されます。ここは仕様であって、故障ではありません。

症状④：吹き出しは出るのに、アイコン画像だけ表示されない

枠は出ている。色も付いている。なのに左側が空白のまま、というケースです。

この症状は、吹き出し全体が消えるのとは原因の場所が違います。装飾ではなく、画像の側を見ます。

画像そのものが残っているかを確認する

指定はしているのに出ないなら、その画像がメディアライブラリから消えていないかを見ます。

整理のつもりで古い画像を削除すると、参照していた吹き出しのアイコンが道連れになります。他サイトの画像URLを直接指定していた場合も、向こうで消されれば同じことが起きます。

アイコン用の画像をこれから作るなら、ブログのアイキャッチをAIで量産する手順と同じ流れで用意できます。サイズを小さくそろえておくと、あとが楽です。

遅延読み込みの設定も見ておく

SWELLには遅延読み込み（Lazy Load）の機能があります。公式マニュアルによると、設定場所は「SWELL設定」の「高速化」タブです。

対象として挙げられているのは、フッター（フッター直前ウィジェットを含む）、投稿ページの記事本文より下側にあるエリア、そして投稿内の画像や動画などです。

画像がスクロールに合わせて読み込まれる仕組みなので、一瞬だけ空白に見えることがあります。少し待っても出ないのか、待てば出るのか。ここを分けて見ると、判断が一段はっきりします。

症状⑤：パソコンでは出るのに、スマホで崩れる

最後は、端末によって見え方が違うケースです。

この症状のやっかいなところは、直したかどうかが自分で判定しにくい点にあります。手元のスマホが古い画面を持ち続けるからです。

スマホのブラウザは、別のキャッシュを持っている

パソコンでスーパーリロードをかけても、スマホ側には何も起きません。端末ごとに別の保管庫があると考えてください。

スマホで確かめるときは、ブラウザの閲覧履歴を削除するか、プライベートモード（シークレットモード）で開き直します。

プライベートモードなら、保存済みの画面を使わずに読み込み直してくれます。修正が効いたかどうかを見るには、こちらのほうが早いです。

名前が長いと、狭い画面で折り返す

崩れて見えるだけで、実は表示されている場合もあります。

アイコンの下に置く名前が長いと、スマホの幅では折り返されます。吹き出しの高さがずれて、レイアウトが壊れたように見えるわけです。

名前は短くする。これだけで解決することが少なくありません。

スマホでの見え方	考えられること	やること
吹き出しが丸ごと出ない	端末側に古い画面が残っている	プライベートモードで開き直す
名前が2行になる	名前の文字数が多い	名前を短く付け直す
アイコンが大きすぎる	元画像の縦横比がそろっていない	正方形に切りそろえて差し替える
パソコンでも同じく崩れる	端末の問題ではない	症状①〜④に戻って切り分ける

端末をまたぐ確認は、順番を決めておくと迷いません。

パソコンのプライベートモード、次にスマホのプライベートモード、最後に普段使いのブラウザ。この順で見ると、どこに古い画面が残っているかが分かります。

「CSSが読み込まれていないから」で片づける前に、確かめておきたいこと

吹き出しが崩れる話になると、「吹き出し用のCSSが読み込まれていないからだ」という説明をよく見かけます。

この説明が自分のサイトに当てはまるのかを、実際に調べてみました。

当ブログの64本で、ふきだしブロックは1本・3個だけだった

まず前提として、このブログでの使用状況を数えました。

公開している記事64本の本文を、WordPressのREST APIですべて取得しました。ふきだしブロックの数を集計すると、使っている記事は1本だけ。数にして3個でした。

つまり、当ブログのほとんどのページには吹き出しが1つもありません。この状態が、次の確認にちょうど都合がよいわけです。

吹き出しを使っていないページにも、吹き出し用のCSSは出ていた

ふきだしを1つも使っていない公開ページを1つ選び、そのHTMLを取得して中身を調べました。使ったのは、当ブログのSWELL初期設定の記事です。

結果は、ページの中に直接書き出されているCSSの中に、吹き出しの見た目を決める指定が入っていました（SWELL 2.18.0・2026年9月4日確認）。

吹き出しを使っていないページにも、吹き出し用のCSSは出ている。少なくともこのブログの環境では、そうでした。

自分のサイトで同じ確認をする手順

特別なツールは要りません。ブラウザだけでできます。

この確認は、3分あれば終わります。原因を10個総当たりするより先に、ここを見ておく価値はあると思います。

それでも吹き出しが表示されないときの進め方

5つの症状をたどっても解決しないことはあります。そのときの動き方も決めておきましょう。

戻る先は3つあります。まず公式マニュアルです。SWELLは公式マニュアルが整っているテーマで、ふきだしブロックの使い方も、ふきだしセットの登録も、それぞれ専用のページがあります。

個人ブログの解説は分かりやすい代わりに、書かれた時点のバージョンに縛られます。挙動が食い違うときは、公式の記述を優先してください。

次に、同じ症状を探す場所です。SWELLには利用者向けの公式フォーラムがあります。購入者が質問を投稿し、やり取りが残る場所です。

解説ページではなく質問と回答の集まりなので、読むときは前提を確かめる必要があります。投稿された時期のバージョンや、その人の環境が自分と同じとは限らないからです。

個人の投稿は、あくまで「そういう声がある」として受け取るのが安全です。公式マニュアルと食い違う場合は、マニュアル側を信じてください。

最後は、自分の手元です。どうしても場所が特定できないときは、変えたものを戻す方向で試します。

高速化の設定をオフにする。追加CSSを一時的に空にする。最近入れたプラグインを止める。1つずつ戻して、どこで表示が復活するかを見ます。

SWELLの吹き出しが表示されないときのよくある質問

最後に、切り分けの途中で出てきやすい疑問をまとめました。

吹き出しが表示されないとき、最初に見るのはどこですか。

編集画面です。編集画面で吹き出しの形になっているかどうかで、疑う場所が半分に絞れます。形になっているなら公開までの経路（キャッシュや高速化）、なっていないならブロックの指定を見ます。

ふきだしセットを登録したのに、ブロックの一覧に出てきません。

まず、管理メニューの「ふきだし」で保存まで終わっているかを確認してください。保存済みなら、編集画面をいったん再読み込みして開き直します。登録直後は、これで表示されることがあります。

セットの色を変えたのに、記事の吹き出しが変わりません。

ブロック右側のパネルで個別に色を指定していないか見てください。公式マニュアルでは、セットの設定項目よりブロック側のパネルの設定のほうが優先度が高いと説明されています。ブロック側の指定を戻すと、セットの色が効くようになります。

セットのアイコンを差し替えたのに、古い画像のままです。

そのブロックで画像を直接指定していると、セット側の変更は反映されません。公式マニュアルにも例外として挙げられています。該当する記事は、ブロック側の画像指定を外すか、個別に差し替える必要があります。

クラシックエディターでも吹き出しは使えますか。

使えます。ただし呼び出し方が変わり、ショートコードでの指定になります。ふきだしブロックのほうは、公式にブロックエディター専用の機能だと書かれています。

吹き出しのHTMLを自分で書いてもいいですか。

おすすめしません。SWELLが想定しているクラス構成やデータ属性、登録済みセットへの参照。これらを手書きで再現しきれず、見た目が付かないことがあります。あとからセットを変えても連動しないので、修正の手間も増えます。

キャッシュを消しても直りません。

消した層が違う可能性があります。SWELLのキャッシュ、サーバーのキャッシュ、ブラウザのキャッシュは別物です。この順で3つとも消してから、記事URLをアドレス欄に直接入力して開き直してみてください。

まとめ：症状を1つに決めてから、画面を1つ開く

SWELLの吹き出しが表示されないとき、やることは原因の総当たりではありません。

編集画面で形になっているか。出ないのは全体か、アイコンだけか。この2つを見れば、症状は5つのどれかに決まります。

あとは、その症状に対応する画面を1つ開くだけです。10個の候補を50分かけて試すより、ずっと早く終わります。

吹き出しが直ったら、記事づくりの本題に戻りましょう。SWELLまわりで先に決めておくと楽になる設定は、下の記事にまとめています。

あわせて読みたい記事

• SWELLの初期設定は6つでいい｜最初に触る場所だけまとめました
• SWELLを買って後悔した点と、それでも使い続けている理由
• SWELLとCocoonはどっち？迷ったときの決め方
• ブログのアイキャッチをAIで量産する手順
• ConoHa WINGとエックスサーバーはどっち？比較して選ぶ

この記事で確認したページと確認日

この記事の「公式の説明」は、2026年9月4日に次の6ページを読んだ範囲を指しています。ここに含まれないページの記述は対象外です。