WordPressの吹き出しプラグイン『Speech Bubble』で会話形式のブログコンテンツが作れる!


  • HOME /
  • ブログ /
  • WordPressの吹き出しプラグイン『Speech Bubble』で会話形式のブログコンテンツが作れる!
ブログ

WordPressの吹き出しプラグイン『Speech Bubble』で会話形式のブログコンテンツが作れる!

  • いいね!
    568
  • このページは260回共有されました。これらのツイートを見る。

  • 11
  • 2015.01.29
  • by JUNICHI
  • 15
吹き出しプラグイン紹介

吹き出しプラグイン紹介

やっと見つけた!

 

LINEやFacebookみたいな会話をブログで使う事ができる、めちゃくちゃ便利な吹き出しプラグインを見つけました。

 

 

毎年平社員の佐伯さん
こんにちは。WordPressではこんな便利なプラグインがあるんですね。
OLの長野さん
佐伯さん、"毎年平社員"っていう肩書がつけられてますよ。チョー似合う。

 

 

 

今回は、こんなふうに漫画風や会話風にブログを進行することができるようになるワードプレスのプラグイン『Speech Bubble』というプラグインのインストール方法&使い方をご紹介します。

スポンサードリンク

この記事のもくじ [とじる]

Speech Bubbleのインストールの手順

「Speech Bubble」はプラグインなので、基本的にインストール方法は他のプラグインと同じです。

念のために図解します。

 

手順1)ダッシュボードの「プラグイン」

プラグイン1

 

手順2)「新規追加」から右の検索窓に「Speech Bubble」と入力してENTERプラグイン2

 

手順3)Speech Bubbleが出てきますので、「今すぐインストール」をクリック

プラグイン3

 

 

 

手順4)「プラグインを有効化」をクリックプラグイン有効

以上でプラグインのインストールと有効化が終わりました。

 

 

吹き出しプラグインSpeech Bubbleを使って投稿をする方法

いつも通りブログを書く手順で「投稿」⇒「新規投稿」を選びます。

ビジュアルモードでも、テキストモードでも両方使用可能でした。

プラグイン5

 

この新規投稿画面に以下のコードをコピペしてみてください。

 

1
2
[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 さん
おっす!
B さん
なんだちみは!?

 

 

セリフの変更の仕方

1
2
[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。

 

 

キャラの名前の変更方法

1
2
[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になっている。

1
2
[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

毎年平社員の佐伯さん
dropです。
OLの長野さん
そうみたいですね。

 

std

毎年平社員の佐伯さん
stdです。
OLの長野さん
シンプルでいいですね。飾り気もなにもない佐伯さんみたい。

 

fb

毎年平社員の佐伯さん
PCのFacebookのメッセージのやりとりをイメージしているみたいですね。
OLの長野さん
見ればわかります。

 

fb-flat

毎年平社員の佐伯さん
スマホのFacebookのメッセンジャーみたいです!
OLの長野さん
佐伯さん、私に無言でfacebookの友達申請するのやめてください。

 

ln

毎年平社員の佐伯さん
今度はLINEですよ!長野さん!
OLの長野さん
佐伯さん、変なスタンプばっかり送らないでください。

 

 

ln-flat

毎年平社員の佐伯さん
これもLINEですよ!長野さん!あ、既読スルーしないで!!
OLの長野さん
・・・。

 

 

pink

毎年平社員の佐伯さん
可愛いです!ピンクです!長野さん!女子っぽいですよ!
OLの長野さん
佐伯さんは絶対にこれを使わないでくださいね。気持ちが悪いので。

 

rtail

毎年平社員の佐伯さん
これもシンプルだけど使いやすそうですね!
OLの長野さん
佐伯さんには似合わないなぁ。もっと華が無い感じなので。

 

 

think

毎年平社員の佐伯さん
長野さん可愛いなぁ。
OLの長野さん
佐伯さん気持ち悪いなぁ。

 

 

人物の向きと、吹き出しのしっぽの種類の変更方法

1
2
[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⇒人物が左側に配置、吹き出しのしっぽは「話す」感じになる

毎年平社員の佐伯さん
subtype="L1″にしました。
OLの長野さん
いやだ、佐伯さんちょっと加齢臭するー。

 

L2⇒人物が左側に配置、吹き出しのしっぽは「考える」感じになる

毎年平社員の佐伯さん
subtype="L2″にしました。
OLの長野さん
うちのおじいちゃんもこんな臭いしてたなぁ。 

 

R1⇒人物が右側に配置、吹き出しのしっぽは「話す」感じになる

毎年平社員の佐伯さん
subtype="R1″にしました。
OLの長野さん
やだぁ、佐伯さんちょっとこっちこないでよ。

 

R2⇒人物が右側に配置、吹き出しのしっぽは「考える」感じになる

毎年平社員の佐伯さん
subtype="R2″にしました。
OLの長野さん
佐伯さんって結婚してるのかな?

 

 

 

アイコン画像(キャラとかの画像)の変更方法

デフォルトの設定では、こんなシンプルな感じのアイコンになっています↓

A さん
おっす!
B さん
なんだちみは!?

 

 

それを、今回僕が使用した「佐伯さん」「長野さん」みたいに、あなたの好きな画像や写真に変更することができます。

 

アイコン画像の変更手順

手順1)あなたの使用しているサーバーのWordPressのフォルダの中の「speech-bubble」の中の「img」フォルダを探します。

例:ドメイン>public_html>wp-content>plugins>speech-bubble>img

 

手順2)使用したいアイコン画像(jpg, png, gif, svg, tif)を、そのimgフォルダ内にアップロードします。(ファイル名は半角英数字を使ってください)

 

手順3)このSpeech Bubbleの【icon=" ○○.jpg"】の部分で、先ほどアップロードしたファイル名を指定してあげればOKです。

1
2
[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の基本について書いた記事を参考にしてください。

 

 

 

キャラを増やせばこんな風なブログもできる

毎年平社員の佐伯さん
ふふふふふ。
OLの長野さん
いやだ、佐伯さん何ちょっとにやけているんですか。気色が悪い。
毎年平社員の佐伯さん
長野さんおはようございます。いやー、こんな便利なプラグインがあるなんて知らなかったです。ブログの中に会話みたいに吹き出しが付けられるんですよ!
新人の森永君
佐伯さん何ていうプラグインですか?
毎年平社員の佐伯さん
『Speech Bubble』っていうプラグインなんです。
仕事しないクソ部長
佐伯ィィ。この前やっておいてってお願いしたプレゼンの資料できたのーぉ?僕もう帰るよー。
社長
おい!お前ら!早く仕事しろ!売上上げろ!斬るぞ!

 

※この人たちがどんなキャラなのか知りたいあなたは佐伯さんたちを使った漫画の原稿の使い方の記事を見てみてね。

 

 

まとめ

いやー、またまたブログの幅が広がりました。

是非あなたもこのSpeech Bubbleというプラグインを活用して面白いブログを書いてみて下さい。

面白いブログの書き方は

面白いブログの書き方!熱烈ファンを獲得する9つの必殺技を参考にしてみて下さい。

 

ブログって実はこういう人に楽しんでもらえるようなコンテンツを作れるようにならないといけない時代に来ています。

 

もちろんコツコツとSEO対策をして、検索流入を増やすことも必要ですが、SNSというメディアがあるので、面白いコンテンツを提供してマーケティングに活かさない手はありません。

 

そんなコンテンツマーケティングについても僕のつくったブログマーケティングスクールで学ぶことができます。どうぞ興味があればのぞいてみて下さい。

 

FacebookやTwitterもやってます。

どうぞ友達になってください^^

 

⇒Facebookで友達になってください!

⇒Twitterでも友達になってください!

 

 

じゃあね!バイチャ!

 

 

最後まで読んで下さり、ありがとうございます!

シェアして頂けると、モチベーションがぐんぐん上がります! 今後も、お役に立てるように頑張りますm(_ _)m

アクセスアップの方法が学べるよ。集客ブログが作れるよ。最高のブログ仲間ができるよ。

そんな学校作りました。詳しくは↓の画像を今すぐクリック! blogschool  

無料で『ブログアクセスアップの方法』&『ブログ集客の全手法』を公開してしまいました。

ebookdownload  

この記事を読んだ人は、こんな記事も読んでいます

 
  • いいね!
    568
  • このページは260回共有されました。これらのツイートを見る。

  • 11

スポンサードリンク

スポンサードリンク

   
Zenback読み込み中です。
masman

著者 JUNICHI

ブログと漫画が好き。『好きな事をブログに書いて、仕事につなげよう!』という事をブログスクールで教えていたりする。真面目で誠実な性格だが、人を笑わすのが好きなので、よく「チョケる」。

Facebookのすべての投稿 
高畑 浩一さんとして投稿する
.
.
.

    注目のコーナー

     

    Ebookblogsyukyaku

     

     

    アクセスアップコーナーバナー用22

     

     

    漫画講座2

     

    underworldbaner

    JUNICHI's Blog
    いいね!
    .
    204人がJUNICHI's Blogについて「いいね!」と言っています。
    • 久保田 雄介
    • 安田 真也
    • 菅井浩二
    • 佐藤彰弘
    • Takayuki Okada
    • 中村 優太
    • 横田 健一
    • 池田 美清
    • 橋本 剣太
    • 杉原 伸太郎
    • 井手 仁
    • 池内 祐介
    • Tsugumi  Hidaka
    • Shuichi Yamashita
    • 太田 裕世志
    • 林 明文
    • もとしげ ゆきこ
    • 山中 由充
    • 青木 創治郎
    • すずき みゆき
    • 引地 友理子
    • 竹内 紳也
    • Naoya Noda
    • 片岡 建司
    • 藤澤 亮太
    • Yuho Hashimoto
    • 村田 興平
    • 桜井 まこと
    • 横山典膳
    • 小村康宣
    • 米澤 栄治
    • 石田 芽意
    • 中村 景子
    • 森 惇
    • 落合 正和

    プロフィール

    どうも!JUNICHIです。

    ブログを書いて、人に喜んでもらいながら集客までできてしまう「ブログマーケティング」を専門に扱ってます。

    漫画を描くのも大好物。

    一度きりの人生、自分の「夢」を大切にしたいと思います。

    どうぞよろしくお願いします。

    ⇒詳しいプロフィールはこちら

    selfillust1



    サイト内を検索

    Twitter



    follow us in feedly



    JUNICHI's BLOG

    © Copyright 2015 JUNICHI's BLOG. All rights reserved.



    comments powered by Disqus