weluka

最近のBlog界でプチ旋風を巻き起こしている「ふきだし」の生成。

筆者とは別のキャラクターが登場して指南するパターンや、チャットでのやり取りを再現する際など使い勝手は多岐多様。

アイディア１つで、あなたのBlogを盛り上げてくれること、間違いなしです。

もちろんhtmlで書いて、CSSで装飾して行くやり方でも構わないのですが、だいぶクタビレます...

そこで今回ご紹介する『Speech Bubble』の出番というわけです。

例えば指南役の先生キャラを設け、自分の建前ではない本音を代弁させたりできますので

簡単なことを、なかなかストレートに「ググれ！」とは書きづらい。そんな思いをすることがなくなります。

身近な事象を会話形式で書き起こす（再現する）ことができます。

キャラクター数人設けて会話させることで親近感が深まり、事象をより分かりやすく伝えることがでます。

書いているBlogがディスカッション形式なら、今回の話題の軸はどこなのか？をハッキリさせることで

問題提起へとスムーズに誘導し、盛り上げることができます。

チャットやメッセンジャー形式なので読みやすい。

日常の一コマを切り取ったり、キャラにない自分を演出できます。

真面目な記事の中にも、ウイットに富んだスクラッチを入れることで

話題を急展開させることが出来ます。

WordPressの管理画面にある「プラグイン」からダウンロードします。

①WordPressの管理画面から「プラグイン」を選択

②「新規追加」を選んだら、画面右上の「プラグインの検索」でSpeech Bubbleを検索

③「今すぐインストール」を押すとインストールが始まります。

④インストールが終わると「有効化」のボタンが現れますので、そこをクリック。

※プラグインには相性があります。Speech Bubbleを有効化する事で他のプラグインが上手く動かなくなってしまう(他と競合してしまう)場合もございますが、そんな時は慌てず削除していただく事で解決する場合がほとんどですので、ご安心ください。

WordPressの管理画面にある「プラグイン」の設定画面から入ります。

⑤プラグインを有効化すると上の様な画面が現れます。ここで「設定」を選んで、次の基本設定編へと進みます。

※ここで「停止」を押しますと「削除」が出てきますので、Speech Bubbleが他のプラグインと競合している場合や、必要なくなった場合はここで簡単に削除をすることができます。

では実際に「当Blogに設置されている新米K太郎とキャリアウーマンS美のLINE風な会話」を見本に、それと同じ設定をする方法をご紹介します！

※ただし2017年11月20日現在のデザインとします。

POINT

吹き出しの中の文言を改行したりするのも普通にHTMLで文章を書くのと同じ！

Speech bubbleの使い方は、いたって簡単。テキストにショートコードを貼り付けるだけ！

では早速、お手本のショートコードを見てみましょう。

<p>[speech_bubble type="ln" subtype="L1" icon="1.jpg" name="K太郎"]元カノのことが忘れられなくて仕事に集中できません！ [/speech_bubble]</p>
<p>[speech_bubble type="ln" subtype="R1" icon="2.jpg" name="S美"]じゃぁ質問です [/speech_bubble]</p>
<p>[speech_bubble type="ln" subtype="R1" icon="2.jpg" name="S美"] K太郎は味のしなくなったガムを<br>いつまでもいつまでも噛み続けますか？<br><br> 新しいガム　食べたくない？ [/speech_bubble]</p>

※赤い部分は言わずもがな、お分かりになると思いますので、次の上級編では、その他の色の部分を解説します。

お手本のふきだしはライン風（ln）に設定しましたが、実はSpeech Bubbleには９種類のふきだしが用意されていて、緑色の部分を次の（drop、std、fb、fb-flat、ln、ln-flat、pink、rtail、think）のいずれかに変更するだけで、簡単に設定を変更できます。

それでは一体、どのように変わるのか見てみましょう。

お手本のふきだしはL1(K太郎)とR1(S美)に設定しましたが、実はSpeech Bubbleには１２種類のふきだしの形が用意されていて、黄色の部分を次の（a、L1、left1・b、R1、right1・c、L2、left2・d、R2、right2）のいずれかに変更するだけで、簡単に設定を変更できます。

それでは一体、どのように変わるのか見てみましょう。

お手本のアイコンはデフォルトの物を使っていますが、お好みの写真に変更することもできます。

まずは変更したいjpg画像を用意します。