SWELLの吹き出し設定方法と活用術｜表示されない原因も解説

SWELLでブログを運営していると、「もっと読者に親しみやすく、わかりやすく伝えたい」と感じることがありますよね。そんなときに役立つのが「吹き出し機能」です。

会話形式や体験談、レビューなどを視覚的に表現できるため、ブログの滞在時間や読者満足度アップにもつながります。

とはいえ、「吹き出しの設定方法がわからない」「表示されなくて困っている」といった声も少なくありません。この記事では、SWELLの吹き出し設定から活用法、トラブル対処までを画像付きで丁寧に解説します。

SWELLの吹き出し機能とは？

ブログに親しみやすさやストーリー性を加えるなら、「吹き出し」がとても便利！ここでは、SWELLで使える吹き出し機能の概要と、どんな場面で活躍するのかをご紹介します。

吹き出しとは？

吹き出しとは、キャラクターの発言やナビゲーションを会話形式で表示するデザイン要素のこと。読者にとって文章が読みやすくなり、直感的な理解がしやすくなります。

★こういうやつだよ！

SWELLの吹き出し機能の特徴

「情報の伝わりやすさ」「読者との距離感」を意識した設計になっている点が、他テーマとの大きな違いです。

SWELLで吹き出しを設定する手順【画像付き解説】

ここでは、SWELLで吹き出しを設定・作成する具体的な方法を、ブロックエディター・クラシックエディターの両方に分けて解説します。

吹き出しの登録手順（共通）

まずは吹き出しの元となる「パターン登録」を行います。

1. WordPress管理画面から「SWELL設定」→「ふきだし」を選択
2. 「新規追加」をクリック
3. 以下の情報を入力
   　- 名前：管理用の名称（例：「自分用」「男性キャラ」など）
   　- 画像：吹き出しのアイコン画像
   　- 表示名：記事中に表示される名前
   　- スタイル：左・右、白・グレーなどから選択
4. 「保存」ボタンをクリック

【（ここにSWELL設定＞ふきだしの管理画面キャプチャを挿入）】

ブロックエディターでの使用方法

ブロックエディターを使っている場合は、以下の手順で簡単に呼び出せます。

1. 「＋」ボタンから「ふきだし」ブロックを検索して追加
2. 右側の設定メニューで「登録済みの吹き出しパターン」を選択
3. 表示された吹き出しを編集・挿入

【（ここにブロックエディターで吹き出しを追加する操作画面キャプチャ）】

クラシックエディターでの使用方法（ショートコード）

クラシックエディターを使用している場合は、登録済みの吹き出しをショートコードで呼び出します。

• type: 吹き出しの形（drop / think など）
• subtype: 吹き出しの位置（L1=左、R1=右）
• icon: 使用する画像のURL
• name: 表示名

【（ここにクラシックエディターのショートコード記述例キャプチャ）】

吹き出しが表示されない・崩れる時の原因と対処法

せっかく吹き出しを設定したのに「なぜか表示されない」「スマホでレイアウトが崩れる」といったトラブルが起こることもあります。このセクションでは、よくある原因とその解決策を紹介します。

よくある表示トラブルと原因一覧

対処法1：登録パターンを確認する

ブロックエディターを使用している場合、吹き出しブロックに「登録済みのパターン」が正しく選ばれていないと、デザインが表示されません。

【（ここに吹き出しパターン選択ミスの例キャプチャ）】

設定画面で「登録済みのふきだし」が反映されているか確認しましょう。

対処法2：キャッシュを削除して再読み込み

吹き出しの変更が即反映されない場合、キャッシュの影響が考えられます。

• 使用しているキャッシュ系プラグインのキャッシュを削除
• ブラウザのキャッシュをクリア
• SWELL設定＞「キャッシュの削除」ボタンをクリック

【（ここにキャッシュ削除手順画面のキャプチャ）】

対処法3：画像のパス・URLを再確認する

ショートコードを使っている場合、icon="URL"のURL先が間違っていたり、画像自体が削除されていることがあります。
「メディアライブラリからコピーしたURL」を使うことで、表示漏れを防げます。

対処法4：プラグインの影響をチェック

一部のJavaScript・CSSを読み込むプラグインがSWELLと干渉し、表示崩れや表示不具合を引き起こすことがあります。以下の方法で確認してみましょう。

対処法5：スマホ表示の最適化を確認

スマホ画面でレイアウトが崩れてしまう場合、吹き出しのサイズや左右配置、画像サイズが影響することがあります。
SWELLはレスポンシブ対応済みですが、以下も確認しましょう。

