WordPressプラグイン PR

Word Balloonの設定方法!ワードプレスの吹き出しはこれ一択!

記事内に商品プロモーションを含む場合があります
人生好転マーチ無料メール講座バナー
 
 

※プレゼントは登録されたメールアドレス宛にご案内します。
※『@icloud.com』や携帯キャリアでのご登録はできません。
※新規アドレスは『Gmail』『Yahooメール』がおすすめです。
※お預かりした個人情報は厳重に管理し、プライバシーを遵守いたします。

 

ブログによくある吹き出しアイコン。

ブログ記事を読む際、
文章疲れを起こさないための
良いアクセントになってくれるので、
最近はよく見かけますよね。

 

ねこくん
ねこくん
こういうヤツですね

マーチ
マーチ
僕は有料テーマJINについてるものをそのまま使ってるよ

 

今どきの有料テーマであれば、
大体付いている吹き出しアイコン。

でも、デザインが気に入らなかったり、
そもそも吹き出しがない場合もあるでしょう。

 

そんな時に紹介したいのが、

『Word Balloon』

というプラグインです。

 

Word Balloonで作った吹き出し会話

 

上の会話はWord Balloonで作ったもの。

  • 『Gutenberg』
  • 『Classic Editor』

両方に対応しているので、
ワードプレス使用者なら誰でも使えます。

設定も非常にカンタン!

直感的に使える優れものなので、
今回は吹き出しプラグインでイチオシの
Word Balloonについて解説していきましょう!

 

ブログに吹き出し、Word Balloon、設定と使い方

 

Word Balloonをインストールしよう

 

Word Balloonをする前に
以下のものを準備しておきましょう。

 

【用意するもの】

  • アバター画像(PNG・JPG)

吹き出しに使うアバター(キャラ)画像を用意します。

ポイント

  • 正方形の画像
  • サイズは150×150px程度

正方形でないとアバターがズレるので、
PhotoScape等でサイズを合わせておきましょう。

PhotoScapeでトリミングしている様子

PhotoScapeでトリミングが便利!

 

画像編集ソフトPhotoScapeで画像を加工する方法! 今回は、 ブログで使う画像加工はコレひとつで十分という PhotoScape(フォトスケープ)の紹介です。 画像編集ソ...

 

画像が用意できたら、
あとは手順通りにやっていけば
1-2分で設定できるでしょう!

 

 

1.Word Balloonをインストールしましょう。

『プラグイン』⇒『新規プラグインを追加』と進み、
「Word Balloon」で検索しましょう。

Word Balloonを検索

 

下向き矢印

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

Word Balloonを今すぐインストール

 

矢印

『有効化』をクリック。

Word Balloonを有効化

 

矢印

以下のようになればOKです。

プラグインを有効化しました

 

 

 

2.アバター登録をしましょう。

ワードプレスの管理メニュー『設定』から
『Word Balloon』を選択しましょう。

ワードプレス管理メニューからWord Balloonの設定

 

矢印

まずは画像を設定しましょう。

『画像を選択』をクリック。

Word Balloonアバターの新規登録画面

 

矢印

『ファイルをアップロード』で画像を追加。

予め用意した画像をアップロードしましょう。

Word Balloonアバターの選択画面

 

矢印

画像が追加されたら『選択』をクリック。

アバターの選択、メディアライブラリ

 

矢印

名前をつけて『アバターの登録』をクリック。

アバターに名前をつける

 

矢印

このようにアバターのリストに追加されていればOK!

Word Balloonアバターのリスト

 

これでWord Balloonの設定は完了です!

 

 

Word Balloonで吹き出しを作ろう

 

では実際にWord Balloonで
記事に吹き出しを入れてみましょう。

 

※Classic Editorでの設定となります

 

ワードプレスの記事作成画面を開くと、
Word Balloonの吹き出しアイコンが追加されています。

ワードプレスの記事作成画面に出てきたWord Balloonの吹き出しアイコン

 

吹き出しを入れたい場所にカーソルを合わせ、
こちらのアイコンをクリックしましょう。

 

