やっと見つけた！
LINEやFacebookみたいな会話をブログで使う事ができる、めちゃくちゃ便利な吹き出しプラグインを見つけました。
[speech_bubble type=”fb-flat” subtype=”L1″ icon=”saeki2.png” name=”毎年平社員の佐伯さん”]こんにちは。WordPressではこんな便利なプラグインがあるんですね。[/speech_bubble] [speech_bubble type=”fb-flat” subtype=”R1″ icon=”nagano2.png” name=”OLの長野さん”]佐伯さん、”毎年平社員”っていう肩書がつけられてますよ。チョー似合う。 [/speech_bubble]今回は、こんなふうに漫画風や会話風にブログを進行することができるようになるワードプレスのプラグイン『Speech Bubble』というプラグインのインストール方法＆使い方をご紹介します。
Speech Bubbleのインストールの手順
「Speech Bubble」はプラグインなので、基本的にインストール方法は他のプラグインと同じです。
念のために図解します。
手順１）ダッシュボードの「プラグイン」
手順２）「新規追加」から右の検索窓に「Speech Bubble」と入力してENTER
手順３）Speech Bubbleが出てきますので、「今すぐインストール」をクリック
手順４）「プラグインを有効化」をクリック
以上でプラグインのインストールと有効化が終わりました。
吹き出しプラグイン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]]
これを貼り付けてもらうと↓こんな風になる。
[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]]
Aさんのセリフは↑のコードの●●●●●の部分を変えればOK。同じくBさんのセリフは↑のコードの×××××の部分を変えればOK。
キャラの名前の変更方法
[[speech_bubble type="drop" subtype="L1" icon="1.jpg" name="■さん"] おっす！ [/speech_bubble]] [[speech_bubble type="drop" subtype="R1" icon="2.jpg" name="◎さん"] なんだちみは！？[/speech_bubble]]
キャラの名前が今は「Aさん」「Bさん」になってるけど、これも↑のコードの【name=”■さん”】のところ、「■さん」「◎さん」を変更すれば自由に設定できる。
吹き出しの種類の変更方法
実は吹き出しの種類も9種類用意されている。いいねいいね！！
9種類は↓のコードの【type=”drop”】の部分を変更すればOK。デフォルトはdropになっている。
[[speech_bubble type="drop" subtype="L1" icon="1.jpg" name="■ さん"] おっす！ [/speech_bubble]] [[speech_bubble type="drop" subtype="R1" icon="2.jpg" name="◎ さん"] なんだちみは！？[/speech_bubble]]
9種類のコードはdrop・std・ fb・ fb-flat・ln・ ln-flat・ pink・ rtail・ thinkのどれかを選べばいい。
ちなみにそれぞれがどんな感じになるかというと↓
drop
[speech_bubble type=”drop” subtype=”L1″ icon=”saeki2.png” name=”毎年平社員の佐伯さん”]dropです。[/speech_bubble] [speech_bubble type=”drop” subtype=”R1″ icon=”nagano2.png” name=”OLの長野さん”]そうみたいですね。 [/speech_bubble]
std
[speech_bubble type=”std” subtype=”L1″ icon=”saeki2.png” name=”毎年平社員の佐伯さん”]stdです。[/speech_bubble] [speech_bubble type=”std” subtype=”R1″ icon=”nagano2.png” name=”OLの長野さん”]シンプルでいいですね。飾り気もなにもない佐伯さんみたい。 [/speech_bubble]
fb
[speech_bubble type=”fb” subtype=”L1″ icon=”saeki2.png” name=”毎年平社員の佐伯さん”]PCのFacebookのメッセージのやりとりをイメージしているみたいですね。[/speech_bubble] [speech_bubble type=”fb” subtype=”R1″ icon=”nagano2.png” name=”OLの長野さん”]見ればわかります。 [/speech_bubble]
fb-flat
[speech_bubble type=”fb-flat” subtype=”L1″ icon=”saeki2.png” name=”毎年平社員の佐伯さん”]スマホのFacebookのメッセンジャーみたいです！[/speech_bubble] [speech_bubble type=”fb-flat” subtype=”R1″ icon=”nagano2.png” name=”OLの長野さん”]佐伯さん、私に無言でfacebookの友達申請するのやめてください。 [/speech_bubble]
ln
[speech_bubble type=”ln” subtype=”L1″ icon=”saeki2.png” name=”毎年平社員の佐伯さん”]今度はLINEですよ！長野さん！[/speech_bubble] [speech_bubble type=”ln” subtype=”R1″ icon=”nagano2.png” name=”OLの長野さん”]佐伯さん、変なスタンプばっかり送らないでください。 [/speech_bubble]
ln-flat
[speech_bubble type=”ln-flat” subtype=”L1″ icon=”saeki2.png” name=”毎年平社員の佐伯さん”]これもLINEですよ！長野さん！あ、既読スルーしないで！！[/speech_bubble] [speech_bubble type=”ln-flat” subtype=”R1″ icon=”nagano2.png” name=”OLの長野さん”]・・・。 [/speech_bubble]
pink
[speech_bubble type=”pink” subtype=”L1″ icon=”saeki2.png” name=”毎年平社員の佐伯さん”]可愛いです！ピンクです！長野さん！女子っぽいですよ！[/speech_bubble] [speech_bubble type=”pink” subtype=”R1″ icon=”nagano2.png” name=”OLの長野さん”]佐伯さんは絶対にこれを使わないでくださいね。気持ちが悪いので。 [/speech_bubble]
rtail
[speech_bubble type=”rtail” subtype=”L1″ icon=”saeki2.png” name=”毎年平社員の佐伯さん”]これもシンプルだけど使いやすそうですね！[/speech_bubble] [speech_bubble type=”rtail” subtype=”R1″ icon=”nagano2.png” name=”OLの長野さん”]佐伯さんには似合わないなぁ。もっと華が無い感じなので。[/speech_bubble]
think
[speech_bubble type=”think” subtype=”L1″ icon=”saeki2.png” name=”毎年平社員の佐伯さん”]長野さん可愛いなぁ。[/speech_bubble] [speech_bubble type=”think” subtype=”R1″ icon=”nagano2.png” name=”OLの長野さん”]佐伯さん気持ち悪いなぁ。[/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=” ”】の部分で変更します。
また、吹き出しのしっぽも同じく【subtype=” ”】の部分で変更します。
L1⇒人物が左側に配置、吹き出しのしっぽは「話す」感じになる
[speech_bubble type=”fb-flat” subtype=”L1″ icon=”saeki2.png” name=”毎年平社員の佐伯さん”]subtype=”L1″にしました。[/speech_bubble] [speech_bubble type=”fb-flat” subtype=”L1″ icon=”nagano2.png” name=”OLの長野さん”]いやだ、佐伯さんちょっと加齢臭するー。 [/speech_bubble]
L2⇒人物が左側に配置、吹き出しのしっぽは「考える」感じになる
[speech_bubble type=”fb-flat” subtype=”L2″ icon=”saeki2.png” name=”毎年平社員の佐伯さん”]subtype=”L2″にしました。[/speech_bubble] [speech_bubble type=”fb-flat” subtype=”L2″ icon=”nagano2.png” name=”OLの長野さん”]うちのおじいちゃんもこんな臭いしてたなぁ。 [/speech_bubble]
R1⇒人物が右側に配置、吹き出しのしっぽは「話す」感じになる
[speech_bubble type=”fb-flat” subtype=”R1″ icon=”saeki2.png” name=”毎年平社員の佐伯さん”]subtype=”R1″にしました。[/speech_bubble] [speech_bubble type=”fb-flat” subtype=”R1″ icon=”nagano2.png” name=”OLの長野さん”]やだぁ、佐伯さんちょっとこっちこないでよ。 [/speech_bubble]
R2⇒人物が右側に配置、吹き出しのしっぽは「考える」感じになる
[speech_bubble type=”fb-flat” subtype=”R2″ icon=”saeki2.png” name=”毎年平社員の佐伯さん”]subtype=”R2″にしました。[/speech_bubble] [speech_bubble type=”fb-flat” subtype=”R2″ icon=”nagano2.png” name=”OLの長野さん”]佐伯さんって結婚してるのかな？ [/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]
それを、今回僕が使用した「佐伯さん」「長野さん」みたいに、あなたの好きな画像や写真に変更することができます。
アイコン画像の変更手順
手順１）あなたの使用しているサーバーのWordPressのフォルダの中の「speech-bubble」の中の「img」フォルダを探します。
例：ドメイン＞public_html＞wp-content＞plugins＞speech-bubble＞img
これを、Xサーバーを使った時の設定方法を以下の動画で解説しました↓
手順２）使用したいアイコン画像（jpg, png, gif, svg, tif）を、そのimgフォルダ内にアップロードします。(ファイル名は半角英数字を使ってください）
手順３）このSpeech Bubbleの【icon=” ○○.jpg“】の部分で、先ほどアップロードしたファイル名を指定してあげれば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]]
※画像サイズは大きくても勝手にリサイズされて、ちょうどいい大きさに変更されますので、画像編集の際に、サイズ変更などしなくても大丈夫です。
ありがたい事に、吹き出しの中の文字はテキストになっている
そうなんです。これがめちゃくちゃありがたい。
SEO的にはこれがテキストであることがありがたやなんです。
SEOって何？っていうあなたは、SEOの基本について書いた記事を参考にしてください。
キャラを増やせばこんな風なブログもできる
[speech_bubble type=”std” subtype=”L1″ icon=”saeki2.png” name=”毎年平社員の佐伯さん”]ふふふふふ。[/speech_bubble] [speech_bubble type=”std” subtype=”R1″ icon=”nagano2.png” name=”OLの長野さん”]いやだ、佐伯さん何ちょっとにやけているんですか。気色が悪い。 [/speech_bubble] [speech_bubble type=”std” subtype=”L1″ icon=”saeki2.png” name=”毎年平社員の佐伯さん”]長野さんおはようございます。いやー、こんな便利なプラグインがあるなんて知らなかったです。ブログの中に会話みたいに吹き出しが付けられるんですよ！[/speech_bubble] [speech_bubble type=”std” subtype=”R1″ icon=”morinaga.png” name=”新人の森永君”]佐伯さん何ていうプラグインですか？ [/speech_bubble] [speech_bubble type=”std” subtype=”L1″ icon=”saeki2.png” name=”毎年平社員の佐伯さん”]『Speech Bubble』っていうプラグインなんです。[/speech_bubble] [speech_bubble type=”pink” subtype=”R1″ icon=”kusobucho.png” name=”仕事しないクソ部長”]佐伯ィィ。この前やっておいてってお願いしたプレゼンの資料できたのーぉ？僕もう帰るよー。 [/speech_bubble] [speech_bubble type=”ln-flat” subtype=”L1″ icon=”president.png” name=”社長”]おい！お前ら！早く仕事しろ！売上上げろ！斬るぞ！ [/speech_bubble]
※この人たちがどんなキャラなのか知りたいあなたは佐伯さんたちを使った漫画の原稿の使い方の記事を見てみてね。
追記
2015年4月29日現在、新しいバージョンのSpeech Bubbleへの更新通知が来ますが、すぐには更新しないでください。不具合の報告があります。
詳しくは
⇒WordPress吹き出しプラグインSpeech Bubbleのアップデートは要注意！
を読んでください。
まとめ
いやー、またまたブログの幅が広がりました。
是非あなたもこのSpeech Bubbleというプラグインを活用して面白いブログを書いてみて下さい。
面白いブログの書き方は
⇒面白いブログの書き方！熱烈ファンを獲得する9つの必殺技を参考にしてみて下さい。
ブログって実はこういう人に楽しんでもらえるようなコンテンツを作れるようにならないといけない時代に来ています。
もちろんコツコツとSEO対策をして、検索流入を増やすことも必要ですが、SNSというメディアがあるので、面白いコンテンツを提供してマーケティングに活かさない手はありません。
そんなコンテンツマーケティングについても僕のつくったブログマーケティングスクールで学ぶことができます。どうぞ興味があればのぞいてみて下さい。
FacebookやTwitterもやってます。
どうぞ友達になってください^^
じゃあね！バイチャ！