Blog IT

ワードプレスで吹き出しを作りたい←WordBalloonでOK

 

・ワードプレスで吹き出しを作る方法が知りたい
・WordBalloonの使い方が知りたい

こういう疑問に答えます。

 

この記事を書いているぼくはWordBalloonというプラグインを普段から使っています。

本記事でも既に登場しました笑。

 

結論から言うと、WordBalloonはカスタマイズが自由にできてかなりいい感じです。

プラグインを入れすぎると(20個くらい)サイトが重くなりますが、このプラグインは優先的に使うべきと思いました。

画像、動画を入れてわかりやすく解説します。

 

ではまずはインストール手順から解説していきますね。

Wordballoonの使い方

Wordballoonをインストールする

1.管理画面の「プラグイン」から「新規追加」をクリック
2.検索窓に「Word Balloon」と入力 *スペースを抜かすと上手く検索できないかもです
3.「今すぐインストール」をクリックして、その後「有効化」をクリック

 

 吹き出しのアバター登録

アバターを登録していきます。

アバターとは下記のような、吹き出しの横にある画像です。

吹き出しの横にいるぼくがアバターだよ!

 

ではアバターを設定していきます。

「↑↓」のアイコンをクリックして「Word Balloon」を開いてみましょう。

 

上記の赤枠で囲んだところからアバターの画像、名前を入れます。

「メモ」は入力しなくてもOKです。

 

「ゾウさん」というキャラクターを実際にアバター登録してみます。いちおうメモつきにしてみました。

これでOKと思ったら「アバターの登録」をクリック。

 

「ゾウさん」の追加が確認できました(≧∇≦)b

アバター登録の上限について

無料版ではアバターを3つまでしか登録できませんが、PRO版だと4つ以上登録することができます。

アバターは投稿画面で自由に切り替えれますので、ぶっちゃけpro版を買わなくてもOKです。

「決まったアバターが4つ以上あって、毎回アバター設定するのが面倒めんどくさい」という方はPRO版を検討してみてください。

PRO版の詳細は最後に述べます。

 

WordBalloonを投稿画面で使う

投稿画面にいくと吹き出しマークが追加されているので、クリックします。

 

「セリフを記入」にしゃべらせたい言葉を入力。

 

「挿入」をクリックします。

すると...

パオーン

「ゾウさん」が表示されました!

ちなみに、

アバターを登録するとき「メモ」で入力した文字がアバター名の後ろに続きます。

 

これまででアバターの登録方法がわかりました。

冒頭でお伝えしたとおり、登録できるアバターは3つまでですが、毎回手動で登録すればアバターや表示名を下記のように変えれます。

ライオンさん
ライオンさん
がおー!

ぼくは毎回手動で設定していますが、あまり苦ではない作業なのでPRO版は購入していません笑。

 

吹き出し、アバターのデザインを変える

これまででアバターを自由に変えれるようになったので、次は「デザインの方法」をご紹介していきます。

と、その前に...

上記のように、吹き出し挿入画面で複数のカスタム画面を表示させると見づらくなるので、設定したいものだけを開くのがおすすめです。

左から順に順に解説していきます。

 

アバター

👆いろいろ設定してみましたが、ぼくは表示名を変えるくらいしかしないです笑。

あまりゴチャゴチャし過ぎていると見づらくなってしまいますからね。

 

吹き出し

こちらもアバターデザインと同じように、サイズや文字色、位置などを変えれます。

 

 
👆「セリフ」をクリックするとズラっと吹き出しのテイストを変えれます。
参考までにどうぞ。

セリフ

ライオンさん
ライオンさん
がおー!

考え事

がおー!
ライオンさん
ライオンさん

カラー

ライオンさん
ライオンさん
がおー!

丸い

ライオンさん
ライオンさん
がおー!

しっぽ

ぱおーん

ぽっち

ぱおーん

上側

ぱおーん

下側

ぱおーん

SOi

ぱおーん

ぱおーん

RPGⅠ

ぱおーん

RPGⅡ

ぱおーん

RPGⅢ

ぱおーん

セリフ太枠

ぱおーん

ぽっちグラデーション

ライオンさん
ライオンさん
がおー!

丸いグラデーション

