国内シェアNo1サービスの「中の人」がブログ運営に役立つ情報をわかりやすくお届け!

初心者のためのブログ始め方講座

国内シェアNo1サービスの「中の人」がブログ運営に役立つ情報をわかりやすくお届け!

WordPressブログにアイコン付き吹き出しを挿入する方法!作り方や使い方を解説

\この記事をシェアする/

T部長

当メディアはリンクフリーです。SNSやブログでご紹介いただけると嬉しいです。

【2024年9月13日更新】「WordPressのテーマを活用する方法」で、テーマ『XWRITE』を使って吹き出しを作る手順に変更しました。

この記事のレベル
初心者
(3.5)
重要度
(3.0)
難しさ
(2.0)

こんにちは、T部長です!

数多くのブログで使われている「吹き出し」

「自分のブログでも吹き出しを使ってみたい」と思っている人は多いのではないでしょうか。

そこで、この記事ではブログに吹き出しを挿入する方法やメリット・デメリット、注意点を解説します!

T部長

この記事は次のような人におすすめ!

  • ブログで吹き出しを使いたい人
  • 吹き出しの作り方を知りたい人
  • 吹き出しの使いどころを知りたい人

吹き出しは、ブログを読みやすくする工夫の1つです。

この記事を読んで吹き出しの作り方を知り、読者にとって読みやすいブログをつくっていきましょう!

それではどうぞ!

ブログの吹き出しとは

吹き出しとは、ブログの装飾の一つです。

吹き出しを使うと、実際に人やキャラクターが「喋っている風」「会話している風」に見せられます。

以下が当ブログの吹き出しです。

T部長

こんにちは、T部長です!

吹き出しは、多くのブログで取り入れられている表現方法です。

使えるようになると、ブログでの表現の幅が広がります!

吹き出しを使う3つのメリット

ブログで吹き出しを使うと、以下3つのメリットが得られます。

これらメリットを踏まえ、自身のブログで吹き出しを使うかどうか判断してください!

1.「リアルさ」を強調できる

先述のとおり、吹き出しは「人やキャラクターが話しているように見せられる」装飾です。

「著者本人が実際に話している感」を強調できるため、メッセージに説得力を持たせられます。

2.表現方法のバリエーションが増える

装飾のない記事は単調で、最後まで読み通す負担が大きいです。

吹き出しを使うことで表現のバリエーションが増え、記事の読みやすさが高まります。具体的には、吹き出しの利用には以下のような効果があります。

  • 文章にテンポが生まれて読みやすくなる
  • 重要な点を吹き出しにすることで、飛ばし読みでも記事のポイントを理解できる
  • 補足的なメッセージを自然に配置できる

吹き出しで文章の単調さをやわらげ、スラスラと読める記事を目指しましょう!

3.メリハリをつけられる

吹き出しは「ビジュアル要素」の1つです。

‟文章疲れ”を防ぐ効果が期待できるため、「読者が記事から離脱する割合 = 離脱率」の低下に貢献するかもしれません。

基本的に文章ばかりが続く記事は疲れやすく、かつ読みにくいです。

「文章ばかりで読む気が失せた……」と、ページを閉じたり別の記事へ離脱したりした経験がある人も多いのではないでしょうか?

たとえば「文章だけの見出し」と「吹き出しを織り交ぜた見出し」で見比べてみます。

画像:吹き出しの効果

ビジュアル要素の吹き出しは、読者にとって「箸休め」にもなります。

記事にメリハリをつけられるため、最後まで記事を読んでくれる読者を増やせる可能性があります!

ブログで吹き出しを使う際の注意点3つ

ブログで吹き出しを使う場合は、以下3つの点に気をつけましょう。

それでは、解説していきます。

1.「使い方・使う場面」を選

吹き出しは、「使い方・使う場面」が重要になる表現方法です。

使い方や場面を間違えると、前述のメリットが得られないだけでなく、読者に嫌悪感を抱かれるかもしれません。

そのため、吹き出しは最適なシチュエーションでのみ使うよう心掛けましょう!

吹き出しは、実際に人が介在しているように見せられる表現方法です。

だからこそ、吹き出しは以下のような場面での使用が適しています。

画像:吹き出しが最適な場面

上記のシチュエーションで吹き出しを活用すれば「リアルさ」を強調でき、意見に説得力を持たせられます。

それだけでなく、嫌悪感を抱かれるおそれもないはずです。

2.吹き出しを多用しない

吹き出しが多用されている記事は、視点が左右に揺さぶられて疲れてしまいます。

逆に読みにくくなってしまうため、吹き出しの連続使用は避けるようにしましょう。

