吹き出しをWordPressに入れたいけど自分でコードを入れるのは嫌だし、プラグインで追加できれば楽だなー

今回はこういった疑問にお答えします。
今回は吹き出しを無料で追加できるプラグイン「LIQUID SPEECH BALLOON」の使い方と設定を画像付きで解説していきます。
テーマに吹き出し機能がついていない方だと自分でコードを追加するかプラグインで追加する方法になりますが、今回は後者のプラグインで追加する方法になります。
このページの目次
LIQUID SPEECH BALLOONの注意点
LIQUID SPEECH BALLOONはブロックエディタ(WordPress5.0から追加された新しいエディタ)で吹き出しを追加できるプラグインです。
4.9以前の場合はWord Balloonで吹き出しを追加できます。
LIQUID SPEECH BALLOONプラグインの使い方と設定
それでは早速、LIQUID SPEECH BALLOONの使い方を解説していきます。まだプラグインのインストールが終わっていない方は以下で解説しているので一緒にインストールから始めましょう。
LIQUID SPEECH BALLOONのインストール
プラグインのインストールはWordPressの管理画面から行いますのでログインしておきましょう。
1左サイドバーの「プラグイン」→「新規追加」をクリックします。

2右側の「検索欄」に「LIQUID SPEECH BALLOON」を入力します。

3「いますぐインストール」をクリックします。

4「有効化」をクリックします。

これでプラグインのインストールが完了しました。続いて設定を行なっていきます。
LIQUID SPEECH BALLOONの設定
ここからLIQUID SPEECH BALLOONの設定を行なっていきます。設定では吹き出しに使用するアイコンの名前と画像のURLを入力しますので表示したい画像をアップロードし、URLをメモっておきましょう。
画像のアップロード方法は以下で解説を行なっています。
アップロードを行なったら画像のURLを確認します。
画像のURLを確認する
1メディア画面よりURLを確認したい画像のタイトルをクリックします。

2右側にファイルのURLがあるのでコピーします。

これでURLをコピーしている状態なのでLIQUID SPEECH BALLOONを設定していきます。
3「プラグイン」→「インストール済みプラグイン」をクリックします。

4「LIQUID SPEECH BALLOON」の設定をクリックします。

アイコンの名前とURLを入力する
アイコンの名前とURLを入力します。名前を表示したくない場合は、名前を省略することもできます。
1今回は違いを解説するため、標準と一番を指定していきます。それぞれ「名前」と「URL」を入力します。

2入力が終わったら「変更を保存」をクリックします。

LIQUID SPEECH BALLOONの使い方
設定が終わったらLIQUID SPEECH BALLOONを早速使ってみましょう。
1まずは吹き出しのブロックを追加します。ブロックの追加方法は多数ありますので一例として画面左上の「+ボタン」をクリックします。

2フキダシをクリックします。

3アイコンと吹き出しが表示されます。(吹き出しの設定をしていないため、標準で入力したアイコンが表示されているはずです。)

4吹き出しの設定を行うため画面右上の「歯車アイコン」をクリックします。

5右にメニューが表示されますので変更したい吹き出しをクリックするとフキダシ設定が表示されます。
6それぞれの項目を以下の表に簡単にまとめたので任意の設定に変更します。
アバター | アイコンの番号 |
向き | アイコンを表示する向き |
デザイン | 吹き出しのデザイン |
サイズ | アイコンと吹き出しのサイズ |
オプション | アイコンと吹き出しのレイアウト |
背景色 | 吹き出しの背景色 |
---|---|
文字色 | 吹き出しの文字色 |
Formatting | 吹き出し文字のフォーマット(添字や取り消し線などの追加) |
7変更が終わったら吹き出しをクリックして文字を入力します。

8入力が終わり次第画面右上の「更新」をクリックします。

これで吹き出しが表示されているはずなので画面を確認してみましょう。

まとめ:LIQUID SPEECH BALLOONプラグインの使い方と設定
LIQUID SPEECH BALLOONプラグインの使い方と設定をご紹介しました。ブロックエディタを使われている場合はこのプラグインで簡単に様々な吹き出しを追加できるのでおすすめなプラグインです。