日本製WordPress吹き出しプラグイン【Word Balloon】オススメです（…が有料となりました）

漫画でお馴染みの表現方法「フキダシ」。
キャラクターのセリフをつつむように囲んでいるアレです。

今回は、そんなフキダシをブログ記事内に簡単に表示させる方法を紹介します。

フキダシを使えば、会話形式、インタビュー形式、独り言などを画像を付けて表現することが可能となります。

WordPressでフキダシを実現する方法

最近はブログ内でもよく見かける「フキダシ」ですが、Wordpressの標準機能では準備されていなく、以下のようなカタチで実現されます。

方法１：テーマ付属のフキダシ機能を使う。

吹き出し機能のついているテーマはそれほど多くはないのですが、最近、特に日本製のテーマは吹き出し機能を持つものが増えてきました。
無料テーマのCocoonや、このサイトでも使っているJINにも搭載されています。

◆短所

• テーマ独自の機能でフキダシを実現しているので、テーマ変更すると、すべてのフキダシレイアウトが崩れたり、表示されなくなったりする。
  （ショートコードを使用している場合は、ショートコードがそのまま表示されます。）

方法２：自力でつくる。

自力でプラグインを作ったりすることも可能ですが、プログラミング技術が必要な為、一般ユーザーには敷居が高いかと思います。

CSSで、予め吹き出しのカタチを作成して、AddQuicktagプラグインで管理するする方法であればプラグインを作成するのに比べれば簡単ですが、管理などいろいろ大変そうです。

◆短所

• プラグイン作成は、一般ユーザーは敷居が高すぎる。

方法３：吹き出しプラグインを使う。

以前は「Speech Bubble」というプラグインがありました。

使い勝手はあまり良くはなかったものの、コレといったプラグインがなかった為にフキダシのプラグインとしてはなんとなく使っている人も多かったかもしれません。

その「Speech Bubble」は現在、Wordpress公式サイトでも公開停止となっていて
「死んだプラグイン」となっています。

これといった吹き出しプラグインが存在しない中、今回紹介する「Word Balloon」はダントツの高機能と使いやすさです。

…ということで、WordPressの記事内でフキダシを簡単につくれるプラグインの紹介します。

どんなプラグインかざっくり説明すると…

テーマ付属機能ではなく、プラグインの機能で吹き出しを実現しているので、
テーマを変更してもそのまま表示される長所もあります。

インストール方法

Word BalloonプラグインをWordpressにインストールします。

• WordPress管理画面の「プラグイン」→「新規追加」
• 画面右上のキーワード欄に「Word Balloon」と入力
• 表示された「Word Balloon（吹き出し）」の「今すぐインストール」をクリック。
• インストールが終わったら「有効化」をクリック。

初期設定方法

「設定」→「Word Balloon」から設定画面に入ります。

設定は大きく分けて、「アバターの設定」と「各種設定」がありますが、とりあえず「アバターの設定」だけしておけば使用することができます。

アバターの設定

「アバターの設定」の「アバターの新規登録」では、アバター（キャラクター）を登録していきます。

アバター画像は、設定で四角、角丸、まん丸などに変化させることができるので、画像をわざわざそのカタチに加工する必要はありません。

設定項目の「名前」はキャラクターの名前、「メモ」は記事内に掲載する時に自分がわかりやすくする為のものでどちらもお好みで入れてください。（入れなくてもOKです。）

最後に、「アバターの登録」ボタンを押して完了。

アバターをいくつか登録した例。わかりやすくリストで表示されます。

必要な数だけ登録していきます。

いろいろな表情をしている登場キャラクターがあるといいかもしれません。

各種設定

「各種設定」では、「通常設定」、「ふきだし」、「アイコン」、「効果」、「フィルター」、「壁紙」の設定ができます。

基本デフォルトのままでも使用可能です。
より細かい設定をしたい場合や、使わない項目を非表示ににしたい場合に設定します。

ここで設定する項目は、記事内にフキダシを挿入する際の詳細設定項目（「かんたんモード」をオフにした状態）です。

通常設定

ここではフキダシを記事内に挿入する際のパラメーターのデフォルト設定を行います。

アバターの位置、フキダシの形、影の度合い、アイコンの大きさ、非表示項目など、非常に細かく設定できます。

ふきだし

「ふきだし」では、アバターの隣に表示される吹き出しのデフォルト表示設定を行うことができます。

使うことのない吹き出しはチェックボックをオンにすることで投稿時の設定で表示されなくなります。

