記事に「会話形式の吹き出し」があると、ぐっと読みやすく親しみやすくなります。SWELLなら吹き出しもプラグイン不要。先にアイコンを登録しておけば、あとはブロックを選ぶだけで会話が作れます。この記事では、アイコン登録から実際の使い方、使いすぎないコツまで解説します。
ブログ歴6年・SWELL歴5年の僕が、吹き出しの設定と効果的な使い方を、つまずきポイント込みで紹介します。
- 吹き出し用アイコンの登録方法
- 吹き出しブロックの使い方と種類
- 読みやすくなる吹き出しの使い方のコツ
ちなみに、この吹き出しもSWELLの標準機能で出しています。プラグインは使っていません。
目次
SWELLの吹き出しとは？プラグイン不要で会話形式が作れる
SWELLの吹き出しは、アイコン画像とセリフをセットで表示できる機能です。「読者役」と「解説役」を交互に出して会話形式にしたり、ポイントを語りかけたりできます。吹き出し系のプラグインは不要で、SWELL標準のブロックだけで完結します。
吹き出しのアイコンを登録する
吹き出しを使うには、まずアイコン（話し手）を登録します。一度登録すれば、どの記事からでも呼び出せて便利です。
管理画面の「SWELL設定」→「吹き出し」タブを開き、「新規追加」を選びます。
話し手の名前（呼び名）とアイコン画像を登録します。アイコンは正方形（300px前後）の画像が見栄えします。
「読者役」「解説役」「困り顔」など、表情違いも含めて複数登録しておくと、会話に変化をつけられます。
画像挿入：SWELL設定の吹き出しアイコン登録画面のスクリーンショット
吹き出しブロックの使い方
アイコンを登録したら、記事内で吹き出しを呼び出します。手順はかんたんです。
- 編集画面でブロック追加（＋）から「吹き出し」を選ぶ
- 右側の設定で、登録済みのアイコン（話し手）を選択する
- 吹き出しの中にセリフを入力する
これだけで会話形式の吹き出しが完成します。話し手を切り替えながら2〜3往復させると、自然な会話になります。
吹き出しのデザイン・種類を変える
吹き出しブロックの設定では、見た目も細かく変えられます。
- アイコンの位置：左／右（会話の向きを変えられる）
- 吹き出しのタイプ：通常のセリフ／考え事（もやもや）
- 枠線・塗り：線あり／塗りつぶしなどの形
- 色：アクセントカラーをサイトに合わせて変更
「読者役は左・解説役は右」のように位置を固定すると、誰が話しているか直感的に伝わります。色は見出しなどと揃えると統一感が出ます。
吹き出しを使うコツと注意点
便利な吹き出しですが、使いすぎると逆に読みにくくなります。僕が意識しているコツはこの3つです。
- 1記事に3〜5箇所まで：多用すると本文が散らかって見える
- 連続で並べない：吹き出しの間に通常の段落を挟む
- 役割を決める：読者の疑問・共感を代弁する、結論の前置きをする、など用途を絞る
「ここぞ」という場所に置くから効くんです。全部に吹き出しを付けると、どれも目立たなくなります。
よくある質問（FAQ）
- 吹き出しのアイコンは何枚まで登録できますか？
実用上は十分な数を登録できます。読者役・解説役・表情違いなど、よく使うパターンを登録しておくと記事作成がスムーズです。
- 吹き出しのアイコンはどんな画像がいいですか？
正方形・300px前後・背景透過のPNGがおすすめです。顔やマークが中央に来る画像なら、丸く切り抜かれてもきれいに表示されます。
- 吹き出しプラグインから乗り換えても大丈夫ですか？
SWELLの吹き出しに統一するのがおすすめです。プラグインの吹き出しはショートコードで作られていることが多く、プラグインを止めると表示が崩れる場合があるので、過去記事は順次置き換えていきましょう。
まとめ：吹き出しは登録してしまえばあとはラク
SWELLの吹き出しは、アイコンを登録してしまえば、あとはブロックを選んでセリフを入れるだけです。プラグインも不要。読者役と解説役を使い分けると、記事がぐっと読みやすくなります。ただし使いすぎは禁物。1記事3〜5箇所を目安に、ここぞという場面で使いましょう。他のカスタマイズも、使い方ガイドの早見表から逆引きで進められます。
これからSWELLを導入する方へ。吹き出しのように、会話形式やボックスなどの装飾がコードなしで使えるのがSWELLの魅力です。買い切りで複数サイトに使えます。