矢印

するとこのようなウィンドウが開きます。

Word Balloon吹き出しの挿入ウィンドウ

ここではセリフやキャラの選択、
左右の振り分け等の設定ができます。

 

矢印

入力が終わったら、
最後に挿入ボタンをクリックしましょう。

吹き出しの挿入の設定の仕方

 

矢印

すると以下のようにコードが表示されます。

ビジュアルモードで表示されたWord Balloonのコード

 

矢印

プレビューで確認してみましょう。

プレビュー画面でWord Balloonの吹き出しをチェック

 

色々カスタマイズしてみよう!

 

ちなみにWord Balloonでは、
お好みで色んなカスタマイズができます。

 

たとえば、
キャラに感情を付け足せる
かわいいアイコンなんかもあります。

 

Word Balloonのカスタマイズ

 

矢印

こんな感じですね!

カスタマイズ後のWord Balloonの吹き出し

こちらは直感的に扱えるので
色々と試してみていただければと思います。

詳しい使い方については
こちらを参照になさってくださいね。

 

Word Balloonの使い方は以上です!

 

 

吹き出しを上手に使うコツ

吹き出しを使って会話してるキャラたち

 

ブログに吹き出しアイコンを使うと
ちょっとしたアクセントになり、
見た目も少し華やかになります。

といっても、
その使い方にもセンスが出ます。

そこで吹き出しを上手に使うコツを
ここでは3つ紹介したいと思います。

 

そのコツとは

  1. 連続して使わない
  2. セリフは短めがおすすめ
  3. 読者の共感を表現する

というもの。

 

それぞれ解説していきましょう!

 

①吹き出しは連続して使わない

 

吹き出しは連続して使うと
ちょっとクドい感じになるんですね。

たとえばこんな感じです。

連続して吹き出しを使ったパターン

このような吹き出しの連続使用は
冗長な印象が残りますし、
何より無駄なスクロールを増やします。

もちろん、
時々使う分には問題ありません。

ただ、基本的な使い方として、
吹き出しの連続使用は
控え目の方がスマートに映るでしょう。

 

 

②吹き出しのセリフは短めがおすすめ

 

吹き出しに使うセリフは
基本的に短めがおすすめです。

そもそも吹き出しというのは、
長い文章が続いた時の
箸休め的な存在として活きるからです。

その箸休めが長ったらしいと、
吹き出しの効果も半減してしまいます。

 

長い吹き出しの例

 

このようにセリフが長いと
非常に圧迫感が出てしまいます。

吹き出しは
楽譜で言う『休符』みたいなもの。

リズムよく文章を読み進めるための
『間』を作るためのものなんですね。

なので基本的に、
セリフは短い方がおすすめです。

 

 

③読者の共感を得る

 

吹き出しで意識すべきことは、
読者の共感を得るということです。

 

つまり、

読者の感じていることを
吹き出しのキャラに代弁させる

ということ。

 

読者は常に客観的な立場で
情報を受け取っています。

そこで受け取る情報が一方通行だと、
やっぱり疲れちゃうんですね。

なのでそんな時は
読者と会話をしてるような感じで
吹き出しを使うとホッとするもの。

 

Word Balloon吹き出しで共感を作る

 

このように読者が思ってそうなことを、
吹き出しで代弁してあげてみてください。

読者とのグッと距離が近くなって
読みやすいと感じてもらえるはずです。

 

ということで、

ブログで吹き出しを使う時は

  1. 連続して使わない
  2. セリフは短めがおすすめ
  3. 読者の共感を表現する

この3つを押さえておきましょう!

 

吹き出しはこれだけでも
センスよく使えるようになりますよ!

人生好転マーチ無料メール講座バナー
 
 

※プレゼントは登録されたメールアドレス宛にご案内します。
※『@icloud.com』や携帯キャリアでのご登録はできません。
※新規アドレスは『Gmail』『Yahooメール』がおすすめです。
※お預かりした個人情報は厳重に管理し、プライバシーを遵守いたします。