アイコン

「アイコン」は、設定したアバターの上に重ねることのできるイラストのことです。

ハートやビックリマークなど、10種類以上ありますが、ここではアイコンの色とそのフチを設定することができます。

「アイコン」では、投稿時に非表示にする項目にチェックを入れます。
デフォルトでは何もチェックはついていませんので、吹き出しキャラを挿入する時の設置で以下の項目をすべて選択することが可能となります。

自分では絶対選択しない項目や選択肢が多すぎてウザい時に設定します。

アバターに気軽に表情をつけることができます。
（←は「汗汗」を追加した例です）
次の「効果」を使用すれば、汗だけアニメーショにすることもできます。

効果

「効果」はアバター、アイコン、吹き出しにアニメーション的効果を付けることができる機能です。

「効果」を設定した例
アバター：揺れる
アイコン：振動
フキダシ：左右
※あまりやりすぎるとウザくなるので注意

※ 自分は絶対使わないであろう項目があればチェックボックスを入れることにより、投稿時に選択できなくなります。

フィルター

「フィルター」は、アバター、アイコン、吹き出しに画像フィルターをかけることのできる機能です。

ぼかし

階調反転

モノクロ

フィルターは効果と同じく、絶対使わないであろう項目はチェックボックスを入れることにより、投稿時に選択できなくなります。

壁紙

「壁紙」では吹き出しエリアの背景を設定することができます。（アバターの背景ではありません。）

合計5種類の壁紙を設定できます。

ここで壁紙設定すると、フキダシ挿入時に壁紙を選択可能になります。
（逆に言うと、ここで設定しないと表示されません）。

単純にバックに色を付けるだけでなく、枠線の太さ・種類、角丸。画像を貼ることもできます。

吹き出しエリアの背景に色と罫線を付けた例

Word Balloonを使って記事内に挿入する方法

Word Balloonは、設定も直感的にわかりやすいですが、記事内への貼り付け方もすごく簡単です。

簡易プレビュー機能も持っているので実際挿入する前にどういう感じで挿入されるか確認することができます。

すごく親切で便利。

手順１：Balloon Wordのボタンを押す

記事や固定ページの投稿画面で、本文中の挿入したい場所にカーソルを合わせた後、Word Balloonのボタン又は「吹き出し」ボタンを押します。

テキストモード、ビジュアルモード、Gutenberg（Wordpress5.0以降のブロックエディタ）でボタンが違ってきます。

テキストモードの場合

ビジュアルモード、Gutenbergの場合

※上の画像はクラシックエディタのビジュアルモード画面ですが、Gutenbergも同じような場所にあります。

手順２：プレビューを見ながらいろいろ設定して挿入。

ボタンを押すとWord Balloonの設定画面が表示されます。

ここに、セリフ、アバターの種類、吹き出しの位置、吹き出しの形状を設定します。（画面下部に表示されている「壁紙」は、前項の設定画面で設定しないと表示されません。）

もっと細かく設定したい場合は、画面右上の「かんたんモード」をオフにすると、設定項目が増えます。

この画面でアバターのサイズ、形状、吹き出し文字の色、文字サイズ、影の有無、アイコンの付加、効果、フィルターなどの設定を行います。

特にこだわりがなければ設定不要です。

設定を変更すると上部の画像がリアルタイムで切り替わるので最初はいろいろ試してみると良いかもしれません。

最後に、「挿入」ボタンを押して完了です。

注意点

Word Balloonプラグインは、アバター登録情報等をデータベース内に保存される仕様となっていています。

それ自体は全く問題ないのですが、注意すべき点はWord Balloonプラグインを削除した時で、プラグイン削除と共にデータベース内のWord Balloon情報を消してしまう
「立つ鳥、跡を濁さず」仕様となっています。

プラグインを無効化＆有効化は問題ないかと思いますが、プラグイン自体削除して、再度インストールしても設定は戻りません。

また、WordPressのプラグインという性質上、プラグインを外してしまうと当然吹き出しが表示されなくなります。

最後に

今までありそうでなかった吹き出しプラグイン「Word Balloon」を紹介しました。

ユーザーの立場にたった非常に分かりやすい操作感で、流石メインドインジャパンといった品質です。

こんな便利で素敵なプラグインを無料で提供して頂ける作者のやーまんさんに感謝感謝です。

＼　自力じゃムリと感じたら　／

▲自宅で学べるプログラミング学習