WordPressで吹き出しを出す方法!吹き出しプラグインSpeech Bubble使い方!

WordPress

もりもり
ここのレバーは違う!美味いよ!

いらない!

上のやり取りの様に、WordPressで吹き出し会話が出来るおすすめプラグインの紹介をします。

プラグインの名前は「Speech Bubble」と言います。

吹き出しプラグインSpeech Bubble

Speech Bubbleはプラグインなのでインストールしたら、ただ有効化すればOKです。

WordPressでLINEの様な吹き出しが使える!プラグインSpeech Bubbleの説明

有効化したら、下記のコードを投稿編集画面の「テキストタブ」にコピーして貼り付けして下さい。

Aさん
あいうえお
Bさん
かきくけこ

プレビューで確認すると、びっくり!
下の様な吹き出し会話が表示されます!

Aさん
あいうえお

Bさん
かきくけこ

名前の変更方法

名前を変更するには、コードのname=”Aさん” “Bさん” を変えれば名前が変わります。
一度やってみます。

cさん
あいうえお

dさん
かきくけこ

変わりました!
(もり助:CとDに替えただけかよ!)

セリフの変更方法

吹き出し内のセリフを変更するには、コードの「あいうえお」「かきくけこ」を変えます。
一度やってみます。

cさん
さしすせそ

dさん
たちつてと

変わりました!
(もり助:またこのパターンかよ!)

吹き出しデザインの変更方法

吹き出しのデザインは9種類も用意されてあり変更が可能です。

変更するには、コードのtype=”drop”を変更します。

ここを下記のコードに変更します。

① drop ② std ③ fb ④ fb-flat ⑤ ln

⑥ ln-flat ⑦ pink ⑧ rtail ⑨ think

①dropは先程から使っているタイプです。

吹き出し②stdに変更(シンプル)

Aさん
あいうえお
Bさん
かきくけこ

 

Aさん
あいうえお

Bさん
かきくけこ

吹き出し③fbに変更(Facebookパソコンバージョン)

Aさん
りんご
Bさん
ゴリラ
Aさん
りんご
Bさん
ゴリラ

(もり助:急にしりとりかい)

吹き出し④fb-flatに変更(Facebookスマホバージョン)

Aさん
ラッパ
Bさん
パチンコ
Aさん
ラッパ
Bさん
パチンコ

吹き出し⑤lnに変更(LINEバージョン①)

Aさん
ココナッツ
Bさん
積み木

Aさん
ココナッツ

Bさん
積み木

吹き出し⑥ln-flat変更(LINEバージョン②)

Aさん
キクラゲ
Bさん
ゲームセンター
Aさん
キクラゲ
Bさん
ゲームセンター

吹き出し⑦pink変更(Pinkでキュート!)

Aさん
たちうお
Bさん
おにぎり

Aさん
たちうお

Bさん
おにぎり

吹き出し⑧rtailに変更(フラットなボックス)

Aさん
りらっくま
Bさん
まいたけ

Aさん
りらっくま

Bさん
まいたけ

吹き出し⑨thinkに変更(考える感じ)

Aさん
毛が生えた
Bさん
たくさん生えた

Aさん
毛が生えた

Bさん
たくさん生えた

(もり助:最後のなに!?)

人の場所の変更

Aさん
あいうえお
Bさん
かきくけこ

コードのsubtype=”L1″の部分を変更すると人の場所を右か左か変更出来ます。

向かって左が「L1」、右が「R1」になります。

両方ともR1に変更してみます。

Aさん
たけのこ

Bさん
コストコ

こういう風に右になります。

ちなみに、「R1」を「R2」に変更すると・・・・。

Aさん
高校野球

Bさん
うどん

(もり助:しりとり終わりね)

「2」にすると吹き出しが「考えるバージョン」に変わります。

人の場所を変更すると、もちろん吹き出しも向きが変わります。

アイコン画像の変更方法

アイコンを変更したい場合は、FileZilla等のFTPソフトを使用してサーバにアップロードします。

手順の説明します。

①FTPソフトで自身が使っているサーバーのWordPressフォルダにアクセス。

②speech-bubbleプラグインのフォルダ内の「img」フォルダにアイコンにしたい画像をアップロードして下さい、ファイル名は半角英数字で入力します。

フォルダ位置参照↓

/wp-content/plugins/speech-bubble/img/

③アップロードしたら、WordPress投稿画面で画像のファイル名を指定します。

 画像指定は、コードの「icon=”1.jpg”」を変更します。

Aさん
あいうえお
Bさん
かきくけこ

例:アップロードしたファイル名が「4.jpg」の場合は「icon=”1.jpg”」を「icon=”4.jpg”」と変更して指定します。

試しに我が家の家族でやってみます、せっかくなので今まで説明したのを応用します。

もりもり
次の旅行は熱海がいいです。
ダメです、ディズニーに決定!
ディズニー♪ディズニー♪
息子
あー!(アンパンマンミュージアム)

これが吹き出しプラグインSpeech Bubbleで出来ることです!

WordPressを使用している方はぜひ使ってみて下さい!

本日の余談

説明文は苦手です!
わかりにくかったらごめんなさい!

コメント

タイトルとURLをコピーしました