【Speech Bubble】会話形式の吹き出しが使えるプラグイン 『WordPress』

会話形式の吹き出しが使えるプラグイン「Speech Bubble（スピーチバブル）」のご紹介です！

「Speech Bubble」プラグインを使うことによって、吹き出しを使った会話をブログで使うことが出来ます。

しょしんしゃ

せんせい、Speech bubble （スピーチバブル）は初心者でも使えるのでしょうか！？

せんせい

もちろん、使えます。　「使いこなせるかどうか」は、あなた次第です。

このように、ブログの内容を会話形式で進めていくことが可能になります。

今回は「Speech Bubble」のインストールから使い方までを紹介していきますので、どうぞ最後までお付き合い下さい(^o^)

アルバトロスの使い方。吹き出し機能がショートコードで簡単に使えるぞ！

2016.07.03

• 【ｹﾞｹﾞｹﾞの鬼太郎】6期14話感想。目玉おやじイケメンすぎワロタ
• 【BBTAG】オリエのコンボ置き場【ﾌﾞﾚｲﾌﾞﾙｰ ｸﾛｽﾀｯｸﾞﾊﾞﾄﾙ】
• 【BBTAG】エピソードモードの分岐、回収方法【ﾌﾞﾚｲﾌﾞﾙｰ ｸﾛｽﾀｯｸﾞﾊﾞﾄﾙ】
• 【BBTAG】ワイスのコンボ置き場【ﾌﾞﾚｲﾌﾞﾙｰ ｸﾛｽﾀｯｸﾞﾊﾞﾄﾙ】
• 【BBTAG】ジンのコンボ置き場【ﾌﾞﾚｲﾌﾞﾙｰ ｸﾛｽﾀｯｸﾞﾊﾞﾄﾙ】

吹き出しはつよい

「Speech Bubble（スピーチバブル）」の吹き出しは、テキストとして認識されるので、SEOにも強いらしいです。

それもいいんですが、「やってる本人が楽しい」っていうのが強いです。←ここ重要。

マジで楽しすぎワロタｗｗｗ

吹き出し機能を使い始めると、全ての記事に吹き出しを付けたくなりますｗｗ（時間ないけど）

ぶっちゃけ、自分が吹き出し機能を多様してると、「文字だけ」で埋め尽くされた自分の過去記事とかは、ホント見る気が失せますね。

「漫画」と「小説」どっちが読みやすいと思いますか？

「挿絵の入ってる小説」と「挿絵の無い小説」どっちが読みたいでしょうか？（画像なしの記事）

「挿絵がいっぱい入ってる小説」と「挿絵の少ない小説」どっちが良いでしょうか？（画像いっぱいある記事）

答えは明白ですね。

吹き出しのアイコン画像は、自分で描いても良いですし、フリーのヤツを拾ってきてもOKです。

ですが、お金を払ってプロに書いてもらうのが、一番良いと思います。

私は、ランサーズで描いてもらっています。

てか、プラグイン入れるよりも、「吹き出し機能が標準装備されてるテンプレート」を装備した方が早いですよ。

アルバトロスの使い方。吹き出し機能がショートコードで簡単に使えるぞ！

2016.07.03

▼　プラグインを入れる前には、バックアップを取っておくことをオススメします。

関連記事：WordPressのバックアップを取るためのプラグイン「BackWPup」の使い方

スピーチバブルのインストール手順

まずは「Speech Bubble」プラグインの、インストールからやっていきましょう。

↓　WordPressにログインします。

↓　WordPress管理画面の左メニューから「プラグイン」をクリック。

↓　上の方にある「新規追加」をクリック。

↓　右上の方に「プラグインの検索」という枠が表示されます。

↓　検索窓に「Speech Bubble」のスペルをコピーペーストして、キボードの「Enter（エンターキー）」を押してあげて下さい。

Speech Bubble

はおうしょうこうけん

「検索ボタン」がないので、「エンターキーを使わざるを得ない」ですね。

↓　Speech Bubbleが表示されるので「今すぐインストール」をクリック。

↓　プラグインのインストールが完了すると、下のような画面が表示されます。

「プラグインを有効化」をクリック。

以上で「Speech Bubble」プラグインのインストール作業は終了です。

お疲れ様でした＼(^o^)／

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]

↓　こんな感じで貼り付けます。（適当でOK）

↓　貼り付けた後、「下書きとして保存」→「投稿を表示」で確認してみましょう。

↓　するとこのように表示されるはずです。

コミュ障くんA

・・・。

コミュ障くんB

･･････。

コードの設定ポイント

コードをいじると、吹き出しの種類やアイコンの位置などを変更できます。

↓　コードは、以下のように対応しています。

[speech_bubble type=”①drop” subtype=”②L1” icon=”③1.jpg” name=”④コミュ障くんA“]⑤・・・。 [/speech_bubble]

[speech_bubble type=”①吹き出しの種類” subtype=”②キャラアイコンの配置とか” icon=”③キャラアイコンのファイル名” name=”④キャラの名前“]⑤キャラのセリフ [/speech_bubble]

黒い部分は、変えません。

赤いとこをイジって、吹き出しを調整する仕様になっています。

吹き出しの種類の変更

吹き出しは9種類あるので、お好きなものを使って下さい。デフォルトは「drop」になっています。

「drop」「std」「fb」「fb-flat」「ln」「ln-flat」「pink」「rtail」「think」

吹き出しは、赤色の部分にコードをぶっ込むことによって変更できます。

↓　コードを「fb-flat」に変更

[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]

↓投稿にはこのように表示されます。

コミュ障くんA

・・・。

コミュ障くんB

･･････。

コードを変えると、吹き出しの色や形が変化します。

「吹き出しの種類」についての詳細は、長くなるので、記事の下の方の見出しに設置しました！

↓　こいつ。

キャラアイコンの配置と吹き出しのしっぽ変更

アイコンと吹き出しのしっぽは、赤色の部分が対応しています。

[speech_bubble type=”fb-flat” subtype=”L1” icon=”1.jpg” name=”コミュ障くんA”]・・・。 [/speech_bubble]

「L1」の「L」がアイコンの位置。

「L1」の「1」が吹き出しのしっぽに対応しています。

「L1」「L2」「R1」「R2」

「L」は左。「R」は右。「1」は通常。「2」は妄想。

コード「L1」。アイコン左、吹き出しは通常

しょしんしゃ

subtype=”L1“にしました。

コード「L2」。アイコンは左、吹き出しは妄想

しょしんしゃ

subtype=”L2“にしました。

コード「R1」。アイコンは右、吹き出しは通常

しょしんしゃ

subtype=”R1“にしました。

コード「R2」。アイコンは右、吹き出しは妄想

しょしんしゃ

subtype=”R2“にしました。

「R1」を「r1」にすると、吹き出し機能が反映されません。

キャラクターのアイコン画像について

キャラクターのアイコン画像は、赤色の部分が対応しています。

赤色の部分に、サーバーにアップした「画像のURL」をぶち込むことによって、アイコンの変更ができるのです。

[speech_bubble type=”fb-flat” subtype=”L1″ icon=”1.jpg” name=”コミュ障くんA”]・・・。 [/speech_bubble]

インストール直後は「1.jpg」と「2.jpg」の2つしかアイコンがありませんね。

もちろん、アイコン画像は追加する事が出来ます。

ですが、「WordPressのメディア」や「サーバーの『public html』」に、画像をアップロードするのではありません。

やサーバーのスピーチバブルのフォルダに、自分で画像を追加していく必要があります。

WordPressメディアとは、別の場所でアイコン画像を管理出来るので、ある意味では便利です。

↓　用意した画像を追加するには、エックスサーバーのインフォパネルにログインして下さい。

エックスサーバーインフォパネル

インフォパネルのログインフォームにアクセスして、必要事項を入力してインフォパネルに「ログイン」をクリックします。

↓　インフォパネルにログインしたら、ファイルマネージャに「ログイン」をクリック。

↓　ご自分のドメインファイル名をクリック。

↓　「public html」をクリック。

↓　「wp-content」をクリック。

↓　「plugins」をクリック。

↓　「speech-bubble」をクリック。

↓　「img」をクリック。

ようやく到着です。ここから画像ファイルをアップロードする作業が始まります。

↓　ファイルのアップロードの「ファイルの選択」をクリック。

↓　用意しておいた画像を選択して「開く」をクリック。

追加する画像ファイルの名前は「半角英数字」にしてください。（数字だけ、英語だけでもOK。）

「オワタ」などの日本語表記ではアップロードしても使えません。（文字化け等）

↓　「ファイルを選択」のところに、アップした画像のファイル名が確認できたら、「アップロード」をクリックします。

画像は、ドラッグでぶち込むと早いです。（「ドラッグ」でリストに突っ込む。→「アップロード」ボタンをクリックする。　この2動作で済みます。）

「Speech bubble (ふきだしプラグイン)」用の、アイコン専用フォルダとか作ってくと便利です。

↓　上部に「ファイルのアップロードを完了しました。」と表示されたらOKです。

↑　ファイル名のところに、アップロードした画像ファイルが追加されているのが確認出来ます。

画像のファイル名をコピーします。（もしくは、画像を保存しているフォルダからコピー）

↓　コピーしたファイル名を赤字の部分に貼り付けます。

[speech_bubble type=”fb-flat” subtype=”L1″ icon=”2016-05-22_174945.png” name=”オワタくん”]＼(^o^)／オワタ [/speech_bubble]

↓　コードを投稿編集に貼り付け、投稿を表示させるとこんな感じになります。（プレビュー）

オワタくん

＼(^o^)／オワタ

アイコン画像の形

アイコンとして使う画像は、「正方形」のモノが良いです。

正方形の時ィ！

↓　プレビュー。

オワタくん

＼(^o^)／オワタ

横に長い時ィ！

↓　プレビュー。

オワタくん

＼(^o^)／オワタ

縦に長い時ィ！

↓　プレビュー。

オワタくん

＼(^o^)／オワタ

アイコン画像のファイル名について

ファイル名は、一番重要です。　基本的には変えない方が良いです。（サーバーにアップロードしたヤツは。）

画像のファイル名を変えてしまうと、過去に「その画像を使った吹き出しのアイコン」が全て消滅するからです。（アイコンのみ消滅で、吹き出しは残る。）

↓　変更前。

オワタくん

＼(^o^)／オワタ

↓　変更後。

ファイル名は「半角英数字」にする

↓　ファイル名が正しくない場合。（半角英数字ではない等）

no name

.png” name=”オワタくん”]＼(^o^)／オワタ

ほそくせつめい

基本的に、サーバーに預けるファイル名は、「半角英数字」にしないとイけません。

owata020.png　← OK（半角英数字）

-owata020.png　← OK（ハイフン）

_owata020.png　← OK（アンダーバー）

(owata020.png　← ？？（半角丸カッコ）

（　← 半角丸カッコを使ったファイル名の画像をサーバーにアップロードすると、「Xserverのファイルマネージャ」からは、見えなくなります。

何を言っているのか、分からないと思いますが、画像アップロードはできているのに、ファイルが見えなくなります。

アップした画像URLを「Speech bubble」コードに入れると、吹き出しアイコン画像としては、ちゃんと反映されています。

ですが、ファイルマネージャからは見えません。（透ける能力かな？）

しかし、FTPソフトから見ると、しっかりとファイル名が表示されます。（いるじゃねーか、本物！）

アイコン画像置き場にフォルダを作って整理する

アイコン画像を増やしていくと、「Speech bubble」のimgフォルダがくっちゃくちゃになります。

↓　こんな感じに・・・。

/ドメイン/public_html/wp-content/plugins/speech-bubble/img/←場所はここ。

アイコンに名前を付けて、仕分けても良いのですが、別の方法を書いておきます。

↓　imgフォルダの中にフォルダを作成します。（フォルダ名に注意）

↓　作成したフォルダをクリックします。

↓　ファイルをアップロードします。

↓　準備完了です。

plugins/speech-bubble/img/owataicon/owata0001.png←画像ファイル。（緑はフォルダ。赤が画像ファイル）

[speech_bubble type="fb" subtype="L1" icon="owataicon/owata0001.png" name="オワタ"]＼(^o^)／[/speech_bubble]

↓　プレビュー。

オワタ

＼(^o^)／

普通なら、画像URLは「owata0001.png」だけで済みますが、整理するためにフォルダを作って、その中に画像ファイルを突っ込みました。

そのため、「owataicon/owata0001.png」のように、URLが長くなってしまいます。

アップした画像ファイルを削除するには

ファイルを削除するには、アップロードと同じようにスピーチバブルの「img」フォルダまで行きます。

①削除したいファイル名の左にチェックを入れる。

②「ファイルの削除」をクリック。

③削除の確認ウィンドウが表示されるので「OK」をクリック。

↓　「img」フォルダから削除すると、その画像を使っていたアイコンはこうなります。

オワタくん

＼(^o^)／オワタ

もちろん、同じ名前の画像ファイルを、再びアップロードすると復活します。

名前を変更した時と、同様です。

アイコン（キャラクター）の名前変更

↓　キャラの名前を変更するには、赤字の部分をいじって下さい。

[[speech_bubble type=”drop” subtype=”L1″ icon=”1.jpg” name=”しょしんしゃ“]・・・。 [/speech_bubble]]

↓　プレビュー（変更前）

しょしんしゃ

・・・。

[[speech_bubble type=”drop” subtype=”L1″ icon=”1.jpg” name=”初心者“]・・・。 [/speech_bubble]]

↓　プレビュー（変更後）

初心者

・・・。

吹き出し内のセリフ

吹き出し内のセリフをイジる方法です。

↓　吹き出しの内容は、赤字の部分をいじります。

[[speech_bubble type=”drop” subtype=”L1″ icon=”1.jpg” name=”初心者”]しょしんしゃです。 [/speech_bubble]]

↓　プレビュー（変更前）

初心者A

しょしんしゃです。

[[speech_bubble type=”drop” subtype=”L1″ icon=”1.jpg” name=”初心者”]初心者です。 [/speech_bubble]]

↓　プレビュー（コード変更後）

初心者

初心者です。

コードの入力位置の確認

コードを入力する位置を覚えて、スピーチバブルを使いこなして下さい。

①は種類が多いので、一番覚えにくいです。　次に②。　逆に言うと、その2つの「使い方」を覚えればOKです。

[[speech_bubble type=”①” subtype=”②” icon=”③” name=”④“]⑤ [/speech_bubble]]

 

↓　番号の対応部分。

 

[speech_bubble type="①吹き出しの種類" subtype="②アイコンの配置とか" icon="③アイコン画像のURL" name="④アイコン（キャラ）の名前"]⑤吹き出し内のセリフ [/speech_bubble]

上級者の人は、「吹き出し種類」のコード自体も、全部覚えてるのかも知れませんｗ

①「吹き出しの種類」を変更するには①に以下の9種類のコードを選んで挿にゅー。

「drop」「std」「fb」「fb-flat」「ln」「ln-flat」「pink」「rtail」「think」

②「キャラアイコンの配置とか」を変更するには、②に以下の4種類のコードから選択して挿にゅー。

「L1」「L2」「R1」「R2」

③「キャラアイコン」を変更するには、サーバーに画像ファイル（英数字表記）突っ込んだ後に、画像ファイル名を差し込む。

④キャラクターの名前は、④のところにぶち込む。

⑤キャラクターのセリフは、⑤のところにぶち込んで下さい。

ショートコードで解決する

①の「吹き出しの種類」は、9種類と数が多いので、慣れるまでが大変です。（詳しくは、次以降の見出しで触れます。）

②の「アイコンの配置」は、4種類なので、やってればそのうち覚えます。

③の「画像アップロード」は、やってればそのうち慣れます。

④の「アイコン名」は簡単です。

⑤の「セリフ」は、簡単です。

吹き出し機能を使った、記事作成の流れとしては、とりあえず⑤のセリフを記事内に入力して、「AddQuicktag」というプラグインで、①～④のコードを呼び出すだけの作業になります。

ほとんどのことは、「AddQuicktag（ショートコード等の登録・便利化）」で解決します。

詳しくは、「AddQuicktag」の記事で触れます。

↓　これ。

関連記事：『WordPress』 ショートコードとかの面倒な入力とかが楽になるプラグイン【AddQuicktag】

「AddQuicktag」に触れる前に、この「Speech bubble (ふきだしプラグイン)」の記事を、とりあえず1回全部読んで下さい。

「アイコンの名前」と「吹き出し内の画像」について（細かい仕様の説明）

ここでは、「名前」や「吹き出し内の画像」など、細かい仕様について触れていきます。

「名前の色」と「フォントサイズ」について

名前の「色」や「フォントサイズ」は変えられません。

色の変更。

[speech_bubble type="fb" subtype="L1" icon="KOF14geese.jpg" name="かちょう"]no name？　あ・・・？　あ・・・？[/speech_bubble]

↓　プレビュー。

no name

no name？　あ・・・？　あ・・・？

フォントサイズの変更。

[speech_bubble type="fb" subtype="L1" icon="KOF14geese.jpg" name="こわれる"]no name？　あ・・・？　あ・・・？[/speech_bubble]

↓　プレビュー。

no name

no name？　あ・・・？　あ・・・？

吹き出し内の「文字の色」と「フォントサイズ」について

吹き出しの文字は「色」や「フォントサイズ」を変えられます。

色とフォントサイズ変更。

[speech_bubble type="fb" subtype="L1" icon="KOF14geese.jpg" name="色とフォントサイズ"]色とフォントサイズ[/speech_bubble]

↓　プレビュー。

色とフォントサイズ

色とフォントサイズ

吹き出し内の「文字」と「画像」の配置について

文字や画像を、「中央揃え」や「右寄せ」にしたりできます。

課長こわれる

「スマホから見ると崩れる」ので、やめたほうがいいかも知れません。（多分PCから見ても崩れる）

左寄せ

中央揃え

右寄せ

まとめ

「アイコンの配置」と「吹き出しの種類」などを、全部載せておきます。

覚えるべきは、「アイコンの配置」や「吹き出しの種類」です。

「アイコンの配置」と「妄想吹き出し」（復習）

「アイコンの配置」と「妄想吹き出し」の組み合わせは、全部で4種類。

↓　これ。

「L1」「L2」「R1」「R2」

↓　②のところに、コードを突っ込みます。

[speech_bubble type="①" subtype="②" icon="③" name="④"]⑤ [/speech_bubble]

 

↓　番号の対応部分。

 

[speech_bubble type="①吹き出しの種類" subtype="②アイコンの配置とか" icon="③アイコン画像のURL" name="④アイコン（キャラ）の名前"]⑤吹き出し内のセリフ [/speech_bubble]

「L1」。アイコン左。吹き出しは通常

しょしんしゃ

subtype=”L1“にしました。

「L2」。アイコン左。吹き出しは妄想

しょしんしゃ

subtype=”L2“にしました。

「R1」。アイコン右。吹き出しは通常

しょしんしゃ

subtype=”R1“にしました。

「R2」。アイコン右。吹き出しは妄想

しょしんしゃ

subtype=”R2“にしました。

「L1」がアイコン左配置。「R1」がアイコン右配置。

これがデフォルトです。

「L2」にすると吹き出しが妄想になる。　「R2」にすると吹き出しが妄想になる。

っていう認識でいいです。

「吹き出しの種類」（復習）

「吹き出しの種類」が9種類と、かなり多いです。

↓　9種類。

「drop」「std」「fb」「fb-flat」「ln」「ln-flat」「pink」「rtail」「think」

ここが一番「厄介」。

ですが、使いこなせれば強力な武器になります。

↓　①のところに、上記のコードを突っ込みます。

[[speech_bubble type=”①” subtype=”②” icon=”③” name=”④“]⑤ [/speech_bubble]]

 

↓　番号の対応部分。

 

[speech_bubble type="①吹き出しの種類" subtype="②アイコンの配置とか" icon="③アイコン画像のURL" name="④アイコン（キャラ）の名前"]⑤吹き出し内のセリフ [/speech_bubble]

「吹き出しの種類」サンプル（全部）

「吹き出しの種類」によっては、「吹き出しのしっぽ」や「妄想吹き出し」が大きく変化します。

吹き出しの見た目が、一発で分かるように、全パターンを載せておきましたｗｗｗ

コードも載せておいたので、コピーしてお使い下さい！＼(^o^)／

吹き出しの内容確認を、このプラグイン使う人が個々でやってたら、時間がクッソもったいないですからね！

▼　忘れた時の確認用に、この記事のこの見出しをブックマークしておいて下さい。

↓　9種類。

「drop」「std」「fb」「fb-flat」「ln」「ln-flat」「pink」「rtail」「think」

①「drop」

空色。　吹き出しに、影がつくのがポイントです。

しょしんしゃ

「アイコン」左配置です。（L1）

せんせい

「アイコン」の右配置です。（R1）

もうそう左

「妄想吹き出し」左配置です。（L2）

もうそう右

「妄想吹き出し」右配置です。（R2）

さんぷる1

赤色と緑色とリンクとフォントサイズ（18pt）

さんぷる2

赤色と緑色とリンク（別タブ）とフォントサイズ（18pt）

[speech_bubble type="drop" subtype="L1" icon="KOF14k'.jpg" name="しょしんしゃ"]「アイコン」左配置です。（L1）[/speech_bubble]

 

[speech_bubble type="drop" subtype="R1" icon="KOF14maxima.jpg" name="せんせい"]「アイコン」の右配置です。（R1）[/speech_bubble]

 

[speech_bubble type="drop" subtype="L2" icon="KOF14kula.jpg" name="もうそう左"]「妄想吹き出し」左配置です。（L2）[/speech_bubble]

 

[speech_bubble type="drop" subtype="R2" icon="KOF14athena.jpg" name="もうそう右"]「妄想吹き出し」右配置です。（R2） [/speech_bubble]

 

[speech_bubble type="drop" subtype="L1" icon="KOF14dinosaurs.jpg" name="さんぷる1"]赤色と緑色とリンクとフォントサイズ（18pt）[/speech_bubble]

 

[speech_bubble type="drop" subtype="R1" icon="KOF14angel.jpg" name="さんぷる2"]赤色と緑色とリンク（別タブ）とフォントサイズ（18pt）[/speech_bubble]

②「std」

白一択。　妄想吹き出しの枠が、点線になるのがポイントですね。（ここだけ）

しょしんしゃ

「アイコン」左配置です。（L1）

せんせい

「アイコン」の右配置です。（R1）

もうそう左

「妄想吹き出し」左配置です。（L2）

もうそう右

「妄想吹き出し」右配置です。（R2）

さんぷる1

赤色と緑色とリンクとフォントサイズ（18pt）

さんぷる2

赤色と緑色とリンク（別タブ）とフォントサイズ（18pt）

[speech_bubble type="std" subtype="L1" icon="KOF14k'.jpg" name="しょしんしゃ"]「アイコン」左配置です。（L1）[/speech_bubble]

 

[speech_bubble type="std" subtype="R1" icon="KOF14maxima.jpg" name="せんせい"]「アイコン」の右配置です。（R1）[/speech_bubble]

 

[speech_bubble type="std" subtype="L2" icon="KOF14kula.jpg" name="もうそう左"]「妄想吹き出し」左配置です。（L2）[/speech_bubble]

 

[speech_bubble type="std" subtype="R2" icon="KOF14athena.jpg" name="もうそう右"]「妄想吹き出し」右配置です。（R2） [/speech_bubble]

③「fb」

個人的には、これが一番使いやすい気がします。　アイコンが丸いのが特徴ですね。

コードを統一するなら、「左右で吹き出しの色が違う」方が良い気がします。

ちなみに、このfbだけ、アイコンの枠（グレー）があります。

しょしんしゃ

「アイコン」左配置です。（L1）

せんせい

「アイコン」の右配置です。（R1）

もうそう左

「妄想吹き出し」左配置です。（L2）

もうそう右

「妄想吹き出し」右配置です。（R2）

さんぷる1

赤色と緑色とリンクとフォントサイズ（18pt）

さんぷる2

赤色と緑色とリンク（別タブ）とフォントサイズ（18pt）

[speech_bubble type="fb" subtype="L1" icon="KOF14k'.jpg" name="しょしんしゃ"]「アイコン」左配置です。（L1）[/speech_bubble]

 

[speech_bubble type="fb" subtype="R1" icon="KOF14maxima.jpg" name="せんせい"]「アイコン」の右配置です。（R1）[/speech_bubble]

 

[speech_bubble type="fb" subtype="L2" icon="KOF14kula.jpg" name="もうそう左"]「妄想吹き出し」左配置です。（L2）[/speech_bubble]

 

[speech_bubble type="fb" subtype="R2" icon="KOF14athena.jpg" name="もうそう右"]「妄想吹き出し」右配置です。（R2） [/speech_bubble]

④「fb-flat」

2P側の文字が、青塗りつぶしの白文字になります。　アイコンが丸いのが特徴です。

しょしんしゃ

「アイコン」左配置です。（L1）

せんせい

「アイコン」の右配置です。（R1）

もうそう左

「妄想吹き出し」左配置です。（L2）

もうそう右

「妄想吹き出し」右配置です。（R2）

さんぷる1

赤色と緑色とリンクとフォントサイズ（18pt）

さんぷる2

赤色と緑色とリンク（別タブ）とフォントサイズ（18pt）

[speech_bubble type="fb-flat" subtype="L1" icon="KOF14k'.jpg" name="しょしんしゃ"]「アイコン」左配置です。（L1）[/speech_bubble]

 

[speech_bubble type="fb-flat" subtype="R1" icon="KOF14maxima.jpg" name="せんせい"]「アイコン」の右配置です。（R1）[/speech_bubble]

 

[speech_bubble type="fb-flat" subtype="L2" icon="KOF14kula.jpg" name="もうそう左"]「妄想吹き出し」左配置です。（L2）[/speech_bubble]

 

[speech_bubble type="fb-flat" subtype="R2" icon="KOF14athena.jpg" name="もうそう右"]「妄想吹き出し」右配置です。（R2） [/speech_bubble]

⑤「ln」

アイコンの面取り無し。　吹き出しの上にアイコン名が来ます。

しょしんしゃ

「アイコン」左配置です。（L1）

せんせい

「アイコン」の右配置です。（R1）

もうそう左

「妄想吹き出し」左配置です。（L2）

もうそう右

「妄想吹き出し」右配置です。 （R2）

さんぷる1

赤色と緑色とリンクとフォントサイズ（18pt）

さんぷる2

赤色と緑色とリンク（別タブ）とフォントサイズ（18pt）

[speech_bubble type="ln" subtype="L1" icon="KOF14k'.jpg" name="しょしんしゃ"]「アイコン」左配置です。（L1）[/speech_bubble]

 

[speech_bubble type="ln" subtype="R1" icon="KOF14maxima.jpg" name="せんせい"]「アイコン」の右配置です。（R1）[/speech_bubble]

 

[speech_bubble type="ln" subtype="L2" icon="KOF14kula.jpg" name="もうそう左"]「妄想吹き出し」左配置です。（L2）[/speech_bubble]

 

[speech_bubble type="ln" subtype="R2" icon="KOF14athena.jpg" name="もうそう右"]「妄想吹き出し」右配置です。（R2） [/speech_bubble]

⑥「ln-flat」

同じく、アイコンの面取りなし。　吹き出しの上にアイコン名が来ます。

しょしんしゃ

「アイコン」左配置です。（L1）

せんせい

「アイコン」の右配置です。（R1）

もうそう左

「妄想吹き出し」左配置です。（L2）

もうそう右

「妄想吹き出し」右配置です。（R2）

さんぷる1

赤色と緑色とリンクとフォントサイズ（18pt）

さんぷる2

赤色と緑色とリンク（別タブ）とフォントサイズ（18pt）

[speech_bubble type="ln-flat" subtype="L1" icon="KOF14k'.jpg" name="しょしんしゃ"]「アイコン」左配置です。（L1）[/speech_bubble]

 

[speech_bubble type="ln-flat" subtype="R1" icon="KOF14maxima.jpg" name="せんせい"]「アイコン」の右配置です。（R1）[/speech_bubble]

 

[speech_bubble type="ln-flat" subtype="L2" icon="KOF14kula.jpg" name="もうそう左"]「妄想吹き出し」左配置です。（L2）[/speech_bubble]

 

[speech_bubble type="ln-flat" subtype="R2" icon="KOF14athena.jpg" name="もうそう右"]「妄想吹き出し」右配置です。（R2） [/speech_bubble]

⑦「pink」

ピンク。

しょしんしゃ

「アイコン」左配置です。（L1）

せんせい

「アイコン」の右配置です。（R1）

もうそう左

「妄想吹き出し」左配置です。（L2）

もうそう右

「妄想吹き出し」右配置です。（R2）

さんぷる1

赤色と緑色とリンクとフォントサイズ（18pt）

さんぷる2

赤色と緑色とリンク（別タブ）とフォントサイズ（18pt）

[speech_bubble type="pink" subtype="L1" icon="KOF14k'.jpg" name="しょしんしゃ"]「アイコン」左配置です。（L1）[/speech_bubble]

 

[speech_bubble type="pink" subtype="R1" icon="KOF14maxima.jpg" name="せんせい"]「アイコン」の右配置です。（R1）[/speech_bubble]

 

[speech_bubble type="pink" subtype="L2" icon="KOF14kula.jpg" name="もうそう左"]「妄想吹き出し」左配置です。（L2）[/speech_bubble]

 

[speech_bubble type="pink" subtype="R2" icon="KOF14athena.jpg" name="もうそう右"]「妄想吹き出し」右配置です。（R2） [/speech_bubble]

⑧「rtail」

ブルー？

しょしんしゃ

「アイコン」左配置です。（L1）

せんせい

「アイコン」の右配置です。（R1）

もうそう左

「妄想吹き出し」左配置です。（L2）

もうそう右

「「妄想吹き出し」右配置です。（R2）

さんぷる1

赤色と緑色とリンクとフォントサイズ（18pt）

さんぷる2

赤色と緑色とリンク（別タブ）とフォントサイズ（18pt）

[speech_bubble type="rtail" subtype="L1" icon="KOF14k'.jpg" name="しょしんしゃ"]「アイコン」左配置です。（L1）[/speech_bubble]

 

[speech_bubble type="rtail" subtype="R1" icon="KOF14maxima.jpg" name="せんせい"]「アイコン」の右配置です。（R1）[/speech_bubble]

 

[speech_bubble type="rtail" subtype="L2" icon="KOF14kula.jpg" name="もうそう左"]「妄想吹き出し」左配置です。（L2）[/speech_bubble]

 

[speech_bubble type="rtail" subtype="R2" icon="KOF14athena.jpg" name="もうそう右"]「「妄想吹き出し」右配置です。（R2） [/speech_bubble]

⑨「think」

妄想専用吹き出し。

この吹き出しに妄想コード（「L2」「R2」）を突っ込むと、「吹き出しの色」が変わるのがポイントです。

しょしんしゃ

「アイコン」左配置です。（L1）

せんせい

「アイコン」の右配置です。（R1）

もうそう左

「妄想吹き出し」左配置です。（L2）

もうそう右

「妄想吹き出し」右配置です。（R2）

さんぷる1

赤色と緑色とリンクとフォントサイズ（18pt）

さんぷる2

赤色と緑色とリンク（別タブ）とフォントサイズ（18pt）

[speech_bubble type="think" subtype="L1" icon="KOF14k'.jpg" name="しょしんしゃ"]「アイコン」左配置です。（L1）[/speech_bubble]

 

[speech_bubble type="think" subtype="R1" icon="KOF14maxima.jpg" name="せんせい"]「アイコン」の右配置です。（R1）[/speech_bubble]

 

[speech_bubble type="think" subtype="L2" icon="KOF14kula.jpg" name="もうそう左"]「妄想吹き出し」左配置です。（L2）[/speech_bubble]

 

[speech_bubble type="think" subtype="R2" icon="KOF14athena.jpg" name="もうそう右"]「妄想吹き出し」右配置です。（R2） [/speech_bubble]

全9種。　合計36パターン。　おわり(^o^)

吹き出しのパターンと、アイコンのキャラクターの組み合わせで、色々出来るんじゃないかと思います。

「AddQuicktag」プラグインを使おう

「Speech bubble (スピーチバブル)」を使うなら、「AddQuicktag（アドクイックタグ）」プラグインは、ほぼ必須。

しょしんしゃ

吹き出しの設定をしておけば、後は記事内に貼り付けるだけですね。

毎回やるのは、少し面倒ですが・・・。

何か良い手は無いのですか？

せんせい

はい、【AddQuicktag】というプラグインを使うと解決します。

こちらのプラグインを導入していただくと、劇的に「Speech bubble (ふきだしプラグイン)」を使いやすくする事が出来ます。

しょしんしゃ

マジすか。

せんせい

具体的なやり方としては、最初に「吹き出しのコード」を「AddQuicktag」に登録します。　そうすれば、記事の編集画面から「登録した吹き出しのコード」を、すぐに呼び出して使うことが出来ます。

一度、登録さえしてしまえば、吹き出し機能を使う時の作業が楽になります。

吹き出し内のセリフを入力して、登録した吹き出しコードを呼び出すだけになりますから。

しょしんしゃ

すごい。（説明の長さが）

【AddQuicktag】については、次の記事で＼(^o^)／

↓

関連記事：『WordPress』 ショートコードとかの面倒な入力とかが楽になるプラグイン【AddQuicktag】

『WordPress』 ショートコードとかの面倒な入力とかが楽になるプラグイン【AddQuicktag】

2016.05.27

ぶっちゃけ、プラグイン入れるよりも、「吹き出し機能が標準装備されてるテンプレート」を装備した方が早いんです。

アルバトロスの使い方。吹き出し機能がショートコードで簡単に使えるぞ！

2016.07.03

関連記事：ショートコードを無効化！投稿記事にショートコードだけを表示する方法

よしぼっち

ゲームと漫画が大好きな30代です。

熱しやすく冷めやすいので、ブログは気まぐれ更新です。

発達障害を味方につけて、ネットでご飯を食べています。

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

お問い合わせこちら→ お問い合わせ

メールマガジンはこちら→ メールマガジン

LINE@始めました＼(^o^)／