[speech_bubble type=”ln” subtype=”L1″ icon=”31.jpg” name=”もりもり”] ここのレバーは違う！美味いよ！ [/speech_bubble]
[speech_bubble type=”ln” subtype=”R1″ icon=”41.jpg” name=”嫁”] いらない！[/speech_bubble]
上のやり取りの様に、WordPressで吹き出し会話が出来るおすすめプラグインの紹介をします。
プラグインの名前は「Speech Bubble」と言います。
吹き出しプラグインSpeech Bubble
Speech Bubbleはプラグインなのでインストールしたら、ただ有効化すればOKです。
有効化したら、下記のコードを投稿編集画面の「テキストタブ」にコピーして貼り付けして下さい。
[speech_bubble type="drop" subtype="L1" icon="1.jpg" name="Aさん"] あいうえお[/speech_bubble] [speech_bubble type="drop" subtype="R1" icon="2.jpg" name="Bさん"] かきくけこ[/speech_bubble]
プレビューで確認すると、びっくり！
下の様な吹き出し会話が表示されます！
[speech_bubble type=”drop” subtype=”L1″ icon=”1.jpg” name=”Aさん”] あいうえお [/speech_bubble]
[speech_bubble type=”drop” subtype=”R1″ icon=”2.jpg” name=”Bさん”] かきくけこ[/speech_bubble]
名前の変更方法
名前を変更するには、コードのname=”Aさん” “Bさん” を変えれば名前が変わります。
一度やってみます。
[speech_bubble type=”drop” subtype=”L1″ icon=”1.jpg” name=”cさん”] あいうえお [/speech_bubble]
[speech_bubble type=”drop” subtype=”R1″ icon=”2.jpg” name=”dさん”] かきくけこ[/speech_bubble]
変わりました！
（もり助：CとDに替えただけかよ！）
セリフの変更方法
吹き出し内のセリフを変更するには、コードの「あいうえお」「かきくけこ」を変えます。
一度やってみます。
[speech_bubble type=”drop” subtype=”L1″ icon=”1.jpg” name=”cさん”] さしすせそ[/speech_bubble]
[speech_bubble type=”drop” subtype=”R1″ icon=”2.jpg” name=”dさん”] たちつてと[/speech_bubble]
変わりました！
（もり助：またこのパターンかよ！）
吹き出しデザインの変更方法
吹き出しのデザインは９種類も用意されてあり変更が可能です。
変更するには、コードのtype=”drop”を変更します。
ここを下記のコードに変更します。
① drop ② std ③ fb ④ fb-flat ⑤ ln
⑥ ln-flat ⑦ pink ⑧ rtail ⑨ think
①dropは先程から使っているタイプです。
吹き出し②stdに変更(シンプル）
[speech_bubble type="std" subtype="L1" icon="1.jpg" name="Aさん"] あいうえお[/speech_bubble] [speech_bubble type="std" subtype="R1" icon="2.jpg" name="Bさん"] かきくけこ[/speech_bubble]
[speech_bubble type=”std” subtype=”L1″ icon=”1.jpg” name=”Aさん”] あいうえお[/speech_bubble]
[speech_bubble type=”std” subtype=”R1″ icon=”2.jpg” name=”Bさん”] かきくけこ[/speech_bubble]
吹き出し③fbに変更（Facebookパソコンバージョン）
[speech_bubble type="fb" subtype="L1" icon="1.jpg" name="Aさん"] りんご[/speech_bubble] [speech_bubble type="fb" subtype="R1" icon="2.jpg" name="Bさん"] ゴリラ[/speech_bubble]
[speech_bubble type=”fb” subtype=”L1″ icon=”1.jpg” name=”Aさん”] りんご[/speech_bubble]
[speech_bubble type=”fb” subtype=”R1″ icon=”2.jpg” name=”Bさん”] ゴリラ[/speech_bubble]
（もり助：急にしりとりかい）
吹き出し④fb-flatに変更（Facebookスマホバージョン）
[speech_bubble type="fb-flat" subtype="L1" icon="1.jpg" name="Aさん"] ラッパ[/speech_bubble] [speech_bubble type="fb-flat" subtype="R1" icon="2.jpg" name="Bさん"] パチンコ[/speech_bubble]
[speech_bubble type=”fb-flat” subtype=”L1″ icon=”1.jpg” name=”Aさん”] ラッパ[/speech_bubble]
[speech_bubble type=”fb-flat” subtype=”R1″ icon=”2.jpg” name=”Bさん”] パチンコ[/speech_bubble]
吹き出し⑤lnに変更（LINEバージョン①）
[speech_bubble type="ln" subtype="L1" icon="1.jpg" name="Aさん"]ココナッツ [/speech_bubble] [speech_bubble type="ln" subtype="R1" icon="2.jpg" name="Bさん"] 積み木[/speech_bubble]
[speech_bubble type=”ln” subtype=”L1″ icon=”1.jpg” name=”Aさん”]ココナッツ [/speech_bubble]
[speech_bubble type=”ln” subtype=”R1″ icon=”2.jpg” name=”Bさん”] 積み木[/speech_bubble]
吹き出し⑥ln-flat変更（LINEバージョン②）
[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]
[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]
吹き出し⑦pink変更（Pinkでキュート！）
[speech_bubble type="pink" subtype="L1" icon="1.jpg" name="Aさん"] たちうお[/speech_bubble] [speech_bubble type="pink" subtype="R1" icon="2.jpg" name="Bさん"] おにぎり[/speech_bubble]
[speech_bubble type=”pink” subtype=”L1″ icon=”1.jpg” name=”Aさん”] たちうお[/speech_bubble]
[speech_bubble type=”pink” subtype=”R1″ icon=”2.jpg” name=”Bさん”] おにぎり[/speech_bubble]
吹き出し⑧rtailに変更（フラットなボックス）
[speech_bubble type="rtail" subtype="L1" icon="1.jpg" name="Aさん"] りらっくま[/speech_bubble] [speech_bubble type="rtail" subtype="R1" icon="2.jpg" name="Bさん"] まいたけ[/speech_bubble]
[speech_bubble type=”rtail” subtype=”L1″ icon=”1.jpg” name=”Aさん”] りらっくま[/speech_bubble]
[speech_bubble type=”rtail” subtype=”R1″ icon=”2.jpg” name=”Bさん”] まいたけ[/speech_bubble]
吹き出し⑨thinkに変更（考える感じ）
[speech_bubble type="think" subtype="L1" icon="1.jpg" name="Aさん"] 毛が生えた[/speech_bubble] [speech_bubble type="think" subtype="R1" icon="2.jpg" name="Bさん"] たくさん生えた[/speech_bubble]
[speech_bubble type=”think” subtype=”L1″ icon=”1.jpg” name=”Aさん”] 毛が生えた[/speech_bubble]
[speech_bubble type=”think” subtype=”R1″ icon=”2.jpg” name=”Bさん”] たくさん生えた[/speech_bubble]
（もり助：最後のなに！？）
人の場所の変更
[speech_bubble type="drop" subtype="L1" icon="1.jpg" name="Aさん"] あいうえお[/speech_bubble] [speech_bubble type="drop" subtype="R1" icon="2.jpg" name="Bさん"] かきくけこ[/speech_bubble]
コードのsubtype=”L1″の部分を変更すると人の場所を右か左か変更出来ます。
向かって左が「L1」、右が「R1」になります。
両方ともR1に変更してみます。
[speech_bubble type=”drop” subtype=”R1″ icon=”1.jpg” name=”Aさん”] たけのこ[/speech_bubble]
[speech_bubble type=”drop” subtype=”R1″ icon=”2.jpg” name=”Bさん”] コストコ[/speech_bubble]
こういう風に右になります。
ちなみに、「R1」を「R2」に変更すると・・・・。
[speech_bubble type=”drop” subtype=”R2″ icon=”1.jpg” name=”Aさん”] 高校野球[/speech_bubble]
[speech_bubble type=”drop” subtype=”R2″ icon=”2.jpg” name=”Bさん”] うどん[/speech_bubble]
（もり助：しりとり終わりね）
「2」にすると吹き出しが「考えるバージョン」に変わります。
人の場所を変更すると、もちろん吹き出しも向きが変わります。
アイコン画像の変更方法
アイコンを変更したい場合は、FileZilla等のFTPソフトを使用してサーバにアップロードします。
手順の説明します。
①FTPソフトで自身が使っているサーバーのWordPressフォルダにアクセス。
②speech-bubbleプラグインのフォルダ内の「img」フォルダにアイコンにしたい画像をアップロードして下さい、ファイル名は半角英数字で入力します。
フォルダ位置参照↓
/wp-content/plugins/speech-bubble/img/
③アップロードしたら、WordPress投稿画面で画像のファイル名を指定します。
画像指定は、コードの「icon=”1.jpg”」を変更します。
[speech_bubble type="drop" subtype="L1" icon="1.jpg" name="Aさん"] あいうえお[/speech_bubble] [speech_bubble type="drop" subtype="R1" icon="2.jpg" name="Bさん"] かきくけこ[/speech_bubble]
例：アップロードしたファイル名が「4.jpg」の場合は「icon=”1.jpg”」を「icon=”4.jpg”」と変更して指定します。
試しに我が家の家族でやってみます、せっかくなので今まで説明したのを応用します。
[speech_bubble type=”drop” subtype=”L1″ icon=”31.jpg” name=”もりもり”] 次の旅行は熱海がいいです。[/speech_bubble]
[speech_bubble type=”pink” subtype=”R1″ icon=”41.jpg” name=” 嫁”] ダメです、ディズニーに決定！[/speech_bubble]
[speech_bubble type=”rtail” subtype=”L1″ icon=”51.jpg” name=”娘”] ディズニー♪ディズニー♪[/speech_bubble]
[speech_bubble type=”think” subtype=”R2″ icon=”61.jpg” name=”息子”] あー！（アンパンマンミュージアム）[/speech_bubble]
これが吹き出しプラグインSpeech Bubbleで出来ることです！
WordPressを使用している方はぜひ使ってみて下さい！
本日の余談
説明文は苦手です！
わかりにくかったらごめんなさい！
コメント