かわいいふきだしプラグイン「SpeechBubble」の設定方法

2018年7月8日

ふきだし|アフィリエイト主婦

WordPressで書かれたブログを見ていて、こんなの見たことありませんか?

ネコ
こんなふきだしです(*´▽`*)

このブログでも使っていますが、このふきだしは「WordPressのプラグイン」で簡単にできます!

WordPressと言えば、非常に多くのプラグインがあって、多彩な機能を追加できるのも魅力のひとつ。
このふきだしプラグインもいくつか種類があります。

そのなかでも私が使っているふきだしプラグインが「SpeechBubble」です。
簡単に設定できるので、ぜひぜひ使ってみてください。

ふきだしプラグインって何?なぜ必要なの?

ふきだしプラグインとは、ブログの記事中にアイコンがしゃべっているようなふきだしを表示させることができるプラグインです。

記事の中にふきだしを表示しているブログはとても多いですよね。
私もいろんな人のブログを見ていて、「おっ、このふきだしが出るやつかわいいな。私もやってみたい!」ということで導入したというミーハーな理由です。

ネコ
なにしろかわいいです!

しかし、このふきだしプラグインは、かわいいだけじゃないんです。
ちゃんと導入した方がいい理由があります。

それは、ブログ記事内の「箸休め」的存在になるからです。

ユーザーは自分が欲しい情報を読みに来ているものの、文字ばかりだと疲れて読むのをやめてしまいます。
自分もユーザー側になってみるとそうですよね。

そこで画像をはさんだりするわけですが、画像ばっかりはさむとかえって読みづらい…。
そこで、登場するのがふきだしプラグインです。

ふきだしプラグインには、集中して文字を読んでいるユーザーの気持ちをふっとやわらげる役目があります。

なので、私は「文字ばっかり詰まっているな」と感じるところにふきだしを挿入することにしています。
そうすることで記事内に緩急がついて、メリハリがつきます。

ネコ
話題を切り替えたいときなどにも使えますね

とても便利な機能です!

「Speech Bubble」のインストールのしかた

では、Speech Bubbleのインストールをしましょう!
インストール方法は他のプラグインと同じです。

WordPressの左メニューから、

プラグイン > 新規追加

左上の検索窓に「Speech Bubble」と入力。

speech bubble|アフィリエイト主婦

「Speech Bubble(ふきだしプラグイン)」を探して、「今すぐインストール」をクリック。

speech bubble|アフィリエイト主婦

「有効化」して完了です。
その他の設定は特に必要ありません。早速記事内にふきだしを表示してみましょう!

「Speech Bubble」の使い方

Speech Bubbleの使い方はとても簡単です。
WordPressの記事を書くときに、テキストモードにしてショートコードといわれるテキストを貼り付けるだけです。

では、試しに記事の新規投稿画面を開いて、テキストモードにしてみてください。
そこに、下記のショートコードをコピーして貼り付けます。

[speech_bubble type="std" subtype="L1" icon="1.jpg" name="Aさん" ]こんにちは![/speech_bubble]

プレビューしてみると…。

Aさん
こんにちは!

と、ふきだしが表示されます。
「こんにちは!」の部分のテキストを変えるとセリフを変えられます。

ネコ
簡単ですね!

使い始めるとしょっちゅう使うので、プラグイン「AddQuicktag」などに登録しておいて、ボタン一発で貼り付けられるようにしておくと便利です。

Speech Bubbleには、吹き出しのデザインがいくつかあります。
自分のブログに合ったデザインタイプを選んで設定しましょう!

ふきだしのタイプ

Speech Bubbleで選べる吹き出しのデザインは9個もあります。
どれにしようか迷っちゃいますね。

吹き出しデザインの変更方法も実に簡単です。
ショートコード内の「type=""」のパラメータを変更するだけです。

[speech_bubble type="std" subtype="L1" icon="1.jpg" name="Aさん" ]こんにちは![/speech_bubble]

赤文字部分のテキストを、下記の吹き出しに表示されているテキストに置き換えれば変更できます。
選べる吹き出しは以下のデザインです。

Aさん
std

Aさん
fb

Aさん
fb-flat

Aさん
ln

Aさん
ln-flat

Aさん
pink

Aさん
rtail

Aさん
drop

Aさん
think

ふきだしの位置と形

ふきだしの位置と形も設定することが出来ます。
左側の会話、右側の会話、左側の思考、右側の思考です。

この設定は、「subtype=""」のパラメータを変更すればできます。

[speech_bubble type="std" subtype="L1" icon="1.jpg" name="Aさん" ]こんにちは![/speech_bubble]

赤文字部分のテキストを、下記の吹き出しに表示されているテキストに置き換えれば変更できます。
選べる位置と形は以下のデザインです。

Aさん
L1

Aさん
R1

Aさん
L2

Aさん
R2

アイコン画像の変更

さて、最後に人物アイコンの変更です

ネコ
これがちょっと難関かもしれません…

まずはアイコン画像を準備してください。
自分で描いてもいいし、フリー素材でもいいです。
大きさは小さすぎなければ大丈夫、正方形の画像にしてくださいね。

用意した画像をアップするのですが、WordPressの「メディア」メニューからアップするのではダメです。

用意した画像を吹き出しアイコンに設定するには、決まった場所にアップロードしないといけないのです。
おそらくレンタルサーバーにFTPツールみたいなものが用意されていると思いますので、それを使用してください。

ファイルをアップロードする場所は、

メインディレクトリ > wp-content > plugins > speech-bubble > img

ここです!
私はここでひっかかって、なかなかアイコンを変更できませんでした…。

この場所に画像アイコンをアップロードしたら、後はショートコードのアイコン名を変更するだけです。

この設定は、「icon=""」のパラメータを変更すればできます。

[speech_bubble type="std" subtype="L1" icon="1.jpg" name="Aさん" ]こんにちは![/speech_bubble]

赤文字部分のテキストを、アップロードした画像ファイルのファイル名に置き換えれば変更できます。

あとは「name=""」のパラメータを変えれば名前が表示されるようになります。

ふきだしプラグインを活用しよう!

タブレット|アフィリエイト主婦

Speech Bubbleは設定の仕方さえわかれば簡単にかわいいふきだしが表示できます。

ブログの記事は文章を伝えることが一番大事ですが、いかに読みやすく飽きないように読んでもらうかも大切ですよね。

ふきだしを使って記事を書くとなんとなくそれっぽく見えるので、そういう意味でもおすすめです。
ユーザーってやっぱりそれっぽく格好のついたページを読みたくなるものですしね。

ネコ
せっかくなのでどんどん使っていきましょう!

画像やふきだしをうまく使って、ユーザーにとって読みやすい記事づくりを心掛けたいです。