【図解入り】Word Balloonの使い方を徹底解説!ワードプレス吹き出しおすすめプラグイン
ここ最近では記事に吹き出しを使っているサイトを多く見かけます。
吹き出しを記事に入れることで、楽しく飽きずに読み進めさせれたり、硬いイメージを和らげてくれる、ストーリー性を演出できるなど多くのメリットがありますね。
吹き出し機能を装備したいろんなWordPressテンプレートがありますが、サイトで使う吹き出しデザインは1種類しか選べません。
今回ご紹介するワードプレス吹き出しプラグイン「Word Balloon」は投稿画面で吹き出しのプレビューを見ながら、記事内で複数のデザインを使うことができます。
吹き出しデザインな、な、んと23種類!
それでは「Word Balloon」のインストール方法、アイコン設定方法から使い方、23種類の吹き出しデザインまで解説していきましょう。
この記事の目次
- 【動画解説】Word Balloonの使い方
- Word Balloonインストール方法
- Word Balloonアイコン設定方法
- Word Balloon吹き出し挿入方法
- Word Balloon吹き出しデザインはなんと23種類
- 吹き出しデザイン「考え事」
- 吹き出しデザイン「カラー」
- 吹き出しデザイン「丸い」(左吹き出し)
- 吹き出しデザイン「丸い」(右吹き出し)
- 吹き出しデザイン「しっぽ」(左吹き出し)
- 吹き出しデザイン「しっぽ」(右吹き出し)
- 吹き出しデザイン「ぽっち」(左吹き出し)
- 吹き出しデザイン「ぽっち」(右吹き出し)
- 吹き出しデザイン(上側)
- 吹き出しデザイン「下側」
- 吹き出しデザイン「SOi」
- 吹き出しデザイン「RPG I」
- 吹き出しデザイン「RPG Ⅱ」
- 吹き出しデザイン「RPG Ⅲ」
- 吹き出しデザイン「セリフ太枠」
- 吹き出しデザイン「ぼっちグラデーション」
- 吹き出しデザイン「丸いグラデーション」
- 吹き出しデザイン「ハート」
- 吹き出しデザイン「にょろにょろ」
- 吹き出しデザイン「手書き風」
- 吹き出しデザイン「とんがり」
- 吹き出しデザイン「8ビット」
- 吹き出しデザイン「8ビット Ⅱ」
- 吹き出しデザイン「しっぽの考え事」
- Word Balloon提供者のご紹介
- Word Balloonには上位版があります
- まとめ
【動画解説】Word Balloonの使い方
Word Balloonのアバター設定方法と使い方、詳細モードの設定方法を動画で解説しています。Word Balloonでどんなことができるのか理解していただけると思います。
まずは約13分のこちらの動画をご覧ください。
Word Balloonインストール方法
ダッシュボード>「プラグイン」>「新規追加」をクリックします。
キーワードで「Word Balloon」を検索します。いちばん最初に「Word Balloon」が表示されるはずです。「今すぐインストール」をクリック>「有効化」をクリックでインストールは完了です。
プラグインの「有効化」を忘れないようにしましょう!
Word Balloonアイコン設定方法
「Word Balloon」が有効化されると「設定」に「Word Balloon」が追加されます。クリックしましょう。 アバターの新規登録画面が開きます。アバターの画像(150×150px程度:正方形)、名前(アバターの名前)、メモ(アバターに関するわかりやすいメモ)を記入します。 名前は吹き出し設置の際、アバターの下に表示されます。(※名前は未記入でもOK)メモは投稿画面でアバター選択のときに選ぶ名称になるので、必ず記入するようにしましょう。 登録したアバターは「アバターのリスト」に表示されます。登録後、各右上の▼クリックで再編集することができます。
「設定」では「吹き出しが画面に表示される際にアニメーションさせる」のON/OFFを選択できます。デフォルトでは「ON」になっていますので、アニメーションをさせたくない方は「OFF」を選択しましょう。
アバター登録は3個までです
「Word Balloon」(無料版)のアバター登録は3個までです。
「Word Balloon」(無料版)のアバター登録は3個までです。
Word Balloon吹き出し挿入方法
記事編集画面に「Word Balloon(ふきだし)」のアイコンが追加されています。クリックしましょう。 吹き出し挿入画面が開きます。「セリフを記入」に吹き出しのセリフを書き込みましょう。 左下で登録したアイコンを選択できます。(※ここにメモが表示されるので、必ずメモはわかりやすい名称で登録しておきましょう。) 右上に「かんたんモード」の選択ボタンがあります。外すと「詳細モード?」の設定画面が開きます。ここで吹き出しの文字色、サイズ等細かい設定が可能ですが、かんたんモードでも十分使えると思います。 赤枠のアイコン選択で、「左吹き出し」右吹き出し」」+真ん中のアイコン選択で「中央寄せ」を指定できます。設定が終了したら右下の「挿入」をクリックします。
左イラスト吹き出しの例
このプラグイン使えるぜ!
右イラスト吹き出しの例
このプラグイン使えるぜ!
左イラスト吹き出しセンター寄せの例
このプラグイン使えるぜ!
かんたんモードでも十分に使えます!
Word Balloon吹き出しデザインはなんと23種類
「Word Balloon」の最大の売りはなんといっても豊富な吹き出しデザイン。「セリフ」エリアクリックで一覧が表示されます。
では「Word Balloon」の吹き出しデザインを紹介しましょう。
吹き出しデザイン「考え事」
吹き出しデザイン「カラー」
吹き出しデザイン「丸い」(左吹き出し)
吹き出しデザイン「丸い」(右吹き出し)
吹き出しデザイン「しっぽ」(左吹き出し)
吹き出しデザイン「しっぽ」(右吹き出し)
吹き出しデザイン「ぽっち」(左吹き出し)
吹き出しデザイン「ぽっち」(右吹き出し)
吹き出しに色が付いているデザインでは、左吹き出しと右吹き出しで自動的に色が変わります。
吹き出しデザイン(上側)
吹き出しデザイン「下側」
吹き出しデザイン「SOi」
吹き出しデザイン「RPG I」
吹き出しデザイン「RPG Ⅱ」
吹き出しデザイン「RPG Ⅲ」
吹き出しデザイン「セリフ太枠」
吹き出しデザイン「ぼっちグラデーション」
吹き出しデザイン「丸いグラデーション」
吹き出しデザイン「ハート」
吹き出しデザイン「にょろにょろ」
吹き出しデザイン「手書き風」
吹き出しデザイン「とんがり」
吹き出しデザイン「8ビット」
吹き出しデザイン「8ビット Ⅱ」
吹き出しデザイン「しっぽの考え事」
未来派的にはシンプルな「ぽっち」「セリフ太枠」「手書き風」が気に入ってます。
Word Balloon提供者のご紹介
「Word Balloon」インストールのときに作成者:YAHMANと表示されます。
YAHMANさんはハンドルネーム「やーまん」で「Back 2 Nature」というすばらしいサイトを運営されています。
なんとやーまんさんは、Google Mapに道が掲載されて無い山奥へ移住されているんですよね。そんな環境で、プラグイン「Word Balloon」を製作されたというのには驚きしかありません。
ネット回線はどうしているんだろう・・・
Word Balloonには上位版があります
Word Balloonには上位版があります。
Word Balloon PROでは下記の機能が使えるようになります。
- アバター登録無制限(データーベース上限まで)
- 吹き出し、アイコンの色を自由にカスタマイズ
- 定型文の設定が可能
- カスタマイズした設定を簡単に呼び出し
- AMPページに対応
- モバイル端末からのアクセスで吹き出しの種類などを変更
- 吹き出し、アバター、アイコン毎にインビュー(アニメーション)機能の設定が可能
- 吹き出し毎にアイコンのカラーカスタマイズが可能
- 各種設定の変更
プラグインWord Balloon通常版でも十分に使えますが、アバターは3個までしか登録することができません。
口コミなどで3個以上ののアバターを使う方には、プラグインWord Balloon PROはかなり重宝すると思います。
まとめ
吹き出しのプラグインといえば、「Speech Bubble」と「LIQUID SPEECH BALLOON」のふたつが有名です。
「Speech Bubble」は多くの方が利用していましたが、2018年12月をもって配信が終了しています。またFTPソフトを使っていちいちアバター画像をアップロードしなければならないというデメリットがありました。
「LIQUID SPEECH BALLOON」も最新エディター「Gutenberg」に対応していて機能も充実していますが、アバター登録の手軽さ、吹き出しデザインの豊富さなどで比較すると「Word Balloon」が一枚上かなと思います。
いろいろなWordPressテンプレートを使っていると思いますが、吹き出しデザインで差別化する意味でも、「Word Balloon」を是非取り入れてみてください。
最後に、やーまんさん、すばらしいプラグインの提供ありがとうございます。
【Better Font Awesome】の使い方を図解解説!Webアイコンをサクッと設置できるWordPressプラグイン
この2つのテキストリンク、どちらが見た目きれいですか?
>>どちらがきれいに目ますか?
どちらがきれいに見えますか?
はい。下のテキストリンク前に矢印のアイコンがあったほう
2019-07-15 20:36
『自分を変える習慣力』を読むべき理由~潜在意識を見方につけて良い習慣を身につけよう
「本業が忙しくて 記事作成の時間がとれないんです。 どうすればいいですか?」
「モチベーションが落ちて、毎日の作業が続かないんです。」
こんな相談をよく受けますが、決ま
2019-07-30 15:02
はじめまして。
なかいと申します。初心者ですが、いろいろと参考になりました。他にも勉強させてください。宜しくお願いします。
なかいさん、こんにちは。
吹き出しはいろんな場面で使えるので
ぜひ取り入れてみてください。
こちらの記事を拝見した後、この Plugin を活用させてもらっています‼️
良いまとめをありがとうございました
雨宿リョウさん、こんにちは。
未来派です。
吹き出しのデザインを自由に選べるのがうれしいですね。記事がお役に立ててよかったです。今後ともよろしくお願いします。<(_ _)>