Word Balloon 吹き出しが簡単に使える【ワードプレス・クラシックエディタ使用時】

やっとブログ開設できました。

さあ記事を書こう!

と書きはじめたんですが…

「読みやすくするにはどうしたらいいか?」と悩んでしまいました。

で、他の人のブログを参考にさせてもらうしかない!とお散歩にでかけると、

「吹き出し」を使って対話形式で書いている記事がたくさんありました。

語りかけたり会話したりしているようにすることで、内容がわかりやすくどんどん読めてしまいます。

不思議な力を持っている「吹き出し」。

さやペンも「使ってみたい!」と思いました。

だけどさやペンが使っている無料テーマ「LION MEDIA」には「吹き出し機能」がありません。

でもでも、どーしても使いたいので探しました。

さやペン
さやペン
えへへ。見つけたよ。かわいいでしょ。

 

『吹き出し』を使うにはどうすれば?

吹き出しを使えるようにするにはどうすれば良いのか?

いくつか方法があります。

 

①吹き出し機能が実装されているテーマを使用する

テーマによっては、吹き出し機能が付いているものがあります。

テーマに実装されているものを選べば簡単です。

よく聞くテーマでは、

  • cocoon(コクーン)(無料で使える高機能テーマ)
  • JIN  (初心者でも使いやすい有料テーマ)

テーマに実装されている吹き出しの場合、テーマ変更をしたときにレイアウトが崩れたり、表示されなくなったりする事があります。

その為、テーマ変更には注意が必要です。

 

②Word pressにプラグインを入れて使う。

吹き出しのプラグインはいくつかあるようですが、私が試してみたのは2つです。

 

LIQUID SPEECH BALLOON 

Word press 5.0の新エディタ対応

さやペンは、Classic Editor(クラシックエディタ)を入れていたからなのか、うまく使えませんでした。

なので、他の物を探しました。

 

Word Balloon

吹き出しの形の種類がいろいろあって、操作もとても簡単でわかりやすい。

Classic Editor を入れていても使えたので、私はこちらを使用しています。

プラグインなのでテーマに関係なく使用ができます。

また、テーマ変更時にも問題が起こりにくい。

 

③CSSを駆使して作る。

私は、CSSがよくわからない初心者です。

CSSを使うのはハードルが高すぎるので却下です。

 

さやペンは②のプラグインで対応。

さやペンが使っているテーマには吹き出し機能が付いていません。

ワードプレス開設時、参考にしたマニュアル通りに進めテーマも決めました。

そして、テーマに関する設定もひと通り済ませました。

だから今からテーマを変えるというのは…ちょっと考えられません。

それでも、「吹き出し機能」が諦めきれず、何とかできないかと見つけたのがプラグインです。

使っているプラグインによって、相性の良いもの、悪いものがあるようで使えないものもありました。

なので、今回はClassic Editorを使用していても問題なく使える『Word Balloon』の説明をします。

 

プラグイン『Word Balloon』のインストール

ダッシュボードから【プラグイン】→【新規追加】をクリック。

キーワードの右枠に『Word Balloon』を入れる。

『Word Balloon(吹き出し)』が出てくるので、今すぐインストールを押す。

インストールが終わったら『有効化』を押して有効にする。

インストール・有効化が出来ると吹き出しマークのアイコンが出てきます。
吹き出し画像を入れたいときに、クリックすれば入力画面が別枠で開きます。
早速入れていきたいところですが、話している人など会話の主人公の画像が必要なので、先に画像を登録します

アバター画像(吹き出しで話す人)を登録。

ダッシュボードから設定を選択。

『Word Balloon』を押すと下の画面が出ます。

【写真の選択】を押して使いたい画像を選ぶ。

名前を入力。(ここで入力した名前が画像の下にでます)

メモの欄は未入力でOK。

最後にアバターの登録を押せば登録完了です。

 

実際に挿入してみよう。

投稿画面を開き吹き出しアイコンをクリックすると入力画面が出てきます。

  1. 表示したいアバターを選びます。
  2. セリフを記入の欄に文字を入力します。
  3. 吹き出しのタイプを選びます。

 

アイコンをクリックすると下面に編集欄が出てきます。

アバター画像の大きさを選べたり、ハテナやビックリマークなどもつけたりできます。

アニメーション機能で動いたりもします。

アバターとアイコンをそれぞれ違う動きにすることも可能。

さやペン
さやペン
動けるよ〜

必要箇所の入力が終わったら右下のマークをクリック。

すると、テキストなども一緒に入力されているので挿入完了です。

すごく簡単にできました。

お疲れ様でした。
さやペン
さやペン
「吹き出し」があるだけでページがとても見やすくなりました。
操作は簡単で使いやすいので、初心者に優しいです(^^)

 

プラグイン更新時の注意

プラグインは度々更新が入るのですが、その時にごく稀に不具合が出ることがあります。
私が体験した不具合は投稿画面からメディア挿入・アップロードが出来なくなる。という事がありました。
その間は、ダッシュボード、メディア、新規追加の方法で画像をアップロードしました。
事前に画像をアップロードしておけば、文書内に挿入できたのでなんとかなりました。
このプラグインの影響かはわかりませんが、その後の更新で改善しました。
ちょっと不具合がでても、待っていれば改善される事もあります。

Word Balloon まとめ

Word Balloon通常版(無料)

アバター画像3つ登録できます。

吹き出し枠の種類もたくさん。

無料でもいろいろな機能があるので初心者には十分かなーと。

 

Word Balloon PRO(有料)

アバター登録数無制限(データーベース限界まで)

吹き出しやアイコンの色など各種設定を細かくカスタマイズ出来る。

定形分の設定やお気に入りの設定が可能に。

AMPに対応。

アバターをたくさん登録したい方や、細かなカスタマイズをしたい人はPROを使ってみるのも良いかもしれません。

 

関連記事

こんにちは、さやペンです。 「ブログは初心者でも簡単にできますよ。」 「スキルが無くても大丈夫ですよ。」 なんて言葉を真に受けてはじめてみたブログですが… いざやってみると、聞きなれない単語や意味のわからない言葉が次[…]

関連記事

こんにちは、さやペンです。 WordPressでブログを始めてから1年。 ブログ開設当初、サイト上にユーザーIDが表示されているのに気付き、とても驚きました。 このままでは危険なんじゃないかと色々調べて対策。 なので[…]