ライオンさん
ライオンさん
がおー!

ハート

ライオンさん
ライオンさん
がおー!

にょろにょろ

ライオンさん
ライオンさん
がおー!

手書き風

ライオンさん
ライオンさん
がおー!

とんがり

ライオンさん
ライオンさん
がおー!

8ビット

ライオンさん
ライオンさん
がおー!

8ビットⅡ

ライオンさん
ライオンさん
がおー!

しっぽの考え事

ぱおーん

叫び

ぱおーん

セリフ上側

ぱおーん

セリフ下側

ぱおーん

考え事2

ぱおーん

セリフ 上側中央

ぱおーん

セリフ 下側中央

ぱおーん

手書き風 上側

ぱおーん

 

アイコン

アバター画像にアイコンを付けることができます。

ぱおーん

👆ハートをつけてみました。

ぱおーん!

👆怒りアイコンをつけてみました。

アバターの感情を豊かにするにはアイコンをつけるといいですね👍

下記のようにたくさんあるので、試してみてください。

上矢印 下矢印 はてな ハート ハート(複数) ハート(横並び)
怒り 感嘆符 感嘆符(複数) 8分音符 汗汗
がーん 星(横並び) キラーン ドヨーン はっ

 

効果

上記のアイコンでアニメーションをさせることができます。

ぱおーん

👆アバターのみをカスタムしてみました。

ぱおーん

👆アバター、吹き出し、アイコンをカスタムしました。

 

振り子 揺れる 鼓動       振動       左右
右回転 左回転 点滅       ロール右 ロール左
ロール上 ロール下 上がって消える 下がって消える ゴム
ぶるぶる 振り振り 右回り 左回り  

👆調べてみたら19種類もありました笑。カスタム性バッチリですね!

 

フィルター

アバター、アイコン、吹き出しの色調が変えれます。

ぱおーん

ノスタルジックでいいですね~笑。

ぼかし 明度       コントラスト モノクロ 色調回転 90° 色調回転 180°
色調回転 270 階調反転 透過 彩度       セピア  

 

ステータス

「ステータス」では、音声をつけることができます。

ぱおーん

 

WordBalloonの有料版について

開発者の方による有料版の説明によると、以下が可能になるみたいです。

・アバターの登録はデータベースの上限まで無制限

・吹き出し、アイコンの初期設定カラーをカスタマイズ

・お気に入り設定を登録しカスタマイズ設定を簡単に呼び出し

・AMPページに対応

・モバイル端末からのアクセスで吹き出しの種類などを変更

・吹き出し、アバター、アイコン毎にインビュー(アニメーション)機能の設定が可能

・吹き出し毎にアイコンのカラーカスタマイズが可能

・各種設定の変更

この中でぼくが気になったものは

・吹き出し、アバター、アイコン毎にインビュー(アニメーション)機能の設定が可能

です。

 

言い忘れていましたが、WordBalloonの設定画面で下記の赤枠をチェックすると吹き出しをアニメーションさせることができます。

 

ただしこの設定をすると全ての吹き出しがアニメーションされてしまいます。

個別にアニメーションさせるにはPRO版を買うしかないようです。

ぼくは最初「うまいこと個別指定できないかなぁ」と思っていたのですが、PRO版を買うしかないことを知りました笑。

 

無料版で個別指定できたら最強だったんですけどね~笑。

どうしても個別で吹き出しアニメーションをさせたい場合はPrO版を買ってみるといいですね。

 

料金は以下の通りです。

引用:WordBalloon有料版紹介ページ

👆一年間契約の料金です。複数サイトを運営している方は2サイト、3サイトの方を選ぶとお得ですね。

👆永続で契約できるプランです。

8~10年ほどサイト運営をする方はこちらのほうがお得ですね。

 

まとめ:自分だけの吹き出しを作ってサイトをユニークに

この記事では、WordBalloonの導入、使い方、カスタム方法についてご紹介しました。

見てきて分かるように、カスタム性がめっちゃあります。

なので他のサイトと差別化ができるので、ぜひWordBalloonを使ってユニークなサイトを作ってみてください。

 

それでは以上になります。


スポンサードリンク

-Blog, IT

© Copyright March/2020 タクミ