SWELLを使い始めたけれど、ふきだしブロックの使い方がわからず悩んでいませんか？
記事に変化をつけたいと思っても、具体的な設定方法や活用シーンがイメージできないと使いづらいと感じてしまうでしょう。
SWELLのふきだしブロックを使えば、会話形式で読者にフランクな印象を与え、記事の読みやすさを向上させることができます。
この記事では、SWELLを使って記事を書いている私が、ふきだしブロックの設定方法を7つのステップで解説します。
ふきだしブロックを使った具体的な活用例も紹介するので、初心者の方はぜひ参考にしてみてください。
- SWELL ふきだしブロックの設定方法
- SWELL ふきだしブロックの活用例
- SWELL ふきだしブロックを使う際の注意点
私が使っているふきだしブロックはSWELL専用です！SWELLのインストールがまだの方はこちらからどうぞSWELLの購入はこちら
SWELLのふきだしブロックとは
Reinaまさに今私が話しているこの枠が、SWELLのふきだしブロックです！
SWELLのふきだしブロックは、記事内で会話形式の表現ができるブロック機能です。
ふきだしブロックは、アイコンとふきだしを組み合わせることで、読者に親しみやすい印象を与えられます。
ふきだしブロックはWordPress無料のテーマでも搭載されています。
しかし、SWELL独自のふきだしブロックは、カスタマイズすると簡単に呼び出すことができるのが魅力的です。
ブログ記事に変化をつけたいときや、読者への語りかけを強調したいときに活躍するでしょう。
設定項目も豊富で、デザインを細かくカスタマイズできる点が特徴です。
SWELL ふきだしブロックを使うべき3つの理由
Reinaふきだしって、使った方がいいんですか？
ふきだしブロックには、記事の読みやすさと印象を向上させる効果があります。
ただテキストを並べるだけでは伝わりにくい内容も、ふきだしを使うことで読者の理解を深められます。
- 文字ばかりの記事の休憩所になる
- 読者にフランクな印象を与えることができる
- 説明や注意喚起など補足として使える
ここからは、ふきだしブロックを活用すべきこれら3つの理由を詳しく見ていきましょう。
文字ばかりの記事の休憩所になる
長文が続く記事では、読者が疲れてしまい離脱する可能性が高まります。
ふきだしブロックを適度に挟むことで、視覚的な変化が生まれ、読者に小休憩のタイミングを提供できます。
文章の区切りとしても機能するため、スクロールしながら読み進める際の目印にもなるでしょう。
説明が複雑になりそうな箇所では、ふきだしで一言添えるだけで読者の理解を助けられます。
Reina文字ばかりの記事は疲れてしまいますよね。このように所々ふきだしを入れることで、見やすさを提供できます！
読者にフランクな印象を与えることができる
文章だけのかしこまった記事では、読者との距離感が遠くなってしまうでしょう。
ふきだしを使うことで、会話しているような親近感を演出できます。
また堅苦しい説明も、ふきだし内で語りかける形にすれば柔らかい印象に変わります。
読者は「自分に向けて話しかけてくれている」と感じやすくなり、記事への共感度が高まるでしょう。
専門的な内容でも、ふきだしで優しく補足することで心理的なハードルを下げられます。
Reina個人ブログであれば、ふきだしを使って柔らかい印象を与えることをおすすめします！
説明や注意喚起など補足として使える
本文の流れを崩さずに補足情報を追加したいときに、ふきだしブロックは便利です。
ふきだしで「ちなみに」や「ここがポイント」といった補足を入れることで、読者の理解を深められるでしょう。
注意点や重要な情報を強調したい場合にも活用できます。
本文中に埋め込むより目立つため、読者が見逃しにくくなるメリットがあります。
Reinaあえてふきだしを使って、伝えたい内容を強調するのもよいですね！
SWELL ふきだしブロックの設定方法【7つのステップ】
Reinaではここから、SWELLのふきだしブロックの設定から呼び出しまで詳しく解説します！
ふきだしブロックには複数のカスタマイズ項目が用意されています。
デザインや配置を調整することで、記事の雰囲気に合わせた表現が可能です。
- 名前の入力とアイコンの選択
- アイコンの丸枠の有無
- ふきだしの向きの選択
- ふきだしの色の設定
- ふきだしの形の選択
- ふきだしの線の有無
- 完成したふきだしを呼び出す
次で、SWELL ふきだし 設定方法として主要な7つの項目を解説します。
名前の入力とアイコンの選択
では、早速ふきだしを設定していきましょう。管理画面の左項目「ふきだし」をクリックします。
ふきだしをクリックしたら、ふきだしセット一覧が表示されるので、「新規ふきだし追加」をクリックします。
ボタンをクリックしたら、以下のページが表示されます。
「ふきだしセットのタイトルを入力」に任意の名前と、アイコンの下にも同様に任意の名前を付け、アイコン画像を選択します。
アイコンも任意で設定します。枠にハマるように気を付けて、画像を選択しましょう。
Reinaでは、次から右の詳細について説明していきますね！
アイコンの丸枠の選択
アイコン画像の周囲に表示される丸枠の有無を選択できます。
枠ありと枠なしの2つどちらかを選べるため、使用する画像やブログのデザインに合わせて設定しましょう。
枠ありを選択すると、このようになります。
Reina画像や記事のトーンに合った枠を選択するといいですね！
ふきだしの向きの選択
アイコンを左右どちらに配置するか選択できます。
現在は左になっていますが、右に選択してみましょう。
会話形式で複数のふきだしを使うときに、向きを変えることで対話している様子を表現できるでしょう。
左向き(アイコンが左)は、読者への語りかけに適しています。
右向き(アイコンが右)は、読者側の疑問や反応を表現するときに使うと効果的です。
Reina会話形式を作りたい方は、ぜひ参考にしてみてくださいね！
ふきだしの色の設定
ふきだしの背景色を自由に設定できます。
実際に色を選んでみましょう。試しに右の緑を選択してみます。
背景色は、記事のデザインやブランドカラーに合わせて選ぶとよいでしょう。
色選びのポイントは、本文とのコントラストです。
あまりに派手な色は読みづらくなるため、淡いトーンの色がおすすめです。
Reinaデフォルトで設定するふきだしの色を変えたい場合、下の「エディター設定」から変更できますよ！
また、複数のキャラクターを使う場合、それぞれ異なる色を設定すると区別しやすくなります。
ふきだしの形の選択
ふきだし部分の形状を変更できます。
形としては「発言」と「心の声」の2種類あります。では心の声を選択してみます。
「発言」タイプの形は、記事の補足や注意喚起に適しているでしょう。
一方「心の声」タイプの形は、執筆者の感情や思っていることを伝える際に使用すると、ユーザーに親しみを与えることができます。
ふきだしの線の有無
ふきだしの枠線の有無を選択できます。
枠線なしはシンプルで洗練された印象です。では、ふきだしの線を「あり」に変えてみましょう。
枠線ありにするとふきだしの輪郭がはっきりし、目立ちやすくなりました。
完成したふきだしを呼び出す
Reinaでは、実際にふきだしを作って記事内に呼び出してみましょう！
自分好みのふきだしが完成したら、「登録」をクリックします。
登録したら、記事内に呼び出してみましょう。＋ボタンを押して「ふきだし」をクリックします。
クリックしたら、登録したふきだしが出てきました。
先ほど管理画面でふきだしをデフォルトで設定しましたが、記事内でも変更することが可能です。
Reina以上がふきだしの設定方法でした！ぜひ使ってみてくださいね！
SWELLはシンプルなのに高機能なブロック搭載の、WordPress有料テーマです。
初心者でもわかりやすく、綺麗なデザインのサイト作成が可能！
どの有料テーマに悩んでいる方は、ぜひSWELLを使用して自分だけのサイトを作ってみてください。
＼ シンプルなのに、高機能 ／
SWELL ふきだしブロックの活用例3選
Reinaここでは、実際に私が使っているふきだしの活用例を紹介します！
実際にふきだしブロックをどう使えば効果的か、具体的なシーンを3つ紹介します。
- 冒頭で読者の疑問点を伝える
- 合間に記事の説明の補足や感情を伝える
- 質問応答のシーンで使う
これらの活用方法を参考にすれば、読者にとって価値のある記事が作れるでしょう。
それでは、ふきだしブロックの活用例3つを、もう少し詳しく紹介していきます。
冒頭で読者の疑問点を伝える
見ていただいてわかるように、私はふきだしブロックを見出しの冒頭で使用しています。
記事の導入部分を、ふきだしブロックを用いて読者の疑問を代弁します。
そうすることで、「この記事は自分の悩みを解決してくれる」という印象を与えることに効果的でしょう。
読者目線に立って、質問を投げかけると尚良いです。
Reina例えば、「なぜ〇〇はやるべきと言われているだろう」と冒頭で説明すると、その章で詳しく書かれているだろうと思いますよね！
検索してきた読者が抱えている課題を明確にすることで、記事への期待値が高まります。
その後の説明にも自然に引き込めるでしょう。
合間に補足説明や注意喚起、感想を伝える
こちらでもお伝えしましたが私自身記事を書く合間合間に、補足説明や注意喚起、自身の感情などを伝えています。
説明が続く中で、経験や感想を挟むと記事に温かみが生まれます。
その際ふきだしを使えば、本文の流れを壊さずに個人的な見解の追加が可能です。
またプログラミングといった技術的な文章は、解説だけでは無機質になりがちな内容も、ふきだしで一言添えることで読者との距離が縮まります。
注意喚起も、あえてふきだしを使って伝えることで、緊張感を伝えることができるでしょう。
Reinaふきだしを使うことで、よりリアルな感想を伝えることができますね！
質疑応答のシーンで使う
ほかにもQ&A形式で記事を書きたいときは、ふきだしの活用が特に効果的です。
質問と回答を視覚的に区別できるため、読者が内容を理解しやすくなります。
右向きのふきだしで質問、左向きのふきだしで回答という構成にすると、実際の会話のような自然な流れが作れます。
実際にふきだしを使って、質疑応答をしてみましょう。
例：SWELL ふきだしブロックを使った質疑応答
Reinaどうしてブログを始めようと思ったのですか？
知人前から興味があったことと、少しでも稼ぎの足しに慣れたらよいと思って、ブログにチャレンジしてみました！
Reinaいいですね！ちなみにテーマは何を使われていますか？
知人有料テーマ「SWELL」を使用しています！
…
このように、ふきだしを使って質疑応答場面を作ると、読者により見やすさを提供することができます。
SWELL ふきだしブロックを使う注意点3つ
Reinaここではふきだしブロックを使う際の注意点を紹介しますね。
便利なふきだしブロックですが、使い方を誤ると逆効果になります。
適切に活用するための注意点を3つ押さえておきましょう。
- ふきだしの文章は長くても3行までに抑える
- 一度にふきだしの使う割合を多すぎないようにする
- ふきだしのアイコンは枠にハマる画像を使用する
ここからは、ふきだしを使う際に気をつけたい、これら3つのポイントを説明します。
ふきだしの文章は長くても3行までに抑える
ふきだし内のテキストが長すぎると、かえって読みにくくなるので、短いコメントや補足に適した文章にしましょう。
スマートフォンから読まれることも考えて、長くてもパソコンから見ての行数は3行までに抑えることをおすすめします。
Reinaパソコン、スマートフォンどちらからの見やすさも意識するようにしましょう。
どうしても長い説明が必要な場合は、本文に書いた方が適切です。
ふきだしは一言でまとめられる内容に限定しましょう。
一度にふきだしの使う割合を多すぎないようにする
ふきだしを連続で使いすぎると、記事全体がチャット風になってしまいます。
本来伝えるべき情報が埋もれてします恐れもあるため、重要な部分はふきだしではなく、記事内に記載するようにしましょう。
理想的なバランスは、見出し1つにつき1〜2個程度です。本文の合間に適度に挟むとよいでしょう。
Reina質疑応答のような複数人のふきだしはOKですが、同じ人のふきだしの多用は控えた方がよさそうですね。
ふきだしのアイコンは枠にハマる画像を使用する
ふきだしのアイコンの画像を設定する際は、枠にぴったりとハマるようにしましょう。
もし設定したアイコン画像が、端っこが見切れていたりすると目立ってしまうため、設定した後プレビューなどで確認を忘れないことです。
設定する画像サイズは正方形のものを使用すると失敗しにくいです。
アイコンにしたい画像は、事前にトリミングをして登録するようにしましょう。
そのほか、小さすぎるアイコンも何が映っているのかわかりにくいため、避けた方がよいです。
Reina以上をふまえて、自分だけのふきだしブロックをデザインしてみましょう！
まとめ：SWELL ふきだしブロックを使おう！
今回はSWELLのふきだしブロックの設定方法や活用例を紹介しました。
SWELLのふきだしブロックは、会話形式で記事を表現できる機能です。
文字ばかりの記事に視覚的な変化を加え、読者にフランクな印象を与えられます。
冒頭での疑問提示や補足説明、質疑応答など幅広く活用できるでしょう。
ただし文章は3行以内に抑え、使いすぎないことが大切。
適度に取り入れることで、読みやすく親しみやすい記事をぜひ作ってみてくださいね。