• アイコン画像のサイズ（推奨：80px以内）
• テキスト量が多すぎないか
• CSSカスタマイズが干渉していないか

吹き出しが表示されない原因は「設定ミス」「キャッシュ」「画像URL」「プラグイン干渉」が大半です。

★一つずつ確認し、順番に解決していくのがポイント。モバイル表示（スマホでの見え方）の確認もしておきましょう。

吹き出しをカスタマイズしてブログをもっと魅力的に

吹き出しはただ使うだけでなく、自分のブログに合わせて「カスタマイズ」することで、読者の印象に残りやすくなります。このセクションでは、アイコン画像・名前・色などの変更方法と、おしゃれに見せる工夫を解説します。

アイコン画像をオリジナルに変更する方法

初期設定ではSWELLのデフォルト画像が使われていますが、ブログのキャラクターや著者の顔などに変更すると個性が際立ちます。

設定手順：

1. WordPress管理画面 → SWELL設定 → ふきだし
2. 該当する吹き出しパターンの「編集」をクリック
3. 「画像」項目で任意の画像をアップロード or 選択
4. 「保存」をクリック

【（ここに吹き出し編集画面で画像変更する操作のキャプチャ）】

おすすめ画像サイズ：

• 正方形：100px × 100px 程度
• ファイル形式：JPGまたはPNG（背景透過ならPNG推奨）

名前・肩書きの変更で印象を調整する

表示名には「名前」だけでなく、「〇〇先生」「運営者A」「レビュー担当」などの肩書きをつけると、専門性や信頼感も演出できます。

例：

• 「ゆうこ｜美容ブロガー」
• 「たけし先生｜FP資格保有」
• 「ママA｜3児のママ視点で解説」

このように、ターゲットや記事内容に合わせて柔軟に変更してみましょう。

デザイン（左右・色・形）の変更方法

吹き出しは、登録時に左右の配置・背景色・吹き出しの形などが選べます。読者の視線誘導にもつながるため、内容に応じたパターンを用意するのが効果的です。

CSSでさらに細かく調整したい場合

基本はノーコードで設定可能ですが、CSSでカスタマイズすればさらに自由度が高まります。
例えば、アイコンの枠を丸くしたり、影をつけたりといった装飾が可能です。

.speech-icon img {border-radius: 50%; box-shadow: 0 2px 6px gba(0,0,0,0.2);}

★※カスタマイズ時は、子テーマまたはカスタマイザーの「追加CSS」に記述しましょう。

使い分けたい！吹き出しの活用パターンとおすすめ例

吹き出しはただ装飾として使うだけでなく、文章の構造を整えたり、読者との距離を縮めたりする「設計ツール」としても効果的です。このセクションでは、具体的な活用パターンと、どんな場面でどの吹き出しを使うべきかをご紹介します。

活用パターン1：商品レビュー記事での比較コメント

読者の購買を後押しする商品レビュー記事では、吹き出しを使って複数視点の感想を並べることで説得力がアップします。

使い方の例：

• 左側に「実際に使った筆者の声」
• 右側に「別ユーザーの口コミ風コメント」

【（ここに商品レビュー記事での吹き出し使用例キャプチャ）】

活用パターン2：初心者向け記事でのナビゲーション役

専門的な内容を噛み砕いて解説する記事では、「先生役」「案内役」などの吹き出しを設置することで、親しみやすさが増します。

使い方の例：

• 記事の要点や補足を「先生風キャラ」が一言で解説
• 初心者目線の質問に答える形式で進行

読者の理解度を高め、途中離脱を防ぐ効果があります。

活用パターン3：体験談・ストーリー記事での感情表現

体験談や失敗談では、リアルな感情を吹き出しで補足することで、共感を得やすくなります。

使い方の例：

• 回想シーンで「当時の自分の声」を吹き出しで再現
• 驚きや失敗のセリフを会話風に見せる

「セリフ形式」は文章に緩急をつける手法としてもおすすめです。

活用パターン4：雑記ブログ・日記系での雑談挿入

雑記系やライフスタイル系ブログでは、筆者のちょっとしたつぶやきを吹き出しにするだけで、文章に温かみが出ます。

使い方の例：

• 「ここだけの話なんですが…」
• 「ぶっちゃけ、この部分は悩みました」

吹き出しで語りかけるように話すことで、読者との距離がぐっと近づきます。

活用パターン別：おすすめ吹き出しスタイル早見表

吹き出しの使い方＝読者への見せ方です。シーンに応じて「誰の声なのか」を明確にすると、伝わりやすくなります。

