WordPressで吹き出しを作るプラグイン「Word Balloon」

2019-06-18
プラグイン

漫画風の吹き出し会話ができるWordPressのプラグイン「Word Balloon」の紹介です。設定も簡単にでき、エフェクトも多いので色々な使い方ができそうです。

Linda
Linda

Hi、私はリンダ!よろしくね!

アバターを登録しておくと、投稿画面で吹き出し会話が追加できるようになります。設定も登録も使い方も超簡単!吹き出しを採用しているブログも多いですが、一気に華やかな雰囲気が出るし、会話で読み進めると難しい話もわかりやすいですよね。読者目線で読むこともできるし、これは使えるプラグインだと思います。

Word Balloonの使い方

Word BalloonはWordPressのプラグインです。プラグインの新規追加ページからインストールし、有効化しておきます。次に設定画面に入り、アバターを登録します。Word Balloonで追加できるアバターは3人まで。設定は1回で終わります。

アバターを登録する

設定画面に入ると、一番上にアバターの新規追加項目がありますので、ここで登録していきます。

wordballoon

まず初めに、写真の選択で使うアバター用の画像を用意します。サイズは縦横350pxあれば十分です。画像は正方形にトリミングしておくと綺麗に表示されます。

その他の項目は任意なので入れても入れなくてもOK。アバターの名前を入れると吹き出しの下に名前が表示されるようになります。メモは非表示項目なので、自分の管理用として利用してください。

入力が完了したら「アバターの登録」ボタンを押し、完成です。同じように3人まで追加できます。

吹き出しを作って会話しよう!【吹き出し29種類】

Linda
Linda

ここからは投稿ページで編集作業をするわよ。ジョン、準備はいい?

まかせて!

John
John
Linda
Linda

じゃあ、まず投稿画面のブロック追加で「Ward Balloon」を選択してね!

Wordballoonブロック追加 

真ん中の吹き出しマークだね!

Linda
Linda

そう!これで吹き出しマークが出てくるはずだから、
早速右側のブロック詳細設定の画面を見てみて。

なるほど、これか!
なんか色々項目があるね。

まずはアバターを選んで、配置を決めます。会話をするときは左側と右側の両方に配置するのがおすすめ。顔の向きも反転で変更できるので便利です。アバターの形は大きく分けて3種類。丸、四角、角丸から選ぶことができ、サイズも大中小と使い分けることが可能。また、影や枠をつけたりすることもできます。

Linda
Linda

まずは誰を選ぼうか?
例えば私を選びたければ、登録名の「Linda」を選択すればいいわけね。
ジョンなら「John」ね。

僕たちはもういるから、
メアリーを呼んでみよう!

Linda
Linda

OK!
Hi、メアリー!

いきなりね!びっくりした!

Mary
Mary

こんな感じで吹き出しの種類やカラーも変更が可能です。リンダはデフォルト設定、ジョンは「ぽっち」、メアリーは「しっぽ」という吹き出しを使っています。この他にも手書き風やRPG風など、29種類の中から選ぶことができます。名前の位置も変えれますし、非表示にもできます。

John

こんな感じでカスタマイズができるんだね!

Linda
Linda

そういうことね!

アイコンや効果、フィルターを使って漫画のように盛り上げる

Ward Balloonには「アイコン」と「効果」という機能があり、それぞれにアニメーションをつけて色んな感情を表現することができます。

Linda
Linda

メアリー、
吹き出しのアイコンや効果を使ってどんな会話ができるのか
色々見たいんだけど、、、任せてもいい?

まじかよ。。めんどくせーな…

Linda
Linda

おい!聞いてる?

OKOK!ちょっと待って!

Linda
Linda

じゃあ、よろしくね!

超こえーよ、リンダ。。

アイコンを使うことで、登場人物の感情を表現でき、会話がパワーアップします。また、アイコンやアバター、アイコンには効果(アニメーション)をつけて動きを出せるので結構面白いです。

リンダにバレないよう
フィルターかけとこう。。

フィルターをかければ画像にぼかしや透明効果などを追加できます。セピアやモノクロなどもできますよ。

ステータスでコメントやサウンドを追加する

ステータス項目を使えば、吹き出しの横に「既読」の文字を入れてLINEでのやりとりなんかも再現できます。サウンドも登録できるので、まるで本当に喋っているような感じにもできます。色んな使い方をしてみてくださいね。普通に楽しい!

Linda
Linda

バレてるわよ

既読 2

おまけ:ボイステキストをオンラインでダウンロードできる「Sound of Text」

リンダが喋ってる音声は、音声変換サービス「Sound of Text」というオンラインサイトで作りました。音声にしたい文章を打ち込めば、AIが喋ってくれます。発音も結構悪くないところがおすすめポイント。使い方はとても簡単で、音声化したい文章を「Text」項目に入力し、「Voice」で言語を選択。「Submit」を押せば音声の完成。「PLAY」ボタンで音声の再生、「DOWNLOAD」ボタンで音声をダウンロードできます。形式はmp3。

WordPressのプラグイン関連記事

【Wordpress】ダウンロードボタンのプラグイン 「Simple Download Monitor」 – freespace

テンプレートを配布する「ダウンロード」ページを作るにあたって、ダウンロードボタン…
officehojo.com

Wordpressのプラグインで画像を最適化する – freespace

SEO対策としての速度チェックでお馴染みの「Google PageSpeed i…
officehojo.com

WordPressのバックアップは「All-in-One WP Migration」か「BackWPup」プラグインがおすすめ! – freespace

WordPressのおすすめバックアッププラグイン「All-in-One WP …
officehojo.com