SWELLで吹き出しを入れたのに画面に出てこないと、ちょっと焦りますよね。
このページでは、次のようなことを一緒に整理していきます。
一言でまとめると、SWELLの吹き出しが表示されないトラブルは、基本設定と表示環境を落ち着いて順番にチェックしていけば、ほとんどの場合は自分で解決できます。
ブログ収益化の教科書プレゼント
↓ ↓ ↓
SWELLの吹き出しが表示されないときにまず知っておきたいこと
ここでは、「SWELLの吹き出しが表示されない」と検索する人に多いパターンを整理して、この記事のゴールをはっきりさせておきます。いきなり細かい設定をいじる前に、自分がどのタイプのトラブルなのかを大まかにつかんでおきましょう。
「SWELL 吹き出し 表示されない」でよくある症状パターン
まずは、よく相談される症状を表にまとめました。自分の状況に近いものがどれか、軽く見比べてみてください。
| 症状の例 | どこで起きるか | 主な原因のイメージ |
|---|---|---|
| 吹き出しがまったく出ない | 編集画面・公開画面両方 | ふきだしセット未登録、ブロック未選択、ショートコードの記述ミス |
| 編集画面では見えるのに本番ページで消える | 公開画面だけ | キャッシュ、プラグインの競合、表示モードの違い |
| 「ふきだし」ブロック自体が見つからない | ブロック挿入画面 | SWELLブロックの読み込み不具合、プラグインやブラウザの影響 |
| アイコンだけ出ず、文字だけになる | 編集画面・公開画面 | 画像のパス切れ、アイコンフォント設定、サイズ指定の崩れ |
| スマホだけレイアウトが崩れて読みにくい | スマホ表示 | 縦並び設定、文字量、余白やサイズのバランス |
ざっくり言うと「まったく出ない」「編集では見えるけど公開画面で消える」「アイコンだけおかしい」「スマホだけおかしい」という四つのパターンに分けられます。これ以降は、それぞれのパターンごとにSWELLの吹き出しの原因と対処法を見ていきます。
なぜ原因をパターン別に分けるのか
同じ「表示されない」でも、原因はいろいろです。設定の問題で出ないときもあれば、プラグインやキャッシュが邪魔をしていることもありますし、テーマを変えたことで古いショートコードが動かなくなっている場合もあります。
やみくもにあちこち触ると、たまたま直ることもありますが、別のデザインが崩れたり、何が原因だったのか分からないままになりがちです。先に「どこで」「どんなふうに」「どのくらい表示されないのか」を整理しておくと、見るべき場所がかなり絞れます。私も最初は全部をごちゃ混ぜに見て遠回りしましたが、パターンごとに切り分けてからは、解決までの時間がぐっと短くなりました。
この記事の想定読者
この記事は、次のような人をイメージして書いています。
- SWELLを導入したばかり、もしくは別テーマからSWELLに乗り換えたばかりの人
- WordPressやブロックエディタに少し不安があり、専門用語はあまり得意ではない人
- プログラミングやCSSは分からないが、管理画面をクリックして設定するくらいなら自分でできる人
専門用語はできるだけかみ砕いて説明していくので、「細かい言葉はよく分からない」という場合でも安心して読み進めてもらえたらうれしいです。
SWELL吹き出しの基本設定をチェックする
ここからは、SWELLの吹き出しが表示されないときに、いちばん最初に見てほしい「基本の設定」を整理していきます。いきなり難しい話に行くより、土台の部分をきちんと整えたほうが、結果的に早く解決できます。
ふきだしセットが正しく登録されているか
SWELLの吹き出しは、「ふきだしセット」をあらかじめ登録しておき、それを記事の中で呼び出す仕組みになっています。ここに何も登録されていなかったり、途中まで作って保存し忘れていたりすると、いくら記事側で吹き出しを使おうとしても画面には出てくれません。
まずは次のポイントを確認してみてください。
| チェック項目 | 確認場所 | どうなっていればOKか |
|---|---|---|
| ふきだしセットが1つ以上登録されているか | SWELL設定 → ふきだし | 一覧に自分で作った吹き出しが並んでいる |
| 名前が分かりやすいか | 同上 | 「自分」「相手」「先生」など役割が一目で分かる |
| アイコン画像が設定されているか | 同上 | 一覧でアイコンのサムネイルが表示されている |
| 吹き出しの向きや色を決めているか | 同上 | 左右の向きや背景色が希望どおりになっている |
もし一覧がまっさらで何も出てこない場合は、そもそもふきだしセットがない状態です。その場合は、まずセットを1つ作るところから始めてみてください。
ブロックエディタでSWELL吹き出しを正しく呼び出す方法
ブロックエディタを使っている場合、ふきだしセットを用意していても、記事側で正しく選んであげないと吹き出しとして表示されません。基本的な流れは次のとおりです。
- 段落ブロックではなく、「ふきだし」ブロックを追加する
- 右側の設定パネルから、登録済みのふきだしセットを選ぶ
- 誰のセリフなのか分かるように、場面に合わせてセットを使い分ける
ただの段落ブロックにテキストだけ書いた状態では、見た目は吹き出しになりません。「ふきだしブロックを使っているかどうか」「右のパネルでセットを選んでいるか」という2点は、必ず一度確認しておきましょう。
クラシックエディタやショートコードを使っている場合の注意点
今でもクラシックエディタを使っているサイトや、プラグイン経由でショートコードを挿入しているサイトもあります。この場合は、吹き出しがショートコード経由で呼び出されていることが多いです。
ショートコードが原因で表示されないときは、だいたい次のようなポイントでつまずいています。
- 開始タグと終了タグのペアが崩れている
- IDやtypeなどの指定が間違っている、または抜けている
- ビジュアルモードとテキストモードを切り替えたときにコードが壊れている
ショートコードは1文字余計だったり、1文字足りなかったりするだけで画面には何も出ません。心当たりがあるときは、コピペで貼り直したり、この機会にブロックエディタのふきだしブロックへ置き換えたりすると、トラブルが減ります。
編集画面では出るのに公開画面でSWELL吹き出しが表示されないとき
ここでは、「編集画面ではちゃんと吹き出しが見えているのに、プレビューや実際のページでは消えてしまう」というパターンを取り上げます。この場合は、設定そのものよりも、キャッシュやプラグインなど表示する側の事情が絡んでいることが多いです。
キャッシュをリセットしてSWELL吹き出しの表示を確認する
WordPressのサイトは、表示を速くするためにいろいろなキャッシュが効いています。そのおかげで読み込みは軽くなりますが、「古い状態が残り続けて、新しく追加した吹き出しがいつまでたっても反映されない」ということもよくあります。
代表的なキャッシュの種類と、見直したいポイントを整理しておきます。
| キャッシュの種類 | 例 | 見直すポイント |
|---|---|---|
| ブラウザキャッシュ | ChromeやSafariなどの履歴 | シークレットウィンドウで開き直す、履歴やキャッシュを消してから再読み込みする |
| キャッシュ系プラグイン | ページをまとめてキャッシュするプラグイン | 一度キャッシュを削除し、様子を見ても変わらなければ一時的に無効化して確認する |
| テーマ側のキャッシュ機能 | SWELLの設定画面など | SWELLのキャッシュ削除ボタンを押してから、別タブでページを開き直す |
これらをひと通り試してから「それでも吹き出しが表示されないのか」を見ると、余計な作業をかなり減らせます。私も実際、キャッシュを消しただけで直ったケースが何度もありました。
プラグインとの競合でSWELL吹き出しが出なくなることもある
キャッシュの次に疑いたいのが、プラグインとの相性です。とくに次のようなプラグインは、SWELLの吹き出しとぶつかることがあります。
- JavaScriptやCSSをまとめて圧縮したり、読み込み順を変えたりするプラグイン
- ブロックエディタの動きを拡張するプラグイン
- 広告やABテストのためにページ構造を書き換えるプラグイン
確認するときは、いきなり細かく設定を変えるよりも、次の順番が分かりやすいです。
- 怪しそうなプラグインを含めて、いったんすべて停止してみる
- その状態で吹き出しが表示されるかどうかを確認する
- 表示されるようになったら、プラグインを1つずつ有効化して、どれがきっかけで吹き出しが消えるのかを探す
少し根気が必要ですが、「どのプラグインが原因なのか」をはっきりさせておくと、あとから同じトラブルになったときにも対処しやすくなります。
AMPや特殊な表示モードを使っていないか
サイトによっては、AMP対応やモバイル向けの特殊な表示モードを採用していることがあります。こうしたモードでは、JavaScriptが制限されていたり、CSSの読み込みルールが普通と違っていたりして、結果的にSWELLの吹き出しが正しく動かなくなることがあります。
もしAMP対応プラグインを入れていたり、モバイルだけ別のテーマで表示する設定にしていたりする場合は、一度そういった機能をオフにして、通常表示に戻した状態で吹き出しが出るかを試してみてください。表示モードを戻した瞬間に吹き出しが復活することもあります。
SWELLふきだしブロック自体が見つからない・少ないとき
ここからは、「そもそもブロックの一覧にふきだしブロックが出てこない」「SWELLブロックの数が明らかに少ない」といったケースを扱います。この場合は、設定というよりエディタやテーマの読み込みでトラブルが起きていることが多いです。
ブロック挿入画面での探し方を確認する
まずは基本的なところとして、「ふきだしブロックを正しい場所で探せているか」を確認しましょう。
- ブロック追加ボタンを押し、「SWELLブロック」カテゴリを開いて確認する
- 検索窓に「ふきだし」「吹き出し」「speech」など複数のキーワードを入れて探す
- 一度編集画面をリロードして、ブロック一覧を読み込み直してみる
意外と、「カテゴリを開いていなかった」「検索ワードが違っていた」という単純な理由で見つからないこともあります。あわてずに、このあたりから一つずつつぶしていきましょう。
SWELLブロックが半分くらいしか表示されない場合
「SWELLのブロック自体は出ているけれど、公式サイトで見た数より明らかに少ない」という相談もよくあります。この場合、ブロックエディタの読み込みでエラーが出ていたり、別のプラグインやブラウザ拡張機能が邪魔をしている可能性があります。
よくある症状と対処を整理すると、こんなイメージです。
| 症状 | 考えられる原因 | 試してほしい対処 |
|---|---|---|
| SWELLブロックが一部しか出ない | プラグインの競合 | 追加プラグインを一度止めてから、ブロック一覧を確認する |
| ふきだしブロックだけ見当たらない | SWELL側の読み込みエラー、キャッシュ | キャッシュを削除し、別のブラウザでも確認してみる |
| エディタ上部にエラーが出る | JavaScriptエラー | ブラウザの拡張機能や自動翻訳アドオンを一時的にオフにする |
ここまでやっても変わらない場合は、SWELLを再インストールしたり、サーバー側のエラーログを開いてみたりと、もう一歩踏み込んだ調査が必要になることもあります。そこまで来たら、公式フォーラムや販売元への問い合わせも検討してみてください。
親テーマ・子テーマの状態をチェックする
SWELLに限らず、WordPressのテーマは「親テーマ」と「子テーマ」で構成されることが多いです。子テーマ側でカスタマイズしている場合、知らないうちに吹き出しに関係する記述を変えてしまっていることもあります。
よくあるのは、次のようなパターンです。
- 子テーマのfunctions.phpで何かを読み込まないようにしてしまった
- 独自CSSがSWELLの吹き出し用CSSとぶつかっている
【稼げるキーワード教えます】
▼ ▼ ▼
一度、子テーマではなく親テーマに切り替えてみて、ふきだしブロックが問題なく出るかどうかを確認すると、テーマのカスタマイズが原因かどうかを切り分けやすくなります。
SWELLの吹き出しアイコンだけ表示されない・崩れるとき
次に、「吹き出しの枠は出ているのにアイコンだけ表示されない」「四角い枠や謎の記号が出てしまう」といった、アイコンまわりのトラブルに絞って見ていきます。
画像アイコンのパス切れや設定ミスを確認する
アイコンに画像を使っている場合、次のような理由で表示されなくなることがあります。
- メディアライブラリからアイコン画像を削除してしまった
- 他サイトの画像URLをそのまま貼っていて、アクセスできなくなった
- サーバー移転やドメイン変更のときに、画像の場所が変わってしまった
アイコントラブルの切り分け方を、ざっくり表にするとこんな感じです。
| 状態 | よくある原因 | 対処の方向性 |
|---|---|---|
| アイコンがまったく出ない | 画像ファイル削除、URLの間違い | メディアライブラリから画像を選び直して設定し直す |
| 一部の吹き出しだけアイコンが消える | 特定セットだけ設定が異なる | 問題のセットを開き、画像を再設定して保存する |
| 自分のPCでは出るが、別の端末では出ない | キャッシュやCDNの影響 | ブラウザキャッシュやCDNをクリアしてから表示を確認する |
まずは「SWELL設定 → ふきだし」からアイコン画像を選び直して保存し、吹き出しが正しく表示されるかどうか試してみてください。
Font Awesomeなどアイコンフォントを使っている場合
以前に使っていたテーマでFont Awesomeなどのアイコンフォントを多用していた場合、それをそのままSWELLでも使おうとしてうまくいかない、というパターンもあります。テーマによっては、アイコンフォントの読み込み方法やバージョンが違うからです。
この場合によくあるのは、次のような症状です。
- 同じクラス名を書いているのにSWELLではアイコンが出ない
- 一部のアイコンだけ表示され、他は四角いマークになる
アイコンフォントを使い続けたい場合は、SWELL側のアイコン設定で読み込みが有効になっているかを確認します。それでも安定しないようなら、思い切って画像アイコンに切り替えてしまうのも手です。画像にしておけば、テーマやアイコンフォントの仕様が変わっても影響を受けにくくなります。
アイコンサイズや余白のバランスを整える
アイコンが出てはいるものの、サイズや余白のバランスが悪くて読みにくくなっているケースもあります。
- アイコンが大きすぎて、吹き出しより目立ってしまう
- スマホで見たときに、アイコンだけやたら存在感がある
- 吹き出しの中の文字数が多く、画面がぎゅうぎゅうに感じる
こうした場合は、アイコンサイズを少し小さめに調整したり、1つの吹き出しに入れる文章量を減らしたりしてバランスを取ってみてください。同じSWELLの吹き出しでも、少し整えるだけでかなり読みやすくなります。
スマホでSWELL吹き出しが見づらいときの改善ポイント
ここでは、PCではそれなりに読めるのに、スマホで見るとSWELLの吹き出しが一気に読みにくくなるパターンを扱います。吹き出しは便利な表現ですが、使い方を間違えるとスマホ表示の邪魔になってしまうこともあります。
スマホで縦並び表示にするかどうかを決める
設定やカスタマイズによっては、アイコンと吹き出しの位置関係を変えられることがあります。スマホでは、次のようなことが起きがちです。
- アイコンが左、吹き出しが右に来るレイアウトだと横幅いっぱいになり、窮屈に見える
- 文字数が多い吹き出しは、1行あたりの文字が詰まりすぎて読みにくい
実際のスマホ画面で見ながら、縦に積むレイアウトにするのか、横並びにするのか、自分のサイトの雰囲気に合うほうを決めてみてください。
吹き出し内の文字量と改行バランスを見直す
吹き出しが表示されるようになると、うれしくて何でもかんでも吹き出しに入れたくなることがあります。私も一時期そうでしたが、これはちょっと危険です。
- 1つの吹き出しに長文を詰め込みすぎる
- 大事な説明のほとんどを吹き出し任せにしてしまう
- 感情のセリフと説明文が混ざって、どこからどこまでが会話なのか分からなくなる
吹き出しには、「相手の気持ち」「要点のひとこと」など短くて強いメッセージを中心に入れるのがおすすめです。説明の本文と吹き出しの役割を分けてあげると、スマホでもストレスなく読み進めてもらえます。
色やコントラストで読みやすさを確保する
吹き出しの色とページの背景色が近すぎると、スマホでは境界線がほとんど見えなくなることがあります。
- 背景が白っぽいなら、吹き出しには少し彩度のあるパステルカラーを選ぶ
- 文字色は黒か、それに近い濃いグレーにしてコントラストを保つ
- 必要であれば枠線や影をつけて、吹き出しを背景から浮き上がらせる
色を少し調整するだけでも、同じSWELLの吹き出しがずっと読みやすくなります。実際のスマホ画面で何パターンか試して、目にやさしい配色を探してみてください。
Cocoonなど他テーマからSWELLに移行したときの吹き出しトラブル
ここでは、Cocoonなど別のテーマからSWELLに乗り換えたときに起きやすい吹き出しトラブルをまとめます。私自身、テーマを変えたタイミングで「前はちゃんと出ていた吹き出しが、全部ただのテキストに戻ってしまった」という経験があります。
旧テーマのショートコードがそのまま残っている
多くの無料テーマや旧テーマでは、そのテーマ専用のショートコードで吹き出しを表示していました。SWELLに乗り換えたあとも、そのショートコードが記事の中に残っていると、SWELL側から見ると「意味のない文字列」にしか見えません。
その結果、次のようなことが起こります。
- 前のテーマで使っていた吹き出しがすべて解除されてしまう
- 記事中にショートコードの断片だけが残り、不自然な見た目になる
この場合は、次のような流れで対応していくのがおすすめです。
- 旧テーマのショートコードを検索して、どの記事に残っているかを洗い出す
- アクセスの多い記事や大事な記事から優先して、SWELLのふきだしブロックに置き換えていく
地道な作業にはなりますが、一つずつ置き換えていくことで、見た目も整い、今後の更新も楽になります。
アイコンフォントの仕様違いで表示されない
前のテーマでFont Awesomeなどのアイコンフォントを使って吹き出しアイコンを表示していた場合、新しいテーマではそもそもアイコンフォントを読み込んでいなかったり、バージョンが違っていたりします。
その結果、次のような状態になりやすいです。
- 同じクラス名を指定しているのに、SWELLではアイコンが出ない
- 一部のアイコンだけ表示され、他は四角いマークになってしまう
こうした場合は、SWELL側の設定でアイコンフォントを読み込むかどうかを確認しつつ、吹き出しアイコンについては画像に切り替えることも検討してみてください。画像にしておくと、テーマを変えたときでも見た目が崩れにくくなります。
一気に完璧を目指さず、重要記事から直す
テーマ移行直後に、すべての記事の吹き出しを一気に直そうとすると、作業量の多さに気持ちが折れてしまいます。私も最初は「全部いっぺんに終わらせよう」として挫折しかけました。
おすすめは、次のように優先順位をつけることです。
- アクセス数の多い記事
- 収益や問い合わせにつながる記事
- 読者からよくリンクされる記事
こういった重要度の高いページから順番に、SWELLの吹き出しへ置き換えていくと、モチベーションを保ちやすくなります。このページのチェックリストも使いながら、少しずつ整えていきましょう。
SWELL吹き出しが表示されないときのチェックリストまとめ
ここでは、これまでの内容を「状況別チェックリスト」として整理します。困ったときには、この部分だけ見返してもらえれば、どこから手を付ければいいか思い出せるはずです。
基本設定のチェックリスト
- SWELL設定 → ふきだしで、ふきだしセットが1つ以上登録されているか
- 各セットに、分かりやすい名前・アイコン画像・向き・色が設定されているか
- 記事では「ふきだし」ブロックを使っているか（ただの段落ブロックになっていないか）
- クラシックエディタの場合、ショートコードが途中で切れていないか
表示環境のチェックリスト
- シークレットウィンドウで開き直しても、吹き出しが表示されないままかどうか
- キャッシュ系プラグインのキャッシュを削除したか
- SWELLのキャッシュ削除ボタンを押して、再読み込みしたか
- JavaScriptやCSSをまとめるプラグインを一時的に止めてみたか
- AMPや特殊なモバイル表示を有効にしていないか
デザイン・アイコン周りのチェックリスト
- アイコン用の画像がメディアライブラリから削除されていないか
- アイコンフォントを使う場合、SWELL側で読み込みが有効になっているか
- スマホで見たときに、吹き出しの文字量が多すぎていないか
- 背景色と吹き出しの色が近すぎず、境界線が見分けやすいか
よくある質問（SWELL 吹き出し 表示されない編）
最後に、SWELLの吹き出しが表示されないことで悩んでいる方から、特によく聞かれる質問をQ&A形式でまとめました。
Q1. SWELLの吹き出しが一部の記事だけ表示されないのはなぜですか？
A. 記事ごとに使っているブロックやショートコードが違うケースが多いです。ある記事ではSWELLのふきだしブロックを使っていて、別の記事では旧テーマのショートコードがそのまま残っている、といったパターンです。
まずは、吹き出しが出ない記事の編集画面を開き、次の点をチェックしてみてください。
- ブロックエディタで「ふきだし」ブロックになっているか
- 古いショートコードがそのまま残っていないか
ショートコードが残っている場合は、SWELLのブロックに置き換えることで、表示されるようになる可能性が高いです。
Q2. SWELL 吹き出し 表示されない状態のまま放置するとSEOに悪影響ですか？
A. 直接ペナルティを受けるわけではありませんが、ユーザー体験の面ではマイナスになります。吹き出しは、会話形式で分かりやすく伝えたり、重要な一言を目立たせたりするための便利なパーツです。
それが表示されないままだと、次のような影響が出やすくなります。
- 要点が伝わりにくくなり、読者が途中で離脱しやすくなる
- 情報が整理されず、理解に時間がかかる
結果として、ページ滞在時間やコンバージョンにもじわじわ響いてきます。なるべく早いタイミングで吹き出しの表示を直しておくのがおすすめです。
Q3. SWELLの吹き出しを使いすぎると、逆に読みにくくなりますか？
A. はい、使い方によっては読みにくくなります。吹き出しが便利だからといって、すべての文章を吹き出しに入れてしまうと、どこが本筋なのか分かりづらくなってしまいます。
おすすめは、次のような使い方です。
- 登場人物のセリフや、本音を伝えたい一言だけを吹き出しにする
- 要点のまとめや補足を吹き出しにして、本文との役割を分ける
こうすることで、読者は「ここは特に大事なところだな」と自然に意識できるようになります。
まとめ：SWELL吹き出し表示トラブルを今日から解決しよう
この記事のポイントを振り返ります
- SWELLの吹き出しが表示されない症状は、基本設定・表示環境・アイコンやデザインの3つの観点で分けて考えると整理しやすいです。
- まずはふきだしセットが正しく登録されているか、記事側でふきだしブロックを使えているかを確認しましょう。
- 編集画面では見えるのに公開画面で消えるときは、キャッシュの削除とプラグイン競合の切り分けが近道です。
- 他テーマから移行した場合は、旧テーマのショートコードやアイコンフォントが原因になっていることが多いので、重要な記事から順番に見直していきましょう。
- 吹き出しが表示されるようになったあとは、スマホでの読みやすさや使いすぎにも気を配ると、読者にとってストレスの少ないページになります。
今日から取れる最初の一歩としては、「自分の症状がどのパターンなのか」をはっきりさせてから、このページのチェックリストに沿って一つずつ確認していくことです。
あわてず順番に見ていけば、SWELLの吹き出しはきちんと表示されるようになります。あなたのブログが、読みやすい会話風の記事でいっぱいになることを願っています。
記事を読んだらコチラ
▼ ▼ ▼