以下の画像を見ると、わかりやすいと思います。

画像:吹き出しを多用した場合

画像のとおり、吹き出しが連続すると読みにくくなります。

これは、会話形式でも同様です。

会話形式の場合、吹き出しの使用は多くても「2往復」までに留めましょう。
※インタビュー形式のコンテンツは除きます

3.テキストは短めにする

吹き出し内のテキストは、簡潔にまとめるよう心掛けてください。

テキストが長いと、非常に読みにくくなってしまいます。

とくにスマホ画面で見るとわかりやすいです。

画像:テキストを長くした場合

基本的に吹き出し内のテキストは、「2文」までに抑えるのがおすすめです。

WordPressブログでの吹き出しの作り方!

WordPressのブログに吹き出しを設ける方法は、基本的に以下の2つです。

それぞれ紹介します。

ステップ0:アイコンの準備

どちらの方法で作成する場合も、まずは吹き出しに使うアイコンを準備しましょう。

アイコンとは、ブログや運営者の特徴を表した画像のこと。
当ブログの吹き出しだと、この部分がアイコンです。

画像:アイコンについて

基本的にアイコンの作り方には、以下の2通りがあります。

アイコンの作り方
  • 自作する方法
  • ココナラ」などで外注する方法

具体的な作り方に関しては、以下の記事でスクショとともに解説しています。
ぜひあわせてごらんください!

ブログにアイコンは必要?実際の作り方をスクショとともに解説!

WordPressのテーマを活用する方法

1つ目は、WordPressのテーマで吹き出しを作る方法です。

今回は、WordPressテーマ「XWRITE(エックスライト)」で吹き出しを作る方法を紹介します。

「XWRITE」は、WordPressがはじめてでも簡単にブログが書けるように作られているテーマ(有料)です。当ブログを運営しているエックスサーバー株式会社が開発しています。

「メディア」にアイコンをアップロードする。

まずは、事前に準備しておいたアイコンをWordPressのメディアにアップロードしましょう。

「メディア」をクリック

メディアを選択後、新規追加をクリックしてアイコンのファイルをドラッグ、もしくはファイルから選択でアップロードしてください。

「新規追加」をクリック
ファイルを選択
吹き出しを作成する

「投稿」ページにて新規投稿を追加をクリックしましょう。

画像:WordPressのテーマで作る方法5

「新規投稿」のページに遷移します。

画像:WordPressのテーマで作る方法6

続いて、左上にあるをクリックしてください。

画像:WordPressのテーマで作る方法7

「検索窓」が立ち上がるので、こちらに「ふき出し」と入力しましょう。

検索窓に入力

結果に表示されたふき出しをクリックしてください。

ふき出しをクリック

記事のエリアに吹き出しが現れたらOKです。

吹き出し追加

続いて、アイコンを設定しましょう。
アイコンをクリックしてください。

アイコンをクリック

先ほどアップロードしたアイコンが表示されるので、そちらを選択しましょう。

画像を選択

以下のようにアイコンが挿入できたらOKです。

吹き出しが挿入される

あとは、「ブロックを選択するには…」のところに好きなテキストを入力してください。
アイコンの下部に名前の入力もできます。

吹き出し内にテキストを入力
吹き出し完成

プレビューを確認して、問題がなければ完成です。

プレビュー画面で確認

なお、「XWRITE」の吹き出しは、設定によるカスタイズが可能です!お好みの吹き出しにできますよ。

カスタマイズできる項目は、以下のとおりです。

カスタマイズできる項目
  • ふき出しの配置:左もしくは右に設定可能
  • ふき出しの形状:「矢印」か「心の声」から選択
  • ふき出しの枠線:枠線の表示・非表示
  • 線の太さ:ふき出しの枠線の太さを設定
  • ふき出しの並び (モバイルのみ):モバイル表示時にふき出しを縦並びにできる
  • 丸み:ふき出しの枠の丸みを設定
  • 幅の最大値 (PCのみ):ふき出しの幅の最大値を設定
  • アイコンを非表示にする:アイコンの表示・非表示を設定
  • アイコンの枠線:アイコンの枠の表示・非表示を設定
  • 線の太さ:アイコンの枠線の太さを設定
  • アイコン形状:「サークル」か「四角」から選択
  • アイコン画像URL:使用したいアイコンの画像のURLを設定

また、以下は「XWRITE」についてまとめた記事です。気になる方はぜひ一度チェックしてみてください。

ブログ初心者向けのWordPressおすすめテーマ『XWRITE』を徹底紹介!

