【SWELL】ふきだしブロックの入れ方とセットの選び方
SWELLの「ふきだし」ブロックは、会話のような形で一言を入れたいときに使います。アイコンや名前は、あらかじめ登録した「ふきだしセット」から選べるので、記事ごとに画像を選び直す必要がありません。
この記事では、ふきだしブロックを本文に入れて、登録済みのふきだしセットを選ぶところまでを扱います。ふきだしセットの登録は扱いません。
手順の要点：ふきだしブロックを入れて、サイドバーの「ふきだしセット」から使うセットを選ぶ。
この記事でできること
- ふきだしブロックを本文に入れられる
- 登録済みのふきだしセットを選べる
- ふきだしの向きや形を、そのブロックだけ変えられる
ふきだしは、どんなときに使うと効果的ですか？
読む人が思っていそうな疑問と、その答えを並べたいときです。この部分も、ふきだしブロックで作っています。
前提
- 環境：WordPress 7.1、テーマはSWELL（2026年11月時点の、ブロックエディターの画面です）
- 必要な権限：投稿を編集できる権限
- 所要時間の目安：10分ほど
- 先に用意するもの：編集中の投稿（下書きでかまいません）、登録済みのふきだしセット
ふきだしセットが登録されているかは、管理画面の左のメニューの「ふきだし」をクリックすると見られます。「ふきだしセット一覧」という画面に、登録済みのセットが並びます。セットがないときは、同じ画面の「新規ふきだし追加」から登録します。登録の手順は、この記事では扱いません。
ふきだしブロックを入れる
この手順で、本文にふきだしが入ります。
- 投稿の編集画面で、ふきだしを入れたい場所の、空の段落をクリックします。
- 左上の青い「＋」ボタンをクリックします。
- 「SWELLブロック」を開きます。
- 「ふきだし」をクリックします。
- ふきだしの中の文字を、伝えたい文章に書き換えます。
ふきだしセットを選ぶ
この手順で、ふきだしのアイコンと名前が決まります。
- 本文のふきだしをクリックして、ふきだしブロックを選びます。
- 画面右上の、サイドバーを開くボタンをクリックします。
- サイドバーの上にある「ブロック」タブをクリックします。
- 「ふきだしセット」の中から、使いたいセットをクリックします。
下は、このページに実際に入れたふきだしブロックです。
これが、ふきだしブロックの実際の表示です。
そのブロックだけ、見た目を変える
ふきだしセットを選んだあと、サイドバーの「ふきだし設定」で、そのブロックだけ見た目を変えられます。画面で確かめた項目は、次のとおりです。
| 項目 | 選べるもの |
|---|---|
| ふきだしの形 | 発言／心の声 |
| ふきだしの向き | 左／右 |
| ふきだしの線 | なし／あり |
| アイコンの丸枠 | 枠なし／枠あり |
| スマホでのテキストとアイコンの並び | 横並び／縦並び |
| アイコン下に表示する名前 | 文字を入力 |
| アイコン画像 | メディアから選択／削除 |
公式マニュアルでは、ここでの設定は、ふきだしセットの設定より優先されると案内されています。
下は、同じふきだしセットのまま、このブロックだけ「ふきだしの形」を「心の声」、「ふきだしの向き」を「右」に変えた例です。
このブロックだけ、形と向きを変えています。
できたか確かめる
次の3つで確かめます。
- 編集画面のふきだしに、選んだセットのアイコンと名前が出ていること
- 画面右上の「表示」ボタン（パソコンの形のアイコン）→「デスクトップ」で、アイコンと文章が並んで見えること
- 画面右上の「表示」→「モバイル」でも、アイコンと文章が崩れずに見えること
よくあるつまずき
| 症状 | 原因 | 直し方 |
|---|---|---|
| 「ふきだしセット」に、使いたいセットがない | セットが登録されていない | 左のメニューの「ふきだし」→「新規ふきだし追加」で登録する（登録の手順は、この記事では扱いません） |
| セットの設定を直したのに、記事のふきだしが変わらない | そのブロックで、アイコン画像を直接指定している | 「ふきだし設定」の「アイコン画像」を「削除」して、セットの画像に戻るかを確かめる |
| ふきだしの向きが、思った側にならない | そのブロックの「ふきだしの向き」が、セットの向きと別になっている | 「ふきだし設定」の「ふきだしの向き」で、左か右を選び直す |
まとめ
やること：ふきだしブロックを入れて、サイドバーの「ふきだしセット」から使うセットを選ぶ
確かめ方：編集画面と、「表示」の「デスクトップ」「モバイル」で、アイコンと文章の並びを見る
つまずいたら：セットの登録と、ブロックの「アイコン画像」の直接指定を見直す
次の一歩
ブロックのほかの使い方は、公開済みの次の記事で扱っています。