★特に、感情・視点・立場の切り替えに吹き出しは非常に効果的だよ。

吹き出し活用の注意点と失敗しないためのポイント

吹き出しは便利な一方で、使い方を間違えると「読みにくさ」や「違和感」を与えてしまうリスクもあります。

ここでは、吹き出し活用時に気を付けるべき注意点と、失敗しないためのコツを解説します。

注意点1：吹き出しの使いすぎに注意する

吹き出しは視覚的に目立つため、多用しすぎると逆に読者が疲れてしまいます。
特に、以下のような状態は避けましょう。

• 吹き出しだけで記事が埋まってしまう
• 無理に会話形式にしすぎて違和感が出る
• 本文とのつながりがわかりにくい

注意点2：スマホ表示でレイアウトを必ず確認する

デスクトップでの見た目だけにこだわると、スマホではレイアウト崩れや読みにくさが発生する場合があります。特に注意したいポイントは以下です。

• 吹き出しの横幅（テキストが折り返しすぎないか）
• アイコン画像の大きさ（小さすぎず、大きすぎず）
• テキストサイズ（スマホでは大きめ推奨）

【（ここにスマホプレビューで吹き出しチェックしている画面キャプチャ）】

注意点3：色やデザインの統一感を意識する

吹き出しの色やスタイルがバラバラだと、記事全体が雑然とした印象になりがちです。特に注意したいのは以下のケースです。

• 赤・青・緑などバラバラな色を多用
• 左右の向きが統一されていない
• 吹き出しごとにキャラクターがバラバラ

注意点4：アクセシビリティ（読みやすさ）に配慮する

視覚的には華やかでも、読みづらくなっては意味がありません。
色のコントラストや文字サイズにも気を配りましょう。

吹き出しは「適度に」「意図を持って」使うことが大切。また、スマホ最適化・デザイン統一・読みやすさに注意して活用しましょう。

【コピペOK】ショートコード吹き出しテンプレート集

クラシックエディターを使用している場合や、ブロックエディターでも柔軟にカスタマイズしたい場合には、ショートコードでの吹き出し活用が便利です。

ここでは、用途別にそのまま使えるショートコードテンプレートをご紹介します。

※吹き出しのデザインは「SWELL設定 ＞ ふきだし」にて事前に登録しておく必要があります。
画像URLや名前部分はご自身の内容に置き換えてご利用ください。

基本形：左寄せ・シンプル白背景

[speech_bubble type=”drop” subtype=”L1″ icon=”https://example.com/img1.jpg” name=”ゆうこ”]こんにちは、SWELLの吹き出し機能についてご紹介します。[/speech_bubble]

右寄せ：補足や解説者役に

[speech_bubble type=”drop” subtype=”R1″ icon=”https://example.com/img2.jpg” name=”たけし先生”]なるほど、それはこう考えるとわかりやすいですね。[/speech_bubble]

思考型（モノローグ）スタイル

[speech_bubble type=”think” subtype=”L1″ icon=”https://example.com/img3.jpg” name=”私の心の声”]これって本当に効果あるのかな…？[/speech_bubble]

商品レビュー向け：比較コメント形式

[speech_bubble type=”drop” subtype=”L1″ icon=”https://example.com/user1.jpg” name=”Aさん”]使ってみて、操作性が抜群に良かったです！[/speech_bubble]

[speech_bubble type=”drop” subtype=”R1″ icon=”https://example.com/user2.jpg” name=”Bさん”]私はデザインの美しさが気に入っています。[/speech_bubble]

注意点：ショートコードの記述ミスに注意

"（ダブルクオーテーション）が抜けているとエラーになります。アイコン画像のURLは完全なURLで記載（メディアライブラリから取得）しましょう。

また、nameの中に絵文字や記号を入れるとレイアウトが崩れることがあるので、注意が必要です。

SWELLの吹き出しを使いこなして読まれるブログに

SWELLの吹き出し機能は、単なる「装飾」ではなく、読者に伝わりやすい記事構成をつくる重要な要素です。設定やカスタマイズも直感的で扱いやすく、ブログ初心者から上級者まで幅広く活用できます。

吹き出しをうまく活用できると、記事全体に「ストーリー性」や「信頼感」を加えることができ、読者の滞在時間アップやアフィリエイト成約率の向上にもつながります。

SWELLは吹き出し以外にも「高速表示」「ブロック拡張」「カスタマイズ性」など、ブログ運営に必要な機能がすべて揃ったテーマ。
吹き出しも簡単にできるので、初心者にもおすすめです。