Word Pressプラグイン|Speech Bubbleの設定とコードの使い方

Pocket

吹き出しを活用した会話形式のコンテンツ(記事)を作成したい方におすすめのWord Pressプラグインが「Speech Bubble」です。吹き出しフレームが豊富に用意され、キャラクターも任意に設定可能な「Speech Bubble」の設定とコードの使い方を解説していきます。

スポンサーリンク

 

1. Speech Bubbleをインストールしよう

まず初めに、Word Press画面左にあるメニューの一覧から「プラグイン」を選び、その中の「新規追加」を選択してください。

プラグインの追加画面右上にプラグインの検索ウィンドウがあるので、「Speech Bubble」と入力しましょう。

すると、以下のように検索結果画面に「Speech Bubble」が表示されますので、インストールボタン(画面では「有効」ボタンですがここにインストールボタンが出ます)を押します。

インストールが完了するとインストールボタンが「有効にする」ボタンに変わりますので、有効化してください。

上記のように有効ボタンが灰色になったら「有効化された」ということですので、「Speech Bubble」のインストールはこれで完了です。

「Speech Bubble」のインストール後に行う項目設定などの詳細設定は特にありませんので、実際のコンテンツ(記事)作成での設定方法とコードの使い方を解説していきます。

 

2. 基本コードを挿入しよう

まずは以下の基本コードをビジュアルモード/テキストモードのどちらでも構いませんのでコピペしてみましょう。

お使いのWord Pressの環境によってはビジュアルモードの場合はコードがそのまま表示されるケースを確認していますので、反映されない場合は「テキストモード」にコピペしてみてください。

 

[speech_bubble type=“ln-flat” subtype=“L1” icon=“1.jpg” name=“A さん”]こんにちは![/speech_bubble]

[speech_bubble type=“ln-flat” subtype=“R1” icon=“2.jpg” name=“B さん”]こんばんは♪[/speech_bubble]

 

 

コピペすると、このように吹き出しが表示されます。

A さん
こんにちは!
B さん
こんばんは♪

この基本コードを使って「Speech Bubble」の設定をしていきます。

 

3. 吹き出しキャラクターの名前を変更してみよう

吹き出しキャラクターの名前を変更するには基本コードの以下の「●●●●」の部分に任意の名前を入力することで変更できます。

[speech_bubble type=“ln-flat” subtype=“L1” icon=“1.jpg” name=“●●●●”]こんにちは![/speech_bubble]

[speech_bubble type=“ln-flat” subtype=“R1” icon=“2.jpg” name=“●●●●”]こんばんは♪[/speech_bubble]

 

左側のキャラクターを「スピーチくん」、右側のキャラクターを「バブルちゃん」に変更してみます。

スピーチくん
こんにちは!
バブルちゃん
こんばんは♪

 

4. セリフを変更してみよう

セリフを変更するには基本コードの以下の「●●●●」の部分に任意のセリフを入力すればOKです。

[speech_bubble type=“ln-flat” subtype=“L1” icon=“1.jpg” name=“A さん”]●●●●[/speech_bubble]

[speech_bubble type=“ln-flat” subtype=“R1” icon=“2.jpg” name=“B さん”]●●●●[/speech_bubble]

 

このセリフの部分は「テキスト扱い」なので、SEOを考慮したセリフにしましょう。

スピーチくん
Speech Bubbleって便利なプラグインだよね!
バブルちゃん
吹き出し会話が簡単にできて嬉しいな♪

スポンサーリンク

 

5. 吹き出しフレームを変更してみよう

Speech Bubbleでは9種類の吹き出しフレームが用意されています。

①drop ②std ③fb ④fb-flat ⑤ln ⑥ln-flat ⑦pink ⑧rtail ⑨think

 

吹き出しフレームを変更するには基本コードの以下の「●●●●」の部分に9種類のいずれかのコードを入力することで変更できます。

[speech_bubble type=“●●●●” subtype=“L1” icon=“1.jpg” name=“A さん”]こんにちは![/speech_bubble]

[speech_bubble type=“●●●●” subtype=“R1” icon=“2.jpg” name=“B さん”]こんばんは♪[/speech_bubble]

 

吹き出しフレームの種類によってイメージが変わるため、自分に合った吹き出しフレームを選んでみてください。

5-1. drop

スピーチくん
①のdropはこんな感じ。
バブルちゃん
吹き出し枠が丸くて優しい感じ♪

5-2. std

スピーチくん
②のstdはこんな感じ。
バブルちゃん
一番シンプル♪

5-3. fb

スピーチくん
③のfbはこんな感じ。
バブルちゃん
少し立体的な感じ♪

5-4. fb-flat

スピーチくん
④のfb-flatはこんな感じ。
バブルちゃん
stdに色がついたバージョンだね♪

5-5. In

スピーチくん
⑤のlnはこんな感じ。
バブルちゃん
一番立体感があるね♪

5-6. In-flat

スピーチくん
⑥のln-flatはこんな感じ。
バブルちゃん
バランス良いかな♪

5-7. pink

スピーチくん
⑦のpinkはこんな感じ。
バブルちゃん
可愛らしい♪

5-8. rtail

スピーチくん
⑧のrtailはこんな感じ。
バブルちゃん
吹き出し枠が少し大きめ♪

5-9. think

スピーチくん
⑨のthinkはこんな感じ。
バブルちゃん
心の中を表現するには良いかも♪

 

6. 吹き出しフレームの位置と表現方法を変更してみよう

吹き出しフレームの色を変更するには基本コードの以下の「●」の部分に「L」か「R」を指定することで変更できます。

「L=左側」、「R=右側」の位置になります。

[speech_bubble type=“ln-flat” subtype=“●1” icon=“1.jpg” name=“A さん”]こんにちは![/speech_bubble]

[speech_bubble type=“ln-flat” subtype=“●1” icon=“2.jpg” name=“B さん”]こんばんは♪[/speech_bubble]

 

また、以下の「●」の部分に「1」か「2」を入れることで表現方法を変更することができます。

「1=会話風」、「2=考える風」の表現方法になります。

[speech_bubble type=“ln-flat” subtype=“L●” icon=“1.jpg” name=“A さん”]こんにちは![/speech_bubble]

[speech_bubble type=“ln-flat” subtype=“L●” icon=“2.jpg” name=“B さん”]こんばんは♪[/speech_bubble]

 

6-1. 例1)左側に寄せて会話風

スピーチくん
バブルちゃん、どうしたの?
バブルちゃん
近くで話したくて♪

6-2. 例2)右側に寄せて考える風

スピーチくん
近いと少し緊張するなぁ。
バブルちゃん
スピーチくん、無言になっちゃった、、、。
You-Channelからの補足
吹き出しフレームの「think」を使用している場合、吹き出しフレームの位置は変更できますが、表現方法は変更できないようです。

 

7. 吹き出しキャラクターを変更してみよう

吹き出しキャラクターを変更するには、まず使用したいキャラクターイラストなどの「任意のデータ」を「Speech Bubble」フォルダ内の「img」フォルダ内にアップロードする必要があります。

「Speech Bubble」フォルダは「wp-content」フォルダ内の「plugins」フォルダ内にありますが、FTPの操作方法は契約しているサーバー会社により異なりますので、確認してみてください。

You-Channelからの補足
ロリポップサーバーを契約している場合には、管理画面にログインし、左側メニューより「FTPサーバー」から変更可能です。

アップロードが完了したら、基本コードの以下の「●」の部分に指定のファイル名を入力することで変更が可能になります。

[speech_bubble type=“ln-flat” subtype=“L1” icon=“●●●” name=“A さん”]こんにちは![/speech_bubble]

[speech_bubble type=“ln-flat” subtype=“R1” icon=“●●●” name=“B さん”]こんばんは♪[/speech_bubble]

 

吹き出しキャラクターはオリジナル性やブログイメージを創出してくれるため、任意のキャラクターに変更することをおすすめします。

スピーチくん
うぉっ!!バブルちゃん可愛い、、、。
バブルちゃん
スピーチくん、思ったより爽やかな感じ♪

 

キャラクターイラストをご自身で用意することが難しい場合、無料の素材を提供している「AC」というサイトが写真からイラストまで数多くの無料素材を扱っていますので、ぜひ活用してみてください。

以下にリンクを貼っておきます。

写真素材ダウンロードサイト【写真AC】

You-Channelで使用しているこのイラストもACさん(作者:南見まめこさん)にお世話になっています。

 

8. まとめ

Speech Bubbleの設定とコードの使い方を解説してきましたが、いかがでしたでしょうか。

スピーチくん
思ったよりも簡単に設定できたかな。
バブルちゃん
うん、これだけで設定できるならすごく簡単だよね♪
スピーチくん
ただし、Speech Bubbleを使う上で気をつけなければいけないことが1つあるみたいだよ。
バブルちゃん
えっ。何か問題でもあるの?
スピーチくん
うん。プラグインのバージョンをアップすると環境によっては任意で設定した吹き出しキャラクターが表示されない場合があるらしい。
バブルちゃん
そうなんだぁ、、、。
スピーチくん
だから、Speech Bubbleをインストールした後に使用していて問題がなければバージョンアップはしない方が良いかもしれないね。
バブルちゃん
うん、わかった!そうしてみるね。

Speech Bubbleをバージョンアップすると「img」フォルダ内のデータが初期化されてしまう場合があるため、問題なく使用できていればバージョンアップは控えておきましょう。

スピーチくん
もしこの記事を気入ってくれたなら、”いいね”してくれよな!
バブルちゃん
ツイッターフォローもよろしくお願いします。

 

この情報が少しでもお役に立てたなら嬉しい限りです。 
 
See you next time! By You-Channel.
 
 
スポンサーリンク

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitter でYou-Channelをフォローしよう!

Pocket