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

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

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

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

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

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

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

T部長

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

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

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

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

それではどうぞ!

ブログの吹き出しとは

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

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

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

T部長

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

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

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

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

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

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

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

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

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

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

吹き出しを取り入れれば、ブログの表現方法に幅が生まれます。

たとえば吹き出しを活用すると、とくに伝えたいメッセージを目立たせることが可能です。

もしくは、本筋ではない補足的なメッセージも、吹き出しを活用すれば自然と入れ込めます。

テキストだけの記事より読みやすくなるため、記事の内容を理解しやすくなるはずです。

メリハリをつけられる

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

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

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

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

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

画像:吹き出しの効果

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

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

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

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

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

「使い方・使う場面」を選ぼう

吹き出しは、比較的「使い方・使う場面」を選ぶ表現方法です。

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

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

吹き出しは「喋っている風」「会話している風」など、実際に人が介在しているように見せられる表現方法です。

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

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

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

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

吹き出しを多用しない

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

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

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

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

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

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

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

テキストは短めにする

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

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

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

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

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

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

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

それぞれ紹介します。

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

まずは、アイコンを準備しましょう。

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

画像:アイコンについて

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

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

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

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

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

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

今回は、無料のWordPressテーマ「Luxeritas(ルクセリタス)」で吹き出しを作る方法を紹介します。
※テーマのインストール方法に関しては、こちらでご確認ください。

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

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

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

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

画像:WordPressのテーマで作る方法2
画像:WordPressのテーマで作る方法3
画像:WordPressのテーマで作る方法4
吹き出しを作成する

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

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

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

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

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

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

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

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

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

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

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

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

続いて、アイコンを設定しましょう。

画像を選択をクリックしてください。

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

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

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

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

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

あとは、「コンテンツを入力…」に好きなテキストを入力してください。

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

画像:WordPressのテーマで作る方法14
カスタマイズする

「Luxeritas(ルクセリタス)」では、吹き出しのデザインを自由にカスタマイズできます。

吹き出しのブロックを選択している状態で、右上にある歯車をクリックしてください。

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

以下のように右側に設定画面が表示されます。

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

「Luxeritas(ルクセリタス)」の場合、「画像の大きさ・丸み」や「テキストを囲む枠線の太さ」「文字色」などをカスタマイズできます。

たとえば「画像の大きさ」を小さくして、「画像の丸み」を上げてみると、以下画像のようになります。

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

そのほか吹き出しのタイプや位置など、とても細かく設定できるので、自分好みのデザインに調整してみてください!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

画像:WordPressのプラグインで作る方法8
アイコンを設定する

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

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

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

設定画面をスクロールすると「Avatar and name settings(アバターと名前の設定)」の項目があります。

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

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

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

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

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

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

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

入力が完了したら追加ののちに変更を保存を押してください。

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

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

画像:WordPressのプラグインで作る方法15
テキストの追加

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

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

以上で完成です!

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

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

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

まとめ

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

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

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

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

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

キャンペーン開催中

国内シェアNo.1レンタルサーバー「エックスサーバー」では2022年7月21日18時まで、
初期費用0円&月額料金20%OFFキャンペーンを開催中です!

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

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

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

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

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

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

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

【初心者でも安心】たった10分で出来るWordPressブログの始め方

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