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

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

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

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

[speech_bubble type=”rtail” subtype=”L1″ icon=”nekoprof.jpg” name=”ネコ”] こんなふきだしです(*´▽`*)[/say]

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

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

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

初心者が入れておくべきおすすめWordPressプラグイン

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

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

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

[speech_bubble type=”rtail” subtype=”L1″ icon=”nekoprof.jpg” name=”ネコ”] なにしろかわいいです![/say]

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

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

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

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

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

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

[speech_bubble type=”rtail” subtype=”L1″ icon=”nekoprof.jpg” name=”ネコ”] 話題を切り替えたいときなどにも使えますね[/say]

とても便利な機能です!

「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さん" ]こんにちは![/say]]

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

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

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

[speech_bubble type=”rtail” subtype=”L1″ icon=”nekoprof.jpg” name=”ネコ”] 簡単ですね![/say]

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

WordPressでタグが簡単に打てるプラグイン「AddQuickTag」が素晴らしい

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

ふきだしのタイプ

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

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

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

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

[speech_bubble type=”std” subtype=”L1″ icon=”1.jpg” name=”Aさん” ]std[/say] [speech_bubble type=”fb” subtype=”L1″ icon=”1.jpg” name=”Aさん” ]fb[/say] [speech_bubble type=”fb-flat” subtype=”L1″ icon=”1.jpg” name=”Aさん” ]fb-flat[/say] [speech_bubble type=”ln” subtype=”L1″ icon=”1.jpg” name=”Aさん” ]ln[/say] [speech_bubble type=”ln-flat” subtype=”L1″ icon=”1.jpg” name=”Aさん” ]ln-flat[/say] [speech_bubble type=”pink” subtype=”L1″ icon=”1.jpg” name=”Aさん” ]pink[/say] [speech_bubble type=”rtail” subtype=”L1″ icon=”1.jpg” name=”Aさん” ]rtail[/say] [speech_bubble type=”drop” subtype=”L1″ icon=”1.jpg” name=”Aさん” ]drop[/say] [speech_bubble type=”think” subtype=”L1″ icon=”1.jpg” name=”Aさん” ]think[/say]

ふきだしの位置と形

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

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

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

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

[speech_bubble type=”std” subtype=”L1″ icon=”1.jpg” name=”Aさん” ]L1[/say] [speech_bubble type=”std” subtype=”R1″ icon=”1.jpg” name=”Aさん” ]R1[/say] [speech_bubble type=”std” subtype=”L2″ icon=”1.jpg” name=”Aさん” ]L2[/say] [speech_bubble type=”std” subtype=”R2″ icon=”1.jpg” name=”Aさん” ]R2[/say]

アイコン画像の変更

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

[speech_bubble type=”rtail” subtype=”L1″ icon=”nekoprof.jpg” name=”ネコ”] これがちょっと難関かもしれません…[/say]

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

[speech_bubble type=”rtail” subtype=”L1″ icon=”nekoprof.jpg” name=”ネコ”] せっかくなのでどんどん使っていきましょう![/say]

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

前の記事

本|アフィリエイト主婦
「アフィリエイトで稼ぐ1年目の教科書」を読んだ感想

次の記事

アフィリエイトブログをやるならTwitterをやろう!
スマホ|アフィリエイト主婦