吹き出し会話が作れるプラグインSpeech Bubbleの使い方

ブログを書いていく上で、
いつもと同じ見た目ではなく、
ちょっと違った表現にしてみたい、
と思ったことはありませんか?

LINEのように会話形式で
吹き出しをつけて
話が展開できるプラグインがあります。

キャラクターでセリフを展開したり、
思ったことを吹き出しで表現したり、

工夫次第で楽しめるプラグイン
「Speech Bubble」の使い方を解説します。

1.「Speech Bubble」とは?

Speech Bubbleは、
アイコンと吹き出しのセリフで
ブログを書くことができるプラグインです。

Speech bubble

2.「Speech Bubble」のインストール

Speech Bubbleを
インストールしていきます。

管理画面にログインし、
画面左側にあるメニュー
「プラグイン」→「新規追加」
を押します。

Speech bubble

右上の枠に
「Speech Bubble」を入力します。

Speech bubble

「Speech Bubble」プラグインの
「今すぐインストール」を押します。

Speech bubble

画面が切り替わるので、
「有効化」ボタンを押します。

Speech bubble

画面がインストール済みの
プラグインの画面に切り替わります。

Speech bubble

インストール完了です。

3.「Speech Bubble」の使い方

プラグインを有効化するだけで
設定は必要ありません。

ショートコードを記述すれば、
表示されます。

ショートコードとは
短いコードで表現することが
できる機能です。

Speech Bubbleの
ショートコードは以下です。
*使用する際は、★マークを外してください。

[★speech_bubble type=”ln” subtype=”L1″ icon=”1.jpg” name=”太郎丸”] 「Speech Bubble」の使い方を解説します。[/speech_bubble] [★speech_bubble type=”ln” subtype=”R1″ icon=”2.jpg” name=”晴美”] 便利そうなプラグインね。[/speech_bubble]

こちらを投稿してみましょう。

ショートコードを
投稿本文に記述していきます。

管理画面の左側メニューで
「投稿」→「新規投稿」を押し、
新規投稿画面にします。

Speech bubble

本文内に、ショートコードを
そのままコピペします。

Speech bubble

サイトを見てみると、
本文中に表示されています。

Speech bubble

4.ショートコードの解説

ショートコードに
何が書かれているのか、
解説していきます。

5.セリフ変更

ショートコードの中の
「●●●●●●」
「○○○○○○」
がセリフ部分です。

ここを好きなセリフに変更してください。
*使用する際は、★マークを外してください。

[★speech_bubble type=”ln” subtype=”L1″ icon=”1.jpg” name=”太郎丸”] ●●●●●●[/speech_bubble] [★speech_bubble type=”ln” subtype=”R1″ icon=”2.jpg” name=”晴美”] ○○○○○○[/speech_bubble]

6.名前の変更

ショートコードの中の
name=”■”
name=”□”
の部分が名前です。

「■」「□」を変更すれば
自由に設定できます。
*使用する際は、★マークを外してください。

[★speech_bubble type=”ln” subtype=”L1″ icon=”1.jpg” name=”■”] 「Speech Bubble」の使い方を解説します。[/speech_bubble] [★speech_bubble type=”ln” subtype=”R1″ icon=”2.jpg” name=”□”] 便利そうなプラグインね。[/speech_bubble]

7.吹き出しの種類の変更方法

吹き出しの種類は
9種類あります。

変更するには、ショートコードの
type=”▲”の部分「▲」を変更します。
*使用する際は、★マークを外してください。

[★speech_bubble type=”▲” subtype=”L1″ icon=”1.jpg” name=”太郎丸”] 「Speech Bubble」の使い方を解説します。[/speech_bubble] [★speech_bubble type=”▲” subtype=”R1″ icon=”2.jpg” name=”晴美”] 便利そうなプラグインね。[/speech_bubble]

9種類のコードは

  1. drop
  2. std
  3. fb
  4. fb-flat
  5. In
  6. In-flat
  7. pink
  8. rtail
  9. think

です。

このどれかを選び、
type=”▲”の▲を変更します。

それぞれの見え方の紹介をします。
*使用する際は、★マークを外してください。

・drop

Speech bubble [★speech_bubble type=”drop” subtype=”L1″ icon=”1.jpg” name=”太郎丸”] dropを選ぶとこんな感じです。[/speech_bubble] [★speech_bubble type=”drop” subtype=”R1″ icon=”2.jpg” name=”晴美”] 水色ね。[/speech_bubble]

・std
*使用する際は、★マークを外してください。

Speech bubble [★speech_bubble type=”std” subtype=”L1″ icon=”1.jpg” name=”太郎丸”] stdにしてみました。[/speech_bubble] [★speech_bubble type=”std” subtype=”R1″ icon=”2.jpg” name=”晴美”]とってもシンプルね。本当にただの吹き出しね。[/speech_bubble]

・fb
*使用する際は、★マークを外してください。

Speech bubble [★speech_bubble type=”fb” subtype=”L1″ icon=”1.jpg” name=”太郎丸”] パソコンでのフェイスブックのやりとりのような。[/speech_bubble] [★speech_bubble type=”fb” subtype=”R1″ icon=”2.jpg” name=”晴美”] あら、ほんと。[/speech_bubble]

・fb-flat
*使用する際は、★マークを外してください。

Speech bubble [★speech_bubble type=”fb-flat” subtype=”L1″ icon=”1.jpg” name=”太郎丸”] フェイスブックのメッセンジャーアプリのイメージですね。[/speech_bubble] [★speech_bubble type=”fb-flat” subtype=”R1″ icon=”2.jpg” name=”晴美”] 白文字になったわ。[/speech_bubble]

・In
*使用する際は、★マークを外してください。

Speech bubble [★speech_bubble type=”ln” subtype=”L1″ icon=”1.jpg” name=”太郎丸”] LINE風になりましたね。[/speech_bubble] [★speech_bubble type=”ln” subtype=”R1″ icon=”2.jpg” name=”晴美”] LINEね。[/speech_bubble]

・ln-flat
*使用する際は、★マークを外してください。

Speech bubble [★speech_bubble type=”ln-flat” subtype=”L1″ icon=”1.jpg” name=”太郎丸”] あ、こちらもLINE風ですね。[/speech_bubble] [★speech_bubble type=”ln-flat” subtype=”R1″ icon=”2.jpg” name=”晴美”] あら本当。[/speech_bubble]

・pink
*使用する際は、★マークを外してください。

Speech bubble [★speech_bubble type=”pink” subtype=”L1″ icon=”1.jpg” name=”太郎丸”] ピンクになりました。[/speech_bubble] [★speech_bubble type=”pink” subtype=”R1″ icon=”2.jpg” name=”晴美”] 女子向きね。[/speech_bubble]

・rtail
*使用する際は、★マークを外してください。

Speech bubble [★speech_bubble type=”rtail” subtype=”L1″ icon=”1.jpg” name=”太郎丸”] 綺麗な水色背景になりました。[/speech_bubble] [★speech_bubble type=”rtail” subtype=”R1″ icon=”2.jpg” name=”晴美”] 華やかな感じね。[/speech_bubble]

・think
*使用する際は、★マークを外してください。

Speech bubble [★speech_bubble type=”think” subtype=”L1″ icon=”1.jpg” name=”太郎丸”] セリフじゃなくて思っていることの吹き出しかぁ。[/speech_bubble] [★speech_bubble type=”think” subtype=”R1″ icon=”2.jpg” name=”晴美”] 吹き出しにもこんなものがあるのね。[/speech_bubble]

7-1.人物の向きと、吹き出しの種類の変更

人物のアイコンを画面の
右側に置くか、左側に置くかを
変更することができます。

変更するには、

subtype=”L1″
subtype=”R1″

の、「L1」「R1」の部分を変更します。
*使用する際は、★マークを外してください。

[★speech_bubble type=”ln” subtype=”L1″ icon=”1.jpg” name=”太郎丸”] 「Speech Bubble」の使い方を解説します。[/speech_bubble] [★speech_bubble type=”ln” subtype=”R1″ icon=”2.jpg” name=”晴美”] 便利そうなプラグインね。[/speech_bubble]

人物を右側に置く場合は、「R」
左側に置く場合は、「L」にします。

また、吹き出しの種類を
変更する時も同じ部分の
「数字」を変更します。

吹き出しを会話風にするなら、
数字は「1」、
吹き出しを考える・思う風にするなら、
数字は「2」です。

《例》
・人物を左に配置、吹き出しは会話風にする場合
*使用する際は、★マークを外してください。

[★speech_bubble type=”ln” subtype=”L1″ icon=”1.jpg” name=”太郎丸”] 「Speech Bubble」の使い方を解説します。[/speech_bubble] [★speech_bubble type=”ln” subtype=”L1″ icon=”2.jpg” name=”晴美”] 便利そうなプラグインね。[/speech_bubble] Speech bubble

・人物を左に配置、吹き出しは考える・思う風にする場合
*使用する際は、★マークを外してください。

[★speech_bubble type=”ln” subtype=”L2″ icon=”1.jpg” name=”太郎丸”] 「Speech Bubble」の使い方を解説します。[/speech_bubble] [★speech_bubble type=”ln” subtype=”L2″ icon=”2.jpg” name=”晴美”] 便利そうなプラグインね。[/speech_bubble] Speech bubble

・人物は右に配置、吹き出しは会話風にする場合
*使用する際は、★マークを外してください。

[★speech_bubble type=”ln” subtype=”R1″ icon=”1.jpg” name=”太郎丸”] 「Speech Bubble」の使い方を解説します。[/speech_bubble] [★speech_bubble type=”ln” subtype=”R1″ icon=”2.jpg” name=”晴美”] 便利そうなプラグインね。[/speech_bubble] Speech bubble

・人物は右に配置、吹き出しは考える・思う風にする場合
*使用する際は、★マークを外してください。

[★speech_bubble type=”ln” subtype=”R2″ icon=”1.jpg” name=”太郎丸”] 「Speech Bubble」の使い方を解説します。[/speech_bubble] [★speech_bubble type=”ln” subtype=”R1″ icon=”2.jpg” name=”晴美”] 便利そうなプラグインね。[/speech_bubble] Speech bubble

8.アイコン画像の変更

Speech bubbleでは、
吹き出しの人物アイコンを
指定の画像に置き換えて
使うことができます。

Speech bubble

8-1.イラストを使う

無料の商用利用可で
使えるサイトから
イラストをダウンロードすると、
すぐにそのまま
使うことができます。

「いらすとや」

セリフに便利な人物のイラストが
豊富に揃います。

8-2.似顔絵を使う

似顔絵をアイコンにする
方法もオススメです。

似顔絵メーカーを使うと
すぐに作ることができます。

似顔絵ジェネレーター

ビオレママ顔メーカー3

アバターゲームズ

似顔絵メーカーCHARAT(キャラット)

アプリもありますので、
こちらにご紹介しておきますね。

・chappie
・FaceQ
・にがおえやさん キュート

8-3.アイコンを好きな画像に設定する方法

アイコンを好きな画像に
変更する方法を説明します。

アイコンサイズは
60×60ピクセルになります。

これ以下の小さいサイズだと
画像が解像度が
落ちてしまうので、
荒くなってしまいます。

このサイズより大きい場合は、
自動的に60×60サイズに
縮小されるので、
多少大きいサイズでも
問題ありません。

また、基本的にアイコンは
正方形の画像を
用意しましょう。

正方形ではないと、
自動的に正方形になって
表示されるので、
画像が潰れてしまいます。

アイコンを設定する方法には、
2通りあります。

  • プラグインの画像フォルダ内に、
    アイコン画像をアップロードする
  • メディアに画像をアップロードする

8-3-1.プラグインのフォルダにアップロードする

使用しているサーバーの
Wordpressのフォルダ内に
画像を入れていきます。

「speech bubble」のフォルダ内の
「img」フォルダです。

変更方法としては、
FTPツールを使うと便利です。

「FTP」とはファイルを転送するときに使うプロトコル=約束事のことです。「通信プロトコル」というのはネットワーク通信をする際の決まり事のことで、通信規約のようなものだと思ってください。

この「FTP」という通信方法を使用することで、ファイルをサーバーとPCの間などでやりとりすることができるようになるのです。

「FTP」を使ってできることは

  • サーバーにアップされたファイルの一覧をみることができる
  • ファイルをサーバーにアップロードしたり、ダウンロードしたりする

主にWEBページを公開するときに使用され、作成したHTMLなどのファイルをサーバーにアップロードしたり、更新する際に「FTP」を利用しています。

引用元:侍エンジニア塾

FTPツールを使うためには、
FTPクライアントソフトを
ダウンロードして使用します。

有料のソフトもありますが、
無料でも充分に
使うことができます。

FTPツールの詳しい使い方はこちら→

注意することは、
プラグインのアップデートが
行われた際に、imgフォルダも
書き換わってしまうので、

アップロードした画像が
消える場合があります。

そうなった場合は、
再度、画像をアップロードすれば
大丈夫です。

ショートコードの記述の方法は、

「 icon=”1.jpg” 」「 icon=”2.jpg” 」
の部分を変更します。
*使用する際は、★マークを外してください。

[★speech_bubble type=”ln” subtype=”L1″ icon=”1.jpg” name=”太郎丸”] 「Speech Bubble」の使い方を解説します。[/speech_bubble] [★speech_bubble type=”ln” subtype=”R1″ icon=”2.jpg” name=”晴美”] 便利そうなプラグインね。[/speech_bubble]

「1.jpg」「2.jpg」を、
アップロードした
画像の名前に変更します。

8-3-2.メディアにアップロードする

wordpressのメディアに
アイコン画像を
アップロードする方法です。

この方法だと、プラグインが
アップデートされた場合でも、
画像が消えることはありません。

ただ、記述方法が変わるので、
注意が必要です。

例)画像の名前「nagagutsu_haita_neko.png」の場合

メディアにアップロードした画像は、

http://あなたのサイトURL/ユーザー名/wp-content/uploads/2017/08/nagagutsu_haita_neko.png

という形式ですが、
このまま記述すると、
アイコン表示がされません。

「相対パス」を使います。

相対パスとは、
基準となるファイルから見て
任意のファイルの場所を指定します。

参考先:WEBページ作りのお勉強

相対パスの形式は以下です。

icon=”../../../uploads/2017/08/nagagutsu_haita_neko.png”

メディアにアップロードした
画像をそのままアイコン画像として
使うことができます。
*使用する際は、★マークを外してください。

Speech bubble [★speech_bubble type=”ln” subtype=”L1″ icon=”../../../uploads/2017/08/nagagutsu_haita_neko.png” name=”太郎丸”] 「Speech Bubble」の使い方を解説します。[/speech_bubble] [★speech_bubble type=”ln” subtype=”R1″ icon=”../../../uploads/2017/08/pet_cat_sit.png” name=”晴美”] 便利そうなプラグインね。[/speech_bubble]

9.吹き出しの文字はテキストになるというメリット

吹き出しの中の文字は、
そのままテキストとして
表示されます。

テキストになるメリットとしては、
SEO的にとてもありがたいです。

検索ワードとして
有効なテキストになりますね。

10.まとめ

人とは違ったブログを書いてみたい、
という人には、
個性が十分発揮される
プラグインになります。

セリフ形式で
キャラクターを目立たせる
工夫をすることで
内容を展開できますし、

他のブログとも違って
面白く見せられますね!

時間とお金も手に入れシンプルに成功する方法

個人でビジネスを始める方、小さい会社でも大きな利益を出したい方、自由な人生を勝ち取りたい方向けに 合計5本のビデオをプレゼントしております。 さらに期間限定ビデオもプレゼントしておりますので、今すぐ下記のボタンをクリックして詳細をご覧ください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


ABOUTこの記事をかいた人

ビジネスZEROでは、0からビジネスを作り会社や国に頼らなくても自身で稼ぎ続ける起業、副業、WEBマーケティングノウハウを徹底的に追求し、個人でも稼ぐことが出来るビジネスモデルの作り方やマネタイズの方法等、具体的なノウハウを1から10まで可能な限り、トコトン提供していきます。