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

スポンサーリンク
2016-09-04_161640

 

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

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

 

現在、この記事は工事中です。(コードなどが正確ではないかも知れません。[]で囲んであるやつとか。)

 

しょしんしゃ
せんせい、Speech bubble (スピーチバブル)は初心者でも使えるのでしょうか!?
せんせい
もちろん、使えます。 「使いこなせるかどうか」は、あなた次第です。

 

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

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

 

 

目次\(^o^)/

吹き出しはつよい

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

 

 

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

 

マジで楽しすぎワロタwww

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

 

 

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

 

 

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

「挿絵の入ってる小説」と「挿絵の無い小説」どっちが読みたいか?(画像なしの記事)

「挿絵がいっぱい入ってる小説」と「挿絵の少ない小説」どっちがいいか?(画像いっぱいある記事)

 

 

答えは明白ですね。

 

画像はあんまり貼りすぎると、引用的に良くないです。

吹き出しのアイコンとかは、フリーのヤツを使いましょう。

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

 

 

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

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

 

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

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

 

 

↓ WordPressにログインします。

2016-05-25_110055

 

 

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

2016-05-22_180921

 

 

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

2016-05-22_181218

 

 

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

2016-05-22_181454

 

 

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

Speech Bubble

2016-05-22_181654
はおうしょうこうけん
「検索ボタン」がないので、「エンターキーを使わざるを得ない」ですね。

 

 

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

2016-05-22_182018

 

 

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

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

2016-05-22_182156

 

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

お疲れ様でした\(^o^)/

 

 

Speech Bubble(スピーチバブル)を使ってみよう

早速スピーチバブルの味見をしてみましょう。

 

↓ いつもブログを投稿する感じで「投稿」→「新規追加」とクリック。

2016-05-25_113156

 

 

↓ ブログの新規投稿に、コードをコピーして貼り付けてみて下さい。

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

2016-05-25_112627

 

 

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

2016-05-25_114022

 

 

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

 

コミュ障くん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
・・・・・・。

 

 

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

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

 

↓ こいつ。

[https://thedog8.com/827.html#i-18]

 

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

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

 

[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メディアとは、別の場所でアイコン画像を管理出来るので、ある意味では便利です。

 

 

サーバーのプラグインフォルダに画像をアップロードするには、サーバーからアクセスするか、FTPソフトなどでやっていく必要があります。

私は、Xserverを使っています。

Xserverでは、FTPソフトを使わなくても、ファイルマネージャからアクセスできます。

今回は、FTPソフト等は使わずに、「Xserverのファイルマネージャから画像をアップロードする手順」の解説になります。

 

 

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

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

 

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

2016-05-22_191110

 

 

ファイルマネージャーをいじる時は慎重に!最悪の場合、ブログが吹っ飛ぶことがあります。(変な所をイジってセーブしちゃった場合とか)

▼ バックアップを取っておけば、安心です。

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

 

 

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

2016-05-22_191212

 

 

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

2016-05-22_191829

 

 

↓ 「public html」をクリック。

2016-05-22_192106

 

 

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

2016-05-22_192252

 

 

 

↓ 「plugins」をクリック。

2016-05-22_192421

 

 

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

2016-05-22_192556

 

 

↓ 「img」をクリック。

2016-05-22_192758

 

 

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

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

2016-05-22_192905

 

 

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

2016-05-25_150554

 

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

2016-09-05_083914

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

 

 

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

2016-09-04_100444

 

 

 

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

capture_02

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

 

 

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

2016-05-22_193945

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

 

 

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

2016-05-22_194427

 

 

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

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

 

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

オワタくん
\(^o^)/オワタ

 

 

アイコン画像の形

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

 

正方形の時ィ!

2016-09-05_080225

↓ プレビュー。

オワタくん
\(^o^)/オワタ

 

 

横に長い時ィ!

2016-09-05_080235

↓ プレビュー。

オワタくん
\(^o^)/オワタ

 

 

縦に長い時ィ!

2016-09-05_080243

↓ プレビュー。

オワタくん
\(^o^)/オワタ

 

 

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

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

 

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

 

 

↓ 変更前。

オワタくん

 

↓ 変更後。

2016-09-05_081317

 

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

 

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

no name
.png” name=”オワタくん”]\(^o^)/オワタ

 

 

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

半角でも使える記号とかに制限があります。(パソコンのフォルダ名などと同様。)

↓ これらは使えます。

  • ハイフン(半角)『キーボード半角で ” ほ ” を押す「-」』
  • アンダーバー(半角)『キーボード半角でShiftキー ” ろ ” を押す「_」』

 

ですが、たまにハイフンとかは使えないこともあります。(アップしてもサーバーに表示されない)

あまり使わないほうが良いかも。

 

owata020.png ← OK(半角英数字)

-owata020.png ← OK(ハイフン)

_owata020.png ← OK(アンダーバー)

[owata020.png ← NG(半角大カッコ)

(owata020.png ← ??(半角丸カッコ)

 

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

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

 

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

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

 

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

 

 

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

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

 

 

↓ こんな感じに・・・。

2016-09-08_17h24_36

 

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

 

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

 

 

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

2016-09-08_172728

 

 

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

2016-09-08_172859

 

 

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

2016-09-08_173051

 

 

↓ 準備完了です。

2016-09-08_173105

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」をクリック。

2016-05-25_150926

 

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

オワタくん

 

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

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

 

 

アイコン(キャラクター)の名前変更

 

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

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

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

 

 

①「吹き出しの種類」を変更するには①に以下の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から見ても崩れる)

左寄せ

中央揃え

右寄せ

icon_005_yuriicon_038_dinosaurs icon_037_angel

 

 

 

まとめ

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

 

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

 

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

「アイコンの配置」と「妄想吹き出し」の組み合わせは、全部で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]

 

 

「吹き出しの種類」サンプル(全部)

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

 

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

コードも載せておいたので、コピーしてお使い下さい!\(^o^)/

 

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

 

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

[https://thedog8.com/827.html#i-18]

 

 

↓ 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

 

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

 

よしぼっち
ゲームと漫画が大好きな30代です。

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

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

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

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

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

LINE@始めました\(^o^)/

友だち追加
スポンサーリンク

この記事が気に入ったら
いいね!しよう

Twitter で


発達障害の攻略本を無料プレゼント

発達障害の社会不適合者がこの先生き残るための方法をを伝授します\(^o^)/

4 件のコメント

  • コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です