WordPressのプラグインを活用する方法

2つ目は、WordPressのプラグインを活用して吹き出しを作る方法です。

この記事では「LIQUID SPEECH BALLOON」を使用した吹き出しの作成方法を解説します。

「LIQUID SPEECH BALLOON」をインストールする

まずは「LIQUID SPEECH BALLOON」をWordPressにインストールします。

ダッシュボードからプラグインをクリックしてください。

画像:WordPressのプラグインで作る方法1

プラグインのページにアクセスしたら新規追加をクリックしましょう。

画像:WordPressのプラグインで作る方法2

右側にある検索窓に「LIQUID SPEECH BALLOON」と入力したのち、今すぐインストールをクリックしてください。

今すぐインストールをクリック

インストールが完了したら、有効化しましょう。

プラグインを有効化

プラグインの一覧に「LIQUID SPEECH BALLOON」が表示されていたら、インストールは完了です。

画像:WordPressのプラグインで作る方法5
吹き出しを作成する

まずはテーマのときと同じく、「投稿」より新規投稿を追加をクリックして、新しい投稿を作成しましょう。

続けて、左上にあるをクリックしてください。

画像:WordPressのテーマで作る方法7

少しスクロールすると「フキダシ」という項目があるので、選択しましょう。

記事のエリアに吹き出しが追加できたらOKです。

アイコンを設定する

続いては、アイコンの設定です。

ブロックを選択した状態で右上の設定をクリックしてください。

設定画面をスクロールすると「アバターと名前の設定」のリンクがあります。

こちらをクリックしてください。

以下のような吹き出しの設定ページに変わります。

画像:WordPressのプラグインで作る方法11

こちらで吹き出しの「名前」「画像URL」を入力しましょう。

「画像URL」は「メディアライブラリ」から「添付ファイルの詳細」で確認できます。

画像:WordPressのプラグインで作る方法12
画像:WordPressのプラグインで作る方法13

入力が完了したら、変更を保存を押してください。

新規投稿ページに戻って、以下のように「アイコン」と「名前」が表示されていたらOKです。

テキストの追加

最後にテキストを追加しましょう。

以上で完成です!

ちなみに、先のテーマほどではありませんが、「LIQUID SPEECH BALLOON」でも吹き出しをカスタマイズできます。

カスタマイズできる項目は、以下の4種類です。

カスタマイズできる項目
  • Direction(吹き出しの位置):左もしくは右に設定可能
  • Design(吹き出しのデザイン):「影付き」「線なし」など6種類から選択可能
  • Size(吹き出しのサイズ):「Default(標準)」「Small(小)」「Large(大)」から選択可能
  • Options(オプション):アイコンの位置などを設定可能

まとめ

以上、ブログに吹き出しを挿入する方法や具体的な使い方の解説でした!

それでは、今回の内容をおさらいします。

まとめ
  1. 吹き出しを使うと「リアルさ」を強調できる
  2. 「主観や主張を伝えたいとき」など、吹き出しは最適な場面でのみ使うように心掛けよう!
  3. 吹き出しは多用しないように気をつけよう
  4. 吹き出しの作成方法は「テーマを活用する方法」と「プラグインを活用する方法」の2種類ある

吹き出しを上手く活用して、より読みやすいブログを目指してください!

最後までお読みいただき、ありがとうございました!

キャンペーン開催中

国内シェアNo.1レンタルサーバー「エックスサーバー」では2024年11月5日(火)17時まで、サーバー利用料金が最大30%オフとなる期間限定キャンペーンを開催中です!

今なら月額693円~とお得にWordPressブログが始められます!
.comや.netなど大人気ドメインも永久無料と過去最大級にお得です。

ぜひこのお得な機会にWordPressブログをご検討ください!

※ 2024年5月時点、W3Techs調べ。

当メディア「初心者のためのブログ始め方講座」では、
初心者の方に分かりやすく簡単にブログを始められる方法を紹介しています!

WordPressに使用される国内シェアNo.1サービス「エックスサーバー」の中の人が確実で信頼性の高い情報をお届けしています!

ブログをこれから始める方はこちらの完全ガイドをぜひご覧ください!

【初心者向け】ブログの始め方完全ガイド!立ち上げから収入を得る方法まで

また、初心者の方向けにWordPressでのブログ立ち上げがたった10分できる方法も紹介しています!

【たった10分】WordPressブログの始め方|初心者でも簡単に開設できる!

ブログの始め方・立ち上げに関する、ご質問・ご相談はボクのツイッターDM( @tbcho_xsv )までお気軽にどうぞ!

URLをコピーしました!