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

投稿用キャラクタ

今回はこういった疑問にお答えします。

今回は吹き出しを無料で追加できるプラグイン「LIQUID SPEECH BALLOON」の使い方と設定を画像付きで解説していきます。

テーマに吹き出し機能がついていない方だと自分でコードを追加するかプラグインで追加する方法になりますが、今回は後者のプラグインで追加する方法になります。

LIQUID SPEECH BALLOONの注意点

LIQUID SPEECH BALLOONはブロックエディタ(WordPress5.0から追加された新しいエディタ)で吹き出しを追加できるプラグインです。

4.9以前の場合はWord Balloonで吹き出しを追加できます。

Word Balloonの使い方と設定

Word Balloonの使い方と設定

LIQUID SPEECH BALLOONプラグインの使い方と設定

それでは早速、LIQUID SPEECH BALLOONの使い方を解説していきます。まだプラグインのインストールが終わっていない方は以下で解説しているので一緒にインストールから始めましょう。

LIQUID SPEECH BALLOONのインストール

プラグインのインストールはWordPressの管理画面から行いますのでログインしておきましょう。

1左サイドバーの「プラグイン」→「新規追加」をクリックします。

左サイドバーの「プラグイン」→「新規追加」をクリックします

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

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

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

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

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

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

これでプラグインのインストールが完了しました。続いて設定を行なっていきます。

LIQUID SPEECH BALLOONの設定

ここからLIQUID SPEECH BALLOONの設定を行なっていきます。設定では吹き出しに使用するアイコンの名前と画像のURLを入力しますので表示したい画像をアップロードし、URLをメモっておきましょう。

画像のアップロード方法は以下で解説を行なっています。

WordPressで画像をアップロードする方法と出来ない原因

アップロードを行なったら画像のURLを確認します。

画像のURLを確認する

1メディア画面よりURLを確認したい画像のタイトルをクリックします。

メディア画面よりURLを確認したい画像のタイトルをクリックします。

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

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

これでURLをコピーしている状態なのでLIQUID SPEECH BALLOONを設定していきます。

3「プラグイン」→「インストール済みプラグイン」をクリックします。

「プラグイン」→「インストール済みプラグイン」をクリックします

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

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

アイコンの名前とURLを入力する

アイコンの名前とURLを入力します。名前を表示したくない場合は、名前を省略することもできます。

標準の場所に関しては番号を指定しなかった場合のアイコンになるので使用頻度が高いアイコンを指定するといいと思います。

1今回は違いを解説するため、標準と一番を指定していきます。それぞれ「名前」と「URL」を入力します。

今回は違いを解説するため、標準と一番を指定していきます。それぞれ「名前」と「URL」を入力します

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

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

LIQUID SPEECH BALLOONの使い方

設定が終わったらLIQUID SPEECH BALLOONを早速使ってみましょう。

1まずは吹き出しのブロックを追加します。ブロックの追加方法は多数ありますので一例として画面左上の「+ボタン」をクリックします。

まずは吹き出しのブロックを追加します。

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

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

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

アイコンと吹き出しが表示されます

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

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

5右にメニューが表示されますので変更したい吹き出しをクリックするとフキダシ設定が表示されます。

6それぞれの項目を以下の表に簡単にまとめたので任意の設定に変更します。

アバターアイコンの番号
向きアイコンを表示する向き
デザイン吹き出しのデザイン
サイズアイコンと吹き出しのサイズ
オプションアイコンと吹き出しのレイアウト
背景色 吹き出しの背景色
文字色吹き出しの文字色
Formatting吹き出し文字のフォーマット(添字や取り消し線などの追加)

7変更が終わったら吹き出しをクリックして文字を入力します。

変更が終わったら吹き出しをクリックして文字を入力します

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

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

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

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

まとめ:LIQUID SPEECH BALLOONプラグインの使い方と設定

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