WordPressプラグイン「speech bubble」の使い方

記事内に広告を含む場合があります

speechbubble

ブログを執筆する時に、会話形式でブログを書きたいと思ったことありませんか?わたしはずっと思っていたのですが、なんとそれが簡単にできるプラグインを発見しました!

「Speech Bubble」は、とても便利なプラグインなので、紹介します。

2019年1月31日追記
「Speech Bubble」は長期間更新されていなかったため、WordPressの公式ディレクトリには表示されなくなったようです。

超便利なプラグイン「Speech Bubble」

会話をうまく記事にしたいって、具体的にはこんな感じです。

悩んでいる人Aさん

わたし、WordPressで会話形式でブログを書きたいんだけど、なにかいい方法ってありませんか?教えてください!

藤本陽介

良い質問ですね!それなら「speech bubble」っていうプラグインを使うと、簡単にできますよ!

悩んでいる人Aさん

えっ?WordPressにはそんな便利なプラグインがあるんですか?

藤本陽介

じゃ、実際にやってみましょう!そんなに難しくありませんよ!

と、こんな感じで、会話形式で記事が作れちゃいます。

「speech bubble」のインストールの手順

以下の手順どおりにやれば、簡単にインストールできます。

時間はWordPressに慣れている人であれば3分で完了できる作業内容です。

speechbubble01

まず管理画面左メニューの「プラグイン」にある「新規追加」をクリックします。

次に画面左上にある検索窓に「Speech Bubble」と入力します。

2019年1月31日追記
「Speech Bubble」は長期間更新されていなかったため、WordPressの公式ディレクトリには表示されなくなったようです。

どうしても使いたい人は自己責任で、ダウンロードして解凍してFTPソフトで『wp-content/plugins/』直下にアップロードしてください。

「Speech Bubble」は更新されていないので、本当に自己責任で使ってください。

[voice icon=”https://fujimotoyousuke.com/wp-content/uploads/2018/04/6a45cb814c86f27c30a9cb5994c3fdb6.jpg” name=”” type=”l”]会話吹き出し機能を使いたいなら、STORKというテーマであれば、標準実装されていますよ。

「Speech Bubble」を使うなら、STORKを使った方が良いと思います。[/voice]

そうすると、上記の画面のように「Speech Bubble」が表示されるので、「今すぐインストール」をクリックします。

これで、WordPressのサイトに会話形式のプラグイン「Speech Bubble」がインストールされました。

speechbubble02

次に、この会話形式のプラグイン「Speech Bubble」を使えるように設定します。

といっても簡単。

このプラグインを有効化するだけ。

管理画面の左メニューにある「プラグイン」をクリックすると、いまインストールされているプラグインの一覧が表示されます。

Speech Bubble(ふきだしプラグイン)を探し、このプラグインを「有効化」をクリックすれば、もう設定は完了です。

「speech bubble」の使い方

実際に、speech bubbleを使って、記事をつくってみましょう。といっても、そんな難しいことはありません。

いつもどおり管理画面の左メニューにある「投稿」をクリックして、記事を編集するだけです。

speechbubble03

記事の編集画面を「テキスト」にして、以下をコピーしてみてください。

ダイくん
オレはハナちゃんが大好きだ!
ハナちゃん
わたしもダイくんが大好きだよ!

そうすると、以下のように表示されます。

ダイくん

オレはハナちゃんが大好きだ!

ハナちゃん

わたしもダイくんが大好きだよ!

こんなに簡単です。どうですか?このプラグインを使ってみたいと思いますよね!ぜひ試してみてください。

ただ、セリフやアイコンの変更方法が分からないと思うので、使いこなしたい人のために、セリフやアイコンなどの変更方法も紹介します。

セリフの変更方法

セリフは speech_bubble のショートコードで囲まれている部分に入力するだけです。いちおう分かりやすいように、コードを貼っておきます。

○○○○○○○○の部分と××××××××の部分を変更するだけです。

ダイくん
○○○○○○○○
ハナちゃん
××××××××

表示確認

ダイくん

○○○○○○○○

ハナちゃん

××××××××

名前の変更方法

名前の変更は nameの指定部分を書き換えるだけです。これも分かりやすいようにコードを貼っておきますね。

○○の部分と××の部分を書き換えてください。

○○
オレはハナちゃんが大好きだ!
××
わたしもダイくんが大好きだよ!

表示確認

○○

オレはハナちゃんが大好きだ!

××

わたしもダイくんが大好きだよ!

アイコンの変更方法

アイコンの変更は、設定したい画像を自分のサイトのサーバーにアップロードします。

画像サイズは特に指定ありませんが、あまり大きすぎると読み込みに時間を要しますので、100×100前後が良いでしょう。

アップロードの場所は、「wp-content/plugins/speech-bubble/img」の中に画像をあげます。

FTP

仮に、わたしは「boy1.jpg」や「girl1.jpg」をアップロードしました。

iconの指定部分を書き換えます。「boy1.jpg」の部分と「girl1.jpg」の部分を書き換えてください。

これも分かりやすいようにコードを貼っておきますね。

○○
オレはハナちゃんが大好きだ!
××
わたしもダイくんが大好きだよ!

表示確認

ダイくん

オレはハナちゃんが大好きだ!

ハナちゃん

わたしもダイくんが大好きだよ!

アイコンの位置の変更方法

アイコンの位置の変更は subtypeの指定部分を書き換えるだけです。

「subtype」の部分を書き換えてください。左に表示させたい場合は、「L1」と書き換えてください。右に表示させたい場合は、「R1」と書き換えてください。

参考例

部長

タツオくん、今夜は仕事が終わるまで帰るな!つまり残業だ!

新入社員タツオ

えっ?今夜は彼女と大事な予定があるんですが。。。

タツオの彼女

デートに遅刻したら、もう二度と会わないからね!

部長

仕事ができないくせに、彼女とデートなんて100万年早いわ!

新入社員タツオ

あうー、そんなー。。。

レポーター

この部長は、ただのパワハラおやじですね。

気づきましたか?彼女のセリフが、会話ではなく、妄想的な吹き出しになっています。これは「L1」ではなく、「L2」と書き換えると、会話ではなく妄想的な吹き出しになります。

すごいですよね!このプラグイン、本当に使えそうです!

参考例も、一応コードを貼っておきますね。参考にしてみてください。

部長
タツオくん、今夜は仕事が終わるまで帰るな!つまり残業だ!
新入社員タツオ
えっ?今夜は彼女と大事な予定があるんですが。。。
タツオの彼女
デートに遅刻したら、もう二度と会わないからね!
部長
仕事ができないくせに、彼女とデートなんて100万年早いわ!
新入社員タツオ
あうー、そんなー。。。
レポーター
この部長は、ただのパワハラおやじですね。

吹き出しのカスタマイズ方法

speech bubbleは吹き出しが9種類もあります。

その9種類とは、drop・std・ fb・ fb-flat・ln・ ln-flat・ pink・ rtail・ thinkです。

これまで紹介してきたものはすべて「drop」ですが、変更は typeの指定部分を書き換えるだけです。

変更すると、どんな感じになるか紹介しますね。

type=”drop”

店員さん

ウチの料理は世界一だよ!

わたし

うーっんまぁーい!

店員さん

この人、本当に分かっているのかな? 

わたし

いやー、腹へってたから、なんでもうまい。

店員さん
ウチの料理は世界一だよ!
わたし
うーっんまぁーい!
店員さん
この人、本当に分かっているのかな? 
わたし
いやー、腹へってたから、なんでもうまい。

type=”std”

わたし

これはすごくシンプルな吹き出しですね。

女性たち

ソウデスネ。

わたし

妄想的なのはこうなるのか。

女性たち

ニホンゴ、ムズカシイネ。

わたし
これはすごくシンプルな吹き出しですね。
女性たち
ソウデスネ。
わたし
妄想的なのはこうなるのか。
女性たち
ニホンゴ、ムズカシイネ。

type=”fb”

わたし

これはフェイスブックのメッセージみたいですね。

友人

そうですね!フェイスブックのメッセージそっくりですね!

わたし

アイコンも丸くなっている!

友人

この吹き出しも使いやすそう。

わたし
これはフェイスブックのメッセージみたいですね。
友人
そうですね!フェイスブックのメッセージそっくりですね!
わたし
アイコンも丸くなっている!
友人
この吹き出しも使いやすそう。

type=”fb-flat”

わたし

これもフェイスブックのメッセージみたいですね。

友人

そうですね!スマホのメッセンジャーっぽいですね!

わたし

妄想的な方はフェイスブックのメッセージと違うな。

友人

これはこれで使えそうですね。

わたし
これもフェイスブックのメッセージみたいですね。
友人
そうですね!スマホのメッセンジャーっぽいですね!
わたし
妄想的な方はフェイスブックのメッセージと違うな。
友人
これはこれで使えそうですね。

type=”ln”

わたし

これはLINEのメッセージみたいですね。

友人

そうですね!LINEっぽいですね!

わたし

妄想的な方は、これはこれで良いなぁ。 

友人

これも使えそうだなぁ。

わたし
これはLINEのメッセージみたいですね。
友人
そうですね!LINEっぽいですね!
わたし
妄想的な方は、これはこれで良いなぁ。 
友人
これも使えそうだなぁ。

type=”ln-flat”

わたし

これはシンプルですね。

友人

これもLINEっぽいですね!

わたし

妄想的な方は、LINEっぽくはないなぁ。 

友人

これは、あまり使わなそう。

わたし
これはシンプルですね。
友人
これもLINEっぽいですね!
わたし
妄想的な方は、LINEっぽくはないなぁ。 
友人
これは、あまり使わなそう。

type=”pink”

レポーター

最近の仕事は順調ですか?

わたし

世界を変えるために、寝ずに働いています。

レポーター

なにこの人、気持ち悪い。

わたし

うふふ。

レポーター
最近の仕事は順調ですか?
わたし
世界を変えるために、寝ずに働いています。
レポーター
なにこの人、気持ち悪い。
わたし
うふふ。

type=”rtail”

生徒

このプラグインは使いやすそうですね! 

わたし

そうですね!めちゃめちゃオススメですね!

生徒

この吹き出しはシンプルだしいいなぁー。

わたし

この吹き出しは、使いやすそうだなー。

生徒
このプラグインは使いやすそうですね! 
わたし
そうですね!めちゃめちゃオススメですね!
生徒
この吹き出しはシンプルだしいいなぁー。
わたし
この吹き出しは、使いやすそうだなー。

type=”think”

わたし

よーし、これからこのプラグイン使ってブログ書くぞ!

女性

がんばってください!

わたし

おっ!L2だとオレンジになるのか! 

女性

へぇー、色が変わるんだぁ。

わたし
よーし、これからこのプラグイン使ってブログ書くぞ!
女性
がんばってください!
わたし
おっ!L2だとオレンジになるのか! 
no name
へぇー、色が変わるんだぁ。

このように種類があると、ブログを書くのが楽しくなってきますね。

SEOにも有利な会話形式ブログ

このプラグインがオススメな理由は分かっていただけましたか?

実は、わたしがここまで紹介するのには理由があります。

このプラグインを使った記事は文字(テキスト)なので、SEOにも非常に有利ということです。

SEOってなんのことだか分からない人に簡単に説明すると、Search Engine Optimizationの略で、「検索エンジン最適化」という意味です。

つまり、Googleなどの検索で、特定のキーワードで検索した際に上位に表示されることで、要はあなたが書いた記事が、Googleによって評価され、多くの人に見てもらえるチャンスが増える。というようなものです。

SEOのために紹介しているわけではないのですが、このプラグインを使うことによって、ブログが書けない人が、会話形式ならブログが書けそう!となってくれたら嬉しいです。

2019年1月31日追記
「Speech Bubble」は長期間更新されていなかったため、WordPressの公式ディレクトリには表示されなくなったようです。

会話吹き出し機能を使いたいなら、STORKというテーマであれば、標準実装されていますよ。

使いやすいので参考までに。

[kanren2 postid=”2311″]

コメントを残す

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