吹き出しを簡単に追加したい！ビジュアルエディタを使っているので他のプラグインは対応していなかった…
今回はそういったご要望にお答えします。
今回は以前のビジュアルエディタで使える吹き出し機能追加できる「Word Balloon」の使い方と設定方法をご紹介します。
画像を使いつつプラグインのインストールから吹き出しが表示されるまで画像を使ってご紹介しているので初心者の方でも簡単に吹き出しを追加できます！
このページの目次
Word Balloonの注意点
WordPress5.0以上のブロックエディタを使われている方はLIQUID SPEECH BALLOONというアバター数無制限の無料プラグインもありますのでそちらの解説も行なっています。
Word Balloonの使い方と設定
それでは早速、Word Balloonの使い方をご紹介していきます。まずはプラグインのインストールを行なっていくのでWordPressの管理画面にログインしておきましょう。
Word Balloonのをインストールする
1画面左サイドバーより「プラグイン」→「新規追加」をクリックします。
2検索欄に「Word Balloon」を入力します。
3「いますぐインストール」をクリックします。
4「有効化」をクリックします。
WP-Speech-Balloonの設定
続いてWP-Speech-Balloonの設定を行なっていきます。
Word Balloonの「設定」をクリックします。
まだ画像のアイコンのアップロードを行なっていない場合は以下の記事を参考にアップロードしましょう。
アバターを設定
Word Balloonの設定項目としてはアバター（アイコン）を設定→吹き出しの設定の順に行います。
1「写真の選択」をクリックします。
2任意の画像を選択し「選択」をクリックします。
3アイコンに名前を表示する場合は「名前」に任意の名前を入力します。
4「アバターの登録」をクリックします。
吹き出しの設定
吹き出しの設定に関しては3項目があります。
11つ目の設定は吹き出しを表示する際にアニメーションをつけるかの設定になります。オンにした場合、画面を吹き出しの場所までスクロールすると横からニョキッと吹き出しが出てきます。
22つ目と3つ目に関しては簡単にご説明するとプラグインを削除した時のデータを残しますか？という意味になります。こだわりがなければデフォルトのまま2つともオンでいいと思います。
3設定が終わったら「保存」をクリックします。
ここまででWord Balloonの設定が終わりました！次は実際に吹き出しを挿入して表示してみましょう！以前のビジュアルエディタと現在のブロックエディタ、テキストエディタ全て解説しているので今お使いのエディタの所までジャンプしてください！
ビジュアルエディタで挿入する方法
ビジュアルエディタの場合、テキストエディタと同じ画面で吹き出しの設定をするのでテキストエディタの方でまとめて解説をしています。なのでここでは挿入方法だけ解説します。
1吹き出しを表示したい箇所で吹き出しマークをクリックします。
ここからはテキストエディタと同じなのでテキストエディタの解説までジャンプします。
ブロックエディタで挿入する方法
1吹き出しを表示したい箇所で「ブロック追加」アイコンをクリックします。
2Word Balloonをクリックします。
3吹き出しが挿入されたら吹き出しをクリックし表示する任意の文字を入力します。
4画面右上の歯車アイコンをクリックします。
5表示されている吹き出しをクリックするとクリックした吹き出しの設定が右サイドバーに表示されます。
6複数アバターを登録している場合はアバターを選択します。（1つしか登録してない場合は、この作業は不要です）
7アイコンの位置を左右から選択します。
8吹き出しの表示を選択します。吹き出しの背景を変更したい場合は「カラー」を選択します。
9アイコンをクリックするとそれぞれの詳細設定ができますので希望の表示になるように吹き出しを見ながら変更します。
10先ほど吹き出しの表示を「カラー」に変更した場合は、吹き出しをクリックして任意の色に変更できます。
11変更が終わったら「更新」をクリックします。
テキストエディタで挿入する方法
テキストエディタの場合は挿入時のみ異なり、編集方法はビジュアルエディタと同じなので挿入の方法だけご紹介します。
1クイックタグの「吹き出し」をクリックします。
2吹き出しに挿入するテキストを入力します。
3複数アバターを登録している場合はアバターを選択します。（1つしか登録してない場合は、この作業は不要です）
4アイコンの配置を矢印で選択します。
5吹き出しの表示を選択します。吹き出しの背景色を変更したい場合は「カラー」を選択します。
6アイコンをクリックするとそれぞれの詳細設定ができます。実際にプレビューが表示されているのでそれをみながらオリジナルの吹き出しを作ってみましょう！
7設定が終わったら青色の挿入アイコンをクリックします。
まとめ：Word Balloonの使い方と設定
Word Balloonの使い方と設定の解説を行いました。吹き出しプラグインはいくつかありますが、使っているサーバーによって使えないプラグインがあります。
僕のサーバーで動作を確認したのはWord BalloonとLIQUID SPEECH BALLOONです。注意点の箇所にも書きましたが、お使いになられているエディタで使い分けましょう！
