SWELLのふきだしブロックの設定と使い方｜アイコン・色・向きも解説

そんな方に向けて、この記事は書いています。

結論から言うと、SWELLのふきだし設定は5分あれば完成します。

私も最初はどこで設定するのか迷いましたが、手順を覚えてしまえばあとは簡単です。

✅この記事でわかること

この記事では、実際の手順を画像付きでやさしく解説していきます。

SWELLのふきだしブロックとは？

SWELLふきだしとは、アイコン画像とセリフを組み合わせて会話形式で表示できる機能です。

テキストだけの記事は、読者が疲れやすく途中で離脱してしまうことがあるので、適度にふきだしを入れて記事にメリハリをつけるのがおすすめです。

✅ ふきだしを使うメリット

ふきだしはSWELLの中でも特に人気の機能です。

ふきだしがあるだけで、記事の雰囲気がグッと親しみやすくなるので、ぜひ使いこなしていきましょう。

最初にカラーセットを確認しておこう

SWELLのふきだしは、カラーセットで好きな色に設定することができます。

カラーセットは、サイト全体のふきだしの色に影響するので、最初に確認しておくのがおすすめです。

後から変更することもできますが、最初に決めておく方が手間が省けます。

✅ SWELLのカラーセット

最初は、図のように「グレー」「グリーン」「ブルー」「レッド」「イエロー」の5色が設定されています。

変更したい場合は、「SWELL設定」 → 「ふきだし」から「背景色・ボーダー色」を変更できます。

気に入った色が最初から用意されている5色の中にあれば、そのまま使ってOKです。

【5STEPで完了】ふきだしセットの設定手順

ふきだしを使うには、「ふきだしセット」を登録する必要があります。

ふきだしセットとは、アイコン画像・向き・色などをあらかじめ登録しておく設定のことです。

一度登録してしまえば、記事を書くたびに呼び出すだけで使えます。

以下の5STEPで完了します。

✅ふきだしセットの設定手順

順番に設定していきましょう。

STEP① ふきだしを開く

WordPress管理画面の左サイドバーから「ふきだし」をクリックします。

「ふきだしセット一覧」の画面が表示されたら、「新規ふきだし追加」をクリックしてください。

STEP② ふきだしセットのタイトルを入力する

次に、「ふきだしセットのタイトル」に管理用の名前を入力します。

この名前は読者には表示されないので、自分がわかりやすい名前をつけておきましょう。

複数のふきだしを登録する場合は、後から見てわかるように「カメちゃん・右向き・グリーン」のように具体的につけておくのがおすすめです。

STEP③ アイコン画像を設定する

タイトルが入力できたら、ふきだしに使うアイコン画像を設定します。

アイコン画像はふきだしの顔になる部分なので、自分のキャラクターや似顔絵など、サイトのイメージに合ったものを選ぶのがおすすめです。

「アイコン画像」の「画像を選択」をクリックして、メディアライブラリから画像を選択するか、直接アップロードして設定してください。

アイコン画像は正方形の画像を使うと、きれいに表示されます。

STEP④ 名前・向き・色・形を設定する

画像の登録ができたら、ふきだしのデザインを設定していきます。

それぞれの項目を設定することで、自分のサイトに合ったオリジナルのふきだしが作れます。

✅ 設定できる項目

向きはアイコン画像の向きに合わせて設定するとバランスよく見えます。

STEP⑤ 登録して完了

設定が終わったら「登録」ボタンをクリックして完了です。

登録を忘れると設定が保存されないので注意してください。

「ふきだしセット一覧」に追加したふきだしが表示されていれば、設定完了です。

【超簡単】記事でふきだしを呼び出す方法

ふきだしは設定さえ完了していれば、呼び出し自体はとても簡単です。

記事編集画面で「/ふきだし」と入力するだけで呼び出せます。

呼び出したふきだしブロックをクリックすると、右サイドバーに登録したふきだしセットの一覧が表示されます。

使いたいふきだしを選択して、セリフを入力すれば完成です。

もし、色や向きなどを変更したくなった場合は、右サイドバーでその都度変更することもできます。

ふきだしを使うのにおすすめな場面3つ

設定ができたところで、ふきだしを使うのに効果的な場面3つをご紹介します。

✅ふきだしが効果的な場面

それぞれ詳しく解説していきます。

① 筆者の本音や補足を伝えたいとき

ふきだしは、記事の本文では書きにくい「個人的な感想」や「ちょっとした補足」を伝えるのに最適です。

テキストだけで書くより、ふきだしで伝えた方が読者に親しみやすい印象を与えられます。

たとえば、手順の説明の後に「私はここで少し迷いました」というひと言をふきだしで添えるだけで、読者との距離がぐっと縮まります。

ふきだしは、筆者の人間味を伝える最高のツールです。

② 読者の疑問を代弁するとき

リード文などで読者の疑問をふきだしで表現するのも効果的です。

「この記事は自分のために書かれている」と感じてもらうことで、読者が最後まで読んでくれやすくなります。

当ブログでも毎回使っており、「SWELLのふきだしってどうやって設定するの？」という書き出しのように、読者が抱えている疑問をそのままふきだしで表現するだけで、記事への引き込みが強くなります。

読者の声を代弁するふきだしは、記事の冒頭で特に効果的です。

③ 記事の流れにアクセントをつけたいとき

テキストが続く部分にふきだしを入れると、読者が疲れずに最後まで読んでくれやすくなります。

テキストだけが続く記事は、視覚的に単調になりがちで、読者が途中で離脱しやすくなります。

そこに、見出しごとに1つふきだしを入れるだけで、記事全体のリズムが生まれて読みやすくなります。

ふきだしを適度に使って、読者が最後まで読みたくなる記事を作っていきましょう。

まとめ：SWELLふきだしを設定して記事をもっと読みやすくしよう

ここまで、SWELLふきだしの設定方法と使い方を解説してきました。

✅ この記事のまとめ

ふきだしを使うだけで、記事の読みやすさが格段に上がります。

まだ設定していない方は、ぜひこの記事を参考に設定してみてください。

ふきだし以外のSWELLのブロックエディタの使い方については、こちらの記事で詳しく解説しています⬇️