Word balloonの使い方と感想!ブログで吹き出し会話形式するには

たくさんのバルーン風船




yashi
yashi
【yashi】

ブログ・投資・ビジネスをメインテーマとした『Office Exitの俳句』編集者。

ブログ運営→投資→ブラック企業から独立。ブログ収益360万、投資収益450万。

趣味は俳句。特技は俳句。仕事も俳句。
NHK全国俳句大会『入賞』、枕草国際俳句大会『入賞』、子規顕彰全国俳句大会『入賞』、福岡総合俳句大会『優秀賞』。

 

今回はこんな方向けの記事になります。

 

・Wordpressブログで吹き出しを使いたい

・おすすめのプラグインを探している

・スピーチバブルは面倒で使いにくい

 

ブログ運営歴が5年になる私ですが、プラグイン『Speech Bubble』は使うのが面倒でこれまで使用していなかったんです。

今回は新たに便利な『Word Balloon』を見つけたので使用方法と実際に使ってみた感想や、評価レビューをご紹介したいと思います。

※なお、当記事に登場する俳句は全てオリジナル作品なので『Office exitの俳句』に許可なく無断使用・転載することは禁じます。

ブログの吹き出し(会話形式)機能とは?

2人で会話ブログでたまに見かける吹き出しは『会話形式』で気軽にマンガ風に読めたり、飽きやすい文章のスパイスとして記事を読みやすくしてくれる便利なツールです。

 

おもにこのようなやり取りを見かけたことがあると思います。

 

A
A
やっほ~!久しぶり。
お~!久しぶり!元気してた?
B
B

 

このように『吹き出し枠』が追加されることで読み手に警戒されずに自然と読んでもらうことができます!

助手①
助手①
手取り…15万。
私は…手取り7万よ。
助手②
助手②
私は、手取り100万よ。

 

他にもこのように好きな画像をアバターにしたり、吹き出しや文字を装飾することで魅力的な吹き出しを作ることができるでしょう。

 

ちなみに、今回紹介する『Word Balloon』は無料版でも十分、使える機能を備えていると言えます。

『speech-bubble』プラグインは2018年12月から使えない(当サイトは使ってないけど)

stopの看板WordPressで吹き出しツールの代名詞とも言える『speech-bubble(スピーチバブル)』が2018年12月28日をもって配信停止になりました。

 

私はもともと使っていなかったのですがヘビーユーザーは重宝していただけにかなりの痛手だったと思います。

 

原因についてはハッキリしませんが分かっている状況は、

①2019年12月28日以降に新たにインストールできない
 
②2019年12月28日以前にインストールしている人は使用できるがサポートなし
 
③配信停止の原因は分からないが以前から「imgフォルダ」の中身が全て初期化されてしまうなどの不具合があった
 
④アップデートするとアイコンが消えてしまう不具合があった

恐らくは不具合が継続していたことが原因だと思いますが、いずれにしてもプラグインはちょっとしたことでバグが起こると製作者でも修正できないことがあるんですね。

 

どうかこの記事で紹介する『Word Balloon』は長いあいだ使えることを祈るばかりです!

『Word Balloon』を使用してみた感想!良い点(※使い方・手順つき)

goodの壁この『Word Balloon』を使うようになったのは1週間ほど前から。

 

実際にいくつか当ブログで使用してみた感想から良い点を挙げてみます!

 

①操作が超カンタン!
 
②画像をFTPアップロードする必要なし!
 
③吹き出しの装飾が直感的に行える!
 
④難しいCSSをいじる必要なし!

良い点①操作が超カンタン!

まず、インストールして有効化した時点から記事作成メニューにボタンが自動追加されます。

メニューが追加

※インストール→有効化の手順は後ほど紹介します。

 

そして実際にボタンを押してみると以下のようなポップアップが出現。

操作画面

 

HTMLコードの入力はなく出現するのは以下の項目だけ。

①画像
 
②セリフ
 
③メニュー

 

最低でも①画像、②セリフ、③メニューの『アバター』で名前を直接入力!この手順だけでカンタンにブログに吹き出しを追加することができます。

 

どうです?かなり簡単だと思いませんか?使いたい時に手軽に使える点が優れたポイントですね!

手軽度:

良い点②画像をFTPアップロードする必要なし!

これまで吹き出しの代名詞的プラグインの『speech-bubble(スピーチバブル)』は面倒でした。

 

なぜなら、アバターに使いたい画像をFTPソフトを使ってドメインが置いてあるサーバーにアップロードする必要がありました。

【FTP】
補足:サーバーとドメイン利用者が必要な情報ファイルのやり取りを行うファイル(場所)のこと。

 

アップロードするのは慣れてしまえば難しい作業ではないですがこんな弊害がありました。

弊害①FTPソフトがないPC環境では使えない
 
②アバターキャラが固定されていないと面倒

①は出先や自分のPCじゃない場合にFTPソフトが使えないとアップロードする前に面倒で諦めてしまうケース。

 

②はアバターのキャラが固定されてなくて流動的に変わるときに、FTPソフトにアクセスしてアップロードするのが面倒というケース。

 

Word Balloonなら記事に画像を挿入するとの同じ手順で、PCから直接Wordpressの『メディアライブラリ』にアップすればOK!

yashi
yashi
【一句ポイント】

『カンタンな 作業ではかどる 秋の夜長』

助手
助手
でも、夜更かしには注意。

即効性:

良い点③吹き出しの装飾が直感的に行える!

このWord Balloonはメニューをいじらずに①画像、②セリフだけ入力して挿入するとこんな感じに。

シンプルだね

 

画面をスクロールしていくと吹き出しがスライドして出現する仕組みになっています。

 

今度は、ポップアップにある装飾メニューをいじってみましょう。

 

吹き出しの設定①

①『吹き出し』ボタンをクリック。ポップアップの右上にあるコメント枠の装飾メニューから「考え事」を選択。
 
②左下にあるメニューの『アバター』をクリック。アバターの装飾で「影」を選択。
 
③画面の中央下にある「表示名」に名前を入力。

あら、透視能力?
助手
助手

 

次は、アバターの位置とメニューにある『吹き出し』をいじってみましょう。

①『吹き出し』ボタンをクリック。画面中央にある右矢印➡︎を選択。
 
②ポップアップ下のメニューにある『吹き出し』をクリック。「色を選択」で好きな色を指定します。
 
③「影」と「全幅」を追加してみましょう。

今度はこっちからよ。
助手
助手

メニューは【アバター】【吹き出し】の他に、

【アイコン】
 
【効果】
 
【フィルター】
 
【ステータス】

の4つがあり直感的に効果を確認しながら直感的にチョイスできるので色んな組み合わせを試してみると良いですよ!

 

最初にインストールした時点では『無料版』なので、使い慣れてきたら『有料版』にするとリミット制限がなくなって便利です。

操作性:

良い点④難しいCSSをいじる必要なし!

『Word Balloon』では難しいCSSへの打ち込みなど面倒な作業がありません。

 

プラグインを「インストール→有効化」した時点からすぐ使えるようになるという簡易さがあります。

 

もともと、WordPressは以下のプログラミング言語が使われていますが、

・CSS
 
・HTML

記事に囲み枠や装飾文字を使いたい場合は、CSSにあるスタイルシートにあらかじめプログラムを埋め込む必要があります。

 

そして、そのプログラムをもとに記事中にHTMLコードを入力すれば反映される仕組みになっています。

 

長年使っていく中でいずれは覚える必要がありますが、現時点で難しいと感じているならムリする必要はありません。

 

私の経験から言うと難しい作業でかえってモチベーションが下がってしまったら続かなくなるので、まずは利便性を優先することが重要です!

yashi
yashi
【一句ポイント】

『CSS 触らぬ神に たたりなし』

利便性:

『Word Balloon』を使用してみた感想!悪い点

不満そうな犬ここまでプラグイン『Word Balloon』の良かった点を紹介してきましたが、使用している中でふと思った悪かった点も併せて紹介しておきます。

 

①無料版だと3アバターしか登録できない
 
②記事作成中に勝手に画面がスクロールされる

悪い点①無料版だと3アバターしか登録できない

speech-bubbleではセリフセットを使えば何通りもパターン化することができましたが、『Word Balloon』でもできないか調べてみました。

 

WordPressメニューの「設定 → Word Balloon」でプラグインの設定画面を見てみると、

 

3アバターまで

難点無料版だと最大『3アバター』しか登録することができません。

無料版でも全然使える優れモノなんですが、吹き出しを積極的に使う人からしたらちょっと物足りない…という印象を抱くでしょう。

 

ちなみに「有料版」である『Word Balloon PRO』に変更すると、アバター登録数は無制限になりその他にも色んなカスタマイズができるようになります!

 

詳しくは、このあとの章でご紹介します。

yashi
yashi
【一句ポイント】

『3アバター 案山子の数にも 満たされず』

助手
助手
畑の案山子(かかし)の事ですね。

アバター数:

悪い点②記事作成中に勝手に画面がスクロールされる

これは他に報告例があるのか現時点では分かりませんが『Word Balloon』で吹き出しを使うようになってから問題が発生するようになりました。

 

文章入力時にかってに画面がスクロールされてキーボードの「PgDn(ページダウン)」を押した状態になることがあります。

 

現象をまとめてみると、

①「Back Space」で文章削除するとページダウンする
 
②文章入力から「漢字変換」しようと「スペース」を押すとページダウンする
 
③「Enter」を押した時はページダウンはしない

 

そして因果関係がありそうな私の作業環境をピックアップしてみると、

 

【作業環境】
・バージョンはWord Balloon(4.2.4)
 
・作業は「テキストエディタ」で行うことが多い
 
・PCは「Windows 8.1」を使用
 
・ブラウザは「Google chrome」使用
 
・インストールしているプラグインは20個ほど
 
・数日前に「ALL in One SEO」など10個ほど最新バージョンに更新した

とこのような状況で頻度にはムラがありますがいちいちカーソルをもとの場所に戻す手間が発生しています。

 

もちろん、何も起きない時は起きないのですが頻発する時はちょっとイライラしますね。

 

予想ですがおそらく他のプラグインと干渉していることが原因ではないかと思いますが、他にもおなじような現象が起こる方がいたら教えて欲しいです!

サポート:

『Word Balloon』のインストール方法

PCを操作する女性ここでは、さっそく『Word Balloon』使ってみたいという方向けにインストール手順をご紹介しておきます。

 

すでにインストール済みの方や興味がない方はここで離脱してもらっても構いません。

 

基本的には製作者であるやーまんさんが運営する「Back 2 Nature」で詳しく紹介されているので詳しいことを知りたい方はそちらを参照して下さい。

≫『Back 2 Nature

インストール手順

基本的にはプラグインから「新規追加」する作業になります。手順はカンタンなので作業はすぐ完了しますよ!

 

①WordPressメニューから「プラグイン」→「新規追加」をクリック
 
②「キーワード」の検索窓に『Word Balloon』と入力する
 
③「今すぐインストール」をクリック
 
④インストール完了したら「有効化」をクリック

 

インストール手順はたったこれだけです。アバター登録する場合には、

 

①WordPressメニューから「設定」→「Word Balloon」を選択
 
②「アバターの新規登録」「アバターのリスト」から登録設定

 

ちなみにインストール後にメニューに追加されるボタンに『セリフセット』というボタンも登場します。

 

セリフセット使い方

 

上図のように記事になっている文章をあとでセリフに変更したい時に使用すると簡単に『吹き出し』に変身させることができるツールです!

 

セリフセットの使い方②

無料版→有料版に切り替える方法

無料版を使ってみたら不具合もないし重宝するから「ぜひ、有料版が欲しい!」という方向けにアップグレードする方法もご紹介しておきます。

 

製作者である「やーまん」さんのサイトで直接カートに入れて購入するという形。

①『購入サイト』にアクセス。
 
②個人サイト向け(年間1,280円)・複数サイト運営向け(年間2,160円)・複数サイト運営向け(年間2,940円)からコースを選択
 
③クレジットカードかPayPalのいずれかで決済

 

また、無料版ではアバター登録数やカスタマイズに制限があることは先ほど触れましたが、有料版である『Word Balloon PRO』にグレードアップするとどんなメリットがあるのでしょうか。

 

アップグレードするメリット①アバター登録数は無制限
 
②吹き出し・アイコンの初期設定カラーをカスタマイズ
 
③各種設定の変更
 
④お気に入り設定でカンタン呼び出し
 
⑤AMPページ対応

≫詳しくは製作者「やーまん」さんの『Back 2 Nature』サイトをご覧下さい。

『Word Balloon』に関する豆知識

たくさんのランプここでは、製作者やーまんさんのサイトで報告が確認されているサポート内容を参照しながら豆知識をご紹介しておきます!

 

また、よく報告されているトラブルシューティングは『よくあるご質問』にまとめられているので不具合があった方はまずこちらを確認するようにしましょう。

豆知識①使用するテンプレートテーマによって使えない?

どの、WordPressテーマを使っていても使えるの?

 

現在、お使いのWordPressテーマによって『Word Balloon』が問題なく使用できるかという点ですが、トラブルシューティングにトラブルとその答えが記載されていました。

 

・スマホで見ると吹き出しの位置がかなり下の方に表示されてしまう
 
・吹き出しやアバターに空間ができる

この問題では使用しているWordPressテーマや他のプラグインとの関連性が指摘されています。

 

テーマやプラグインのdivタグに対する修正を行えばいいとの事でしたが具体的にはCSSのスタイルシートを参照して、

【間違った例】

.content div{
margin-top: 2rem;
}

【正しい例】

.content div:not(.w_b_div){
margin-top: 2rem;
}

このように修正すれば問題なく作動するとのことでした。

 

基本的に初心者の方はCSSのスタイルシートを触るのはかなり難易度が上がってしまいます。以下の点に注意しながら作業を進めましょう。

 

①テーマは親テーマではなく『子テーマ』を修正すること!
 
②必ずWordPressのバックアップを取ってから実行しましょう!(間違って手を加えると修復するのが難しいため)

 

どうしても分からない時は『Word Balloon』の使用を控えて他で代用できないか?また、どうしても使いたい場合で今お使いなのが無料テーマならテーマ変更することも頭に入れておくと良いでしょう!

豆知識②画像のサイズは小さくしないといけない?

アバターに入れる画像は小さくしないといけない?

 

これは実際に『Yahoo!知恵袋』にも掲載されていたユーザーの悩みですが、アバターに使用したい画像があった場合は特に厳密に画像のサイズを気にする必要はありません。

 

ちなみに、この記事で使用していた『助手』のアニメアイコンは、

少女①
ファイルサイズ:21KB
 
ファイル形式:jpeg
 
サイズ:500×500

 

ブログではよく使用される画像圧縮ソフトで最適化した画像サイズ・容量ですが、記事中ではそのままアバター指定しています。

 

また、上で「アバターに入れる画像は小さくしないといけない?」とつぶやいているイラスト女性は、

はてな?の女性
ファイルサイズ:6KB
 
ファイル形式:jpeg
 
サイズ:210×228

とさらに一回り小さい画像ですがアバター画像を見る限りそこまで画像サイズの違いは分からない、というのが正直なところ。

 

100KB以上と必要以上に大きいサイズはサーバーを圧迫するので避けるべきですが、それ以下の画像であればそこまでシビアに考える必要はないかと思われます。

 

写真ではなくイラストなら画質に差はないので上記のイラスト女性くらい画像圧縮するのがベターですね。

 

心配な場合はプレビューで確認しながら記事作成を進めるとよいでしょう!

豆知識③多用するとうざい!1記事で10個以内が目安

便利な会話形式プラグインですが記事がずっと吹き出しだらけだったらどうでしょうか。

 

会話形式は『読みやすい!』と言う人がいる一方で意外と『うざい!』とか『うっとうしい』と考えている読者は存在します。

 

あるあるですが吹き出しプラグインを使い始めると、

 

yashi
yashi
なんだか最近、記事がワンアップしたような気がする~!!!!

 

という勘違いに胸が熱くなることがあると思いますが安心して下さい。

 

助手
助手
それ、勘違いですわ。

 

使い始めた頃は記事中に入れるのが楽しくなるしどんどん会話のバリエーションが増えていきますが、基本的にはスパイス以外には使い道はありません。

 

以下に要点をまとめておきます。

①1記事で10個以内が目安
 
②キャラは多くても3アバターまで
 
③長文になりがちな章で使用する

どんなものにも程度というのがあるので読者を満足させる会話形式がかえって読者を離脱させる要因になりかねません。

 

当記事ではすでにここまでで20個使っていますが会話形式の記事だということを割り引いても使いすぎだと感じています。

助手
助手
そんなこと、ありませんわ。
ムダ、使いすな。
yashi
yashi

まとめ

シンプルなインテリア今回はここまで2018年12月に公開停止になった『Speech Bubble』に代わる新しいプラグイン『Word Balloon』を私が使用した実体験から良い点、悪い点を紹介してきました。

 

無料版では制限があるものの『シンプルがゆえに使いやすい』の一言につきます。

 

今回の記事の大事な要点をまとめておきました。

①操作が超カンタン!
 
②画像をFTPアップロードする必要なし!
 
③吹き出しの装飾が直感的に行える!
 
④難しいCSSをいじる必要なし!
 
⑤無料版だと3アバターしか登録できない
 
⑥記事作成中に勝手に画面がスクロールされる

yashi
yashi
【締めの一句】

『流れ星
突如現る
Wordballoon』

今回は無料版の紹介でしたが使い倒して使い続けるも良し!さらにパターンを増やすために有料版に変えても良し!

 

いずれもブログにおけるスパイス要素なので使いすぎ厳禁ですが、コスパよく効率的に使うことでさらに記事の質を上げていきましょう!






ABOUTこの記事をかいた人

ブログ・投資・ビジネスをメインテーマにした俳句ブログ『Office Exitの俳句』編集者。ブログ運営→投資→ブラック企業から独立。ブログ収益360万、投資収益450万。趣味は俳句。特技は俳句。仕事も俳句。NHK全国俳句大会『入賞』、枕草国際俳句大会『入賞』、子規顕彰全国俳句大会『入賞』、福岡総合俳句大会『優秀賞』。