【おススメ】Word Ballonを使った吹き出し記事の書き方

目安時間:約 26分

 

こんにちは。ブログ管理人の筒兄です。

 

ブログの記事を書くときに文章を読みやすくするテクニックとして、「吹き出し」を使って記事を書くという方法があります。

 

当ブログをみていただいたらわかりますが、この人たちがしょっちゅう会話してるでしょ?

 

僕筒兄
筒兄
筒兄
俺様アフィリレッド
アフィリレッド
アフィリレッド

 

これは「word balloon」というプラグインをインストールして使っています。

 

このプラグインは設定も簡単な上、操作性も抜群に優れているので吹き出し機能を使ってみたい方には超おススメです。

 

今回はこの「word balloon」の設定から使い方までを解説していきます。

 

吹き出しを使うメリット

プラグインの設定の前に「吹き出し」を使うメリットをお伝えしましょう!

 

まずはこちらの文章をご覧ください。

インターネットビジネスにはアフィリエイトというビジネスがあります。

 

アフィリエイトとは「ホームページ」や「ブログ」に広告を貼り広告収入を得る仕事です。

 

初期投資も少なく忙しいサラリーマンでも好きな時間でできるのでおススメの副業といえます。

この文章を吹き出しを使って表現すると

 

アフィリエイトとって一体なんですか?
アフィリレッド
アフィリレッド
アフィリエイトとは、広告主と提携して「サイト」や「ブログ」に広告を貼り収入を得るビジネススタイルです。

 

初期投資も少なく忙しいサラリーマンでも気軽に始められるのでおススメです。

筒兄
筒兄

このように文字だけよりも吹き出しを使って表現したほうが読みやすい文章になります。

 

無料で使えるのではさっそくプラグインをインストールしていきましょう

word balloonのインストール

WordPressのダッシュボードから「プラグイン」、「新規追加」から「word balloon」と入力しインストールします。

 

インストールしたら「有効化」します。

 

これでインストール完了です。

 

次にword balloonを使うための吹き出し用キャラの登録をしていきましょう。

 

吹き出しキャラの登録方法

プラグインをインストールして有効化すれば「設定」から「word balloon」をクリックします。

 

するとアバターの新規登録画面が表示されるので、「写真の選択」、「アバター名」、「メモ」を入力し、「アバターの登録」をクリックします。

 

これでアバターの登録が完了です。

 

すごく簡単でしょう!

 

写真はあなたのブログのイメージに合うようなキャラを作ってもいいし、自分の顔を出してもいいしお好みで選んでください。

 

名前も決めているのがあればがあればそれで設定しましょう。

 

メモは任意でもかまいませんがわかりやすいものがいいと思います。

筒兄
筒兄

word balloonは無料で使えますが、無料版は「キャラ登録が3人」しかできないため3人以上のアバターを使いたい方は、有料版にアップグレードすることをおススメします。

 

最初のうちは無料版で全然いいと思いますが、物足りなさを感じたら有料版を検討してもいいかもですね!

筒兄
筒兄

以上でアバターの登録は完了です。

記事内でword balloonを使ってみよう!

それでは実際にword ballonの使い方について解説します。

 

word ballonをインストールして有効化すれば記事投稿画面に「吹き出し」のアイコンが追加されてるのでクリックします。

 

 

クリックすれば登録しているアバターが表示されるので、吹き出し部分に文字を入力し挿入をクリックします。

 

 

挿入すれば記事上では下のように表記されます。

 

英文字はアバターを表示させるタグで黄色のマーキングした部分はあなたが入力したテキスト内容が反映されます。

 

 

これをプレビューで表示してみると

 

 

ばっちり表示してくれます。

 

どうですか!

 

文字入力して記事内に挿入するだけなので簡単でしょ!?

筒兄
筒兄

以上が基本的な使い方です。

 

次に吹き出し機能の詳細設定について解説します。

 

吹き出し機能の詳細設定

吹き出しの詳細設定をするには「かんたんモード」をOFFにします。

 

これをOFFにすれば詳細に設定をする項目がでてくるので順番に解説します。

 

アバターを変更する

アバターを変更して表示するには「赤枠の▼」をクリックすれば登録しているキャラクターが表示されます。

 

 

アバターの表示位置を変更する

矢印のアイコンをクリックすればアバターの表示位置を「左側」、「中央」「右側」に変更できます。

 

・左側

・中央

 

・右側

 

吹き出しの枠を変更する

デフォルトの「セリフ」の枠以外にも色々な吹き出しの枠に変更することができます。

 

種類は豊富でユニークな枠も多いので色々とシーンに合わせて変更してみてください。

 

 

種類が多いので一つ一つの説明は省きます。

 

アバターに表現をつける設定

アバターのサイズを変更したり影をつけたりなど表現を設定できます。

 

記事のシチュエーションに合わせて変更してみてください。

 

 

吹き出しの設定

ここでは「文字色」、「バックの背景色」、「枠線の色」、「文字サイズ」、「セリフの配置」、「影」、「吹き出し枠の幅」を設定できます。

 

 

アイコンの設定

アバターに「?」や「!」など色々なアイコンをつけることができ、アイコンの位置やサイズ、水平表示か垂直表示かまで設定できます。

 

 

例えばアイコンの中に「感嘆符(複数)」というのがありそれを選ぶと

 

 

このように「!!マーク」を表示できました。

 

面白いので色々試してみてください。

 

効果の設定

アバターやアイコン、セリフに動きをつけることができます。

 

 

試しにレッド君をクルクル回してみましょう!!

 

やめろー!目が回るー!!
アフィリレッド
アフィリレッド

このように使い分ければあなたの記事もまるで漫画のように演出することができます!

 

ていうか俺様で試すんじゃねーよ!

 

あー気持ち悪い・・・

 

何回転したと思ってんだ(怒)

アフィリレッド
アフィリレッド
あー面白かった!

 

レッド君ごめんね(笑)

筒兄
筒兄

フィルターの設定

アバターやアイコン、セリフに「ぼかし」や「モノクロ」などフィルターをつけることができます。

 

 

「諧調反転」というフィルターをかけるとこんな感じに!

 

これは・・・怖い・・
筒兄
筒兄

名前の表示位置設定

アバター名をどの位置に表示するのか、表示名、色の変更ができます。

 

 

ステータスの設定

吹き出しの横にコメントを入れたりコメントの文字色の変更、サウンドの挿入ができます。

 

テストテスト
テストテスト
筒兄
筒兄

ステータスの項目は特に必要なくサウンドはファイルが大きいので私は使っていませんが、興味があればやってみてください。

 

Word Balloonを使うときの注意点

Word Balloonをつかうときの注意点として使っているテーマによっては正常に作動しないこともあり、その場合テーマのタグの調整なども必要になります。

 

またプラグインを使用して万が一トラブルが起きても責任は全て自己責任となるためその点も理解した上で使用してください。

 

以下が公式ホームページに記載されている注意点です。

 

注意点としてアバターの登録情報はWordPressのデータベースにWord Balloon専用で新規登録を行っていることです。

 

プラグインにデータベースを触られたく無い方は、このプラグインのご使用はお控えください。

 

尚インストール済みプラグインのページからWord Balloonを削除した際には、プラグインで使用したデータベースとオプション部分は削除され、クリーンアンインストール仕様となっています。

 

このプラグインを使用した事によって生じたトラブルや障害などに対して作者は一切の責任を持たないものとします。

このプラグインの利用はすべて利用者の責任において行ってください。

 

Word Balloonを使用した投稿をチェックしているテーマはNeatly、Simple DaysとTwenty Nineteenのみです。

 

特定のテーマに依存する様な形では製作していませんので、多くのテーマでご利用可能と思います。

 

但し、

お使いのテーマによっては、
Word Balloonが使用するdivタグやimgタグに
テーマ独自のスタイルが適応されます。
その際は作者が意図したアバターや吹き出しの配置になりません。
コンテンツ内のdivやimgタグにmarginが指定されているテーマだと調整が必須です。
やーまん
やーまん

 

また今後のバージョンアップに伴い突然仕様が変更になる場合もあります。

その際、旧バージョンと互換性が無くなる場合もあります。

アップデートされる場合は事前にテストサイト等で動作確認を行って下さい。

この点も予めご了承ください

ブラウザのキャッシュ機能により、Word Balloonをバージョンアップして動作しないケースがあります。

お手数ですがブラウザのキャッシュクリアをお試し下さい。

 

Internet Explorer10以前は動作非対応です。

11は初期設定で設定されている色のみが表示されます。

CSSの変数非対応のため、吹き出し画面で設定した吹き出しの色は表示されません。

なるべく新しいブラウザをご利用下さい。

 

Word ballon公式ホームページより引用

 

ちなみに私が使っているアンリミのテンプレートにも吹き出しの機能は標準で装備されてますが、あまりにも使い勝手が悪いのでWord Balloonを使っていますが、今のところ動作の不具合はまったくありません。

 

ということはアンリミのテンプレートで使っても大丈夫ということだな!!
アフィリレッド
アフィリレッド

まとめ

以上が「word balloon」を使った吹き出しの設定から使い方まででした。

 

どうだ!「word balloon」ってスゲープラグインだろう!
アフィリレッド
アフィリレッド

 

実際に僕も吹き出し使い出してからサイトの離脱率と直帰率が20%~30%ぐらいは減ったもんね!

 

やっぱり読まれやすくなったのかなと痛感しました。

筒兄
筒兄
俺様も文字だけの記事って読んでて疲れるし、内容がよくても「もういいや」って他のサイトへ移動するもんな!
アフィリレッド
アフィリレッド

 

 

というわけで、吹き出しを使ってみたいという方は使用は自己責任ですが「word balloon」を使ってみてくださいね。

 

必ず役に立つと思いますよ!

 

ps

 

あなたが今使っているテーマに吹き出し機能が標準装備されていて、機能的に満足しているなら「word balloon」をあえて使う必要はありませんので大丈夫です。
筒兄
筒兄

最後まで読んでいただきありがとうございました。

この記事に関連する記事一覧

コメントは8件です

  1. アバター なかい より:

    こうやって吹き出し作ってたんですね。
    凄い参考になりました。
    ありがとうございます。

  2. アバター こばみち より:

    こんにちは、ランキングから来ました。
    Wordballoonの使い方を知りたかったので、良かったです。
    参考にしたいと思います。

  3. 筒兄 筒兄 より:

    なかい様

    コメントありがとうございます。

    参考になれば幸いです。

  4. アバター isosi より:

    こんにちは
    ランキングから来ました。

    こんなに簡単に吹き出しが作れるんですね!
    参考になりました。
    ありがとうございます。

  5. アバター Yasunari より:

    こんにちは
    ランキングから来ました。
    ワードバルーン面白いツールですね。
    これをつかえば自分らしさを出したサイトを作っていけると思いました。

  6. アバター bescon より:

    こんばんは
    ランキングから来ました
    面白そうですね
    やってみます

  7. アバター ユートピア より:

    こんにちは!
    吹き出しの仕方がわからなかったんです。
    とても参考になりました。
    ありがとうございました。

コメントフォーム

名前

メールアドレス

URL

コメント

CAPTCHA


↓ランキング参加中です!↓
当サイト一押し教材
【WordPress最強テンプレート 賢威】
プロフィール

管理人の筒兄です。
サラリーマンの傍ら、副業でアフィリエイトに取り組んでいます。
日々の実践記や役立つ情報など初心者目線で発信します。

⇒詳しいプロフィールはこちら

カテゴリー
アーカイブ

ページの先頭へ