新WordPressテーマ「THE THOR(ザ・トール)」へ改装完了!
Speech Bubble

WordPessプラグインで吹き出しを入れる【Speech Bubble】が楽しすぎ!

ブログサイトを運営していると、記事を書いていてもいつも画像と文字ばかりで、何か画面の見た目がのっぺりというか、インパクトが足りないなぁって感じたことはありませんか?

そこで、WordPressの吹き出しプラグインを使ってキャラクター同士を会話しているみたいに演出して、単調な記事に変化をつけることで、閲覧者に飽きさせず楽しく読んでもらいましょう。

タケ坊
タケ坊
僕のblogでも使っているこの会話風な吹き出しは有料テーマ「ストーク」固有のツールだけど、テーマの機能に頼らないで簡単に吹き出しがつけれるプラグインってあるのかな?
柚子
柚子
うん、Speech Bubbleってプラグインがあれば、色々な吹き出し効果を使って他とはちょっと違ったコンテンツが作れるよ!
2018年12月
テーマを「ストーク」から「THE THOR(ザ・トール)」に変更しました。

Speech Bubbleとは?

Speech Bubble(スピーチバブル)とは、CSSの知識がなくても記事の本文中にキャラクターが会話をしているような見た目を作ることができるワードプレスのプラグインです。

文字や画像だけの物足りない記事にちょっとしたアクセントをつけるのに役立つプラグインで、サイト訪問者にも記事を読みやすくさせるカスタマイズが簡単にできるという利点があります

柚子
柚子
文章を書くのが苦手な人でも、会話形式なら書きやすいんじゃない?

Speech Bubbleのインストール

Speech BubbleのインストールはWordPress管理画面のメニュー⇒プラグイン新規追加から簡単にインストールできます。

柚子
柚子
プラグインのインストール方法はこちらの記事を参考にしてね!
関連記事

タケ坊 今回はWordPressの基本の1つ、プラグインのインストール方法について話しましょうか。 柚子 そーだね!ところで、そもそもプラグインが分からないって人はいないかな? タケ坊 […]

WordPressプラグインのインストール方法
柚子
柚子
プラグインをインストールしたら【有効化】を忘れないでね!

 

赤枠のプラグインをインストールして有効化します。

Speech Bubbleインストール画面

 

または、下記のサイトからダウンロードしてアップロードします。

WordPress.org公式サイト

WordPress.orgダウンロード画面

Speech Bubbleの初期設定

Speech Bubbleじたいの設定は特にありません。インストールして有効化したら、そのまますぐ記事に吹き出しを入れることができます。

ここでの初期設定とは、Speech Bubbleを便利に使うための設定です。

Speech Bubbleは、記事本文にショートコードを記入して吹き出しを入れるため、使うたびにショートコードを記入しなければいけません。

これがけっこう面倒くさい作業なので、それを軽減するためAddQuicktagというプラグインを利用します。

このプラグインは、ショートコードを登録してクリック操作だけでSpeech Bubbleの吹き出しを記事に入れることができる便利なプラグインです。

AddQuicktagについては、こちらの記事で書いてますので、インストールしておいてください。

関連記事

タケ坊 今回は、WordPressで記事を書く時に普段よく使うHTMLコードや、挨拶などの定型文を簡単に記事に挿入できるプラグイン【AddQuicktag】について書いていきます。 柚子 この【AddQui[…]

AddQuicktag

アイコン画像を手に入れよう

次はアイコン画像を登録しましょう。

デフォルトのアイコンは

テストサイトのデモ画面

シルエット状態でちょっと物足りないですよね。

ということで、このアイコンを変更しちゃいましょう!

アイコン画像はGoogleなどのweb上で探せばたくさん出てきますし、ご自分の顔写真を自由にカスタムして作っても良いので、今回はここでは詳しく説明しません。

ただ僕がよく使うサイトは、イラストACというサイトで無料でたくさんのイラストが取り放題、しかも商用利用が可能ということで、かなりお世話になっています。

⇒⇒イラストACはイラストが無料!商用利用もOK!

アイコン画像をサーバーにアップ

アイコンの変更方法は、FTPソフトを使ってサーバーにアクセスするので、FTPソフトを持っていない人は今後必要になるので導入しましょう。

僕がよく使っているのは「FileZilla(ファイルジラ)というFTPソフトです。無料ソフトなのに多機能で使いやすいのでオススメです。

柚子
柚子
FileZilla(ファイルジラ)については、こちらで記事にしてますので参考にどうぞ。

関連記事

先日、このブログでWordPressプラグイン【Speech Bubble】についての記事を書いている時、Speech Bubbleを使う際にサーバーにアクセスする必要があると書きました。 しかし今まで、FTPソフトについてちゃんと触[…]

FileZilla(ファイルジラ)
 

それではアイコン画像をサーバーにアップロードしましょう。

まずは使用しているサーバーにアクセスします。

例として、FileZilla(ファイルジラ)でエックスサーバーにアクセスします。

あなたのドメイン⇒public_html⇒wp-content⇒plugins⇒speech-bubble⇒img

このimgフォルダ内にあなたが用意したアイコンの画像(jpg, png, gif, svg, tif)をアップロードして画像の準備は完了です。
Speech Bubbleアイコンアップロード

 

画像は僕のサイトのサブドメイン(testsite1)内のフォルダーなので多少あなたの画面と違うかもしれません

AddQuicktagにSpeech Bubbleのショートコードを登録しよう

このままショートコードを使用すれば吹き出しが付けれるのですが、いちいちショートコードを記述するのは時間がかかるので、AddQuicktagという便利なプラグインを利用して時短しましょう。

AddQuicktagへのショートコード登録方法の手順はこちらで書いてあるので分からない人は参考にしてくださいね。

関連記事

先日、このブログでWordPressプラグイン【Speech Bubble】についての記事を書いている時、Speech Bubbleを使う際にサーバーにアクセスする必要があると書きました。 しかし今まで、FTPソフトについてちゃんと触[…]

FileZilla(ファイルジラ)

Speech Bubbleのショートコードを説明

Speech Bubbleのショートコードの説明をします。

下のショートコードを例にしてみてみます。

[speech_bubble type=”drop”subtype=”L1″icon=”1.jpg”name=”キャラ名”]セリフ[/speech_bubble]
  • 「type=”drop“」の赤字部分が吹き出しの種類になります。ここでLINE風にしたりFacebook風にしたりします。
  • 「subtype=”L1“」は吹き出しの位置をR(右側)にするかL(左側)にするか選びます。
  • 「icon=”1.jpg“」は先ほど登録したアイコン画像のファイル名を指定してあげます。
  • 「name=”キャラ名“」は任意のキャラ名を入れます。
  • セリフ」はセリフを入力します。
柚子
柚子
ちなみにここでのセリフはテキスト扱いになるから、SEO的にも良いね!

吹き出しの種類とショートコード

吹き出しデザインの種類は今時のSNS風なものを含めて9種類ありますので、好きなタイプを使ってください。

1 drop

デフォルト状態の吹き出しです。

[speech_bubble type="drop" subtype="L1" icon="take1.png" name="タケ坊"]柚子は可愛いな~[/speech_bubble]
[speech_bubble type="drop" subtype="R1" icon="yuzu.jpg" name="柚子"]まーな![/speech_bubble]

Speech Bubbledrop

2 std

シンプルな吹き出しですね。

[speech_bubble type="std" subtype="L1" icon="take1.png" name="タケ坊"]柚子は可愛いな~[/speech_bubble]
[speech_bubble type="std" subtype="R1" icon="yuzu.jpg" name="柚子"]まーな![/speech_bubble]

Speech Bubblestd

3 rtail

これもシンプルですが、吹き出しのところがシッポみたくなってますね。

[speech_bubble type="rtail" subtype="L1" icon="take1.png" name="タケ坊"]柚子は可愛いな~[/speech_bubble]
[speech_bubble type="rtail" subtype="R1" icon="yuzu.jpg" name="柚子"]まーな![/speech_bubble]

Speech Bubblertail

4 pink

文字通りピンクです。女の子向けの会話にピッタリですが、僕が使うことはないでしょう。

[speech_bubble type="pink" subtype="L1" icon="take1.png" name="タケ坊"]柚子は可愛いな~[/speech_bubble]
[speech_bubble type="pink" subtype="R1" icon="yuzu.jpg" name="柚子"]まーな![/speech_bubble]

Speech Bubblepink

5 fb

Facebookのメッセージ風吹き出しです。グラデーションになってますね。

[speech_bubble type="fb" subtype="L1" icon="take1.png" name="タケ坊"]柚子は可愛いな~[/speech_bubble]
[speech_bubble type="fb" subtype="R1" icon="yuzu.jpg" name="柚子"]まーな![/speech_bubble]

Speech Bubblefb

6 fb-flat

これはFacebookのメッセンジャー風のバージョンです。

[speech_bubble type="fb-flat" subtype="L1" icon="take1.png" name="タケ坊"]柚子は可愛いな~[/speech_bubble]
[speech_bubble type="fb-flat" subtype="R1" icon="yuzu.jpg" name="柚子"]まーな![/speech_bubble]

fb-flat

7 ln

これは今風なLINEの吹き出しで、僕がこれが一番気に入ってます。スマホでも見慣れているので記事も読みやすいです。

[speech_bubble type="ln" subtype="L1" icon="take1.png" name="タケ坊"]柚子は可愛いな~[/speech_bubble]
[speech_bubble type="ln" subtype="R1" icon="yuzu.jpg" name="柚子"]まーな![/speech_bubble]

Speech Bubbleln

8 ln-flat

LINE風のフラットバージョンです。

[speech_bubble type="ln-flat" subtype="L1" icon="take1.png" name="タケ坊"]柚子は可愛いな~[/speech_bubble]
[speech_bubble type="ln-flat" subtype="R1" icon="yuzu.jpg" name="柚子"]まーな![/speech_bubble]

Speech Bubbleln-flat

考えてる風

これはショートコードの「subtype=”L1“」の数字部分を「2」に変更すると考えてる風の吹き出しになります。

「ln-flat」を考えてる風にする場合

[speech_bubble type="ln-flat" subtype="L2" icon="take1.png" name="タケ坊"]柚子は可愛いな~[/speech_bubble]
[speech_bubble type="ln-flat" subtype="R2" icon="yuzu.jpg" name="柚子"]まーな![/speech_bubble]

Speech Bubblethink

 

柚子
柚子
アイコン画像をいくつかアップロードしておけば、大勢で会話しているようにもできるね!

Speech Bubbleを使ってみよう

使い方は簡単です。ビジュアルエディタでもテキストエディタでもショートコードを張り付ければ反映されます。

AddQuicktagを使えば呼び出すだけでなので、インストールしておきましょう。

ビジュアルエディタ画面

 

上の画像はビジュアルエディタです。

下の画像はテキストエディタです。こちらは上にボタンが並んでいるので分かりやすいですね。

あまりボタンが多いと見難いので、使わないボタンは削除しておいた方が良いでしょう。

Speech Bubbleテキストエディタ

 

AddQuicktagを使う場合は、吹き出しにしたい文章を選択して、ドロップダウンされる一覧から選ぶだけです。

柚子
柚子
ちなみに、ビジュアルエディタでは吹き出し状態は見れずショートコードがそのまま表示されるので、プレビュー画面で確認しましょう。

まとめ

WordPressプラグイン【Speech Bubble(スピーチバブル)】のまとめです。

  • Speech Bubble(スピーチバブル)は会話風の吹き出しが作れる
  • ショートコードを使って8+1種類の吹き出しが作れる
  • WordPressプラグイン【AddQuicktag】を使えば簡単にコードを呼び出せる
  • アイコン画像やキャラ名も変更可能
タケ坊
タケ坊
日々のブログの更新で、文字と画像だけの記事で味気ないと感じたら、こんなプラグインを使ってみるのも面白いですよ。
柚子
柚子
最初の設定が大変だけど、ブログのアクセントになるので試してみてね!

おまけ

AddQuicktagにショートコードを登録する作業って地味に面倒じゃないですか?

なので、この記事を読んでくれた人にSpeech Bubbleのショートコードを登録したAddQuicktagのファイルをプレゼントします。

興味のある人は「問い合わせ」から連絡ください。24時間以内に返事します。

Speech Bubble
最新情報をチェックしよう!