ワードプレスのブログ、サイトに吹き出し会話形式の表示ができるプラグインSpeech Bubble!

スポンサーリンク

私はワードプレスでこのブログを運営しているのですが、吹き出し形式の表示ができないのが残念だと思っていました。

そうしたら、最近プラグインで拭き出し会話形式の表示が簡単にできることがわかり、設定も簡単だったのでお勧めしたいと思います。

使うとブログのオリジナリティが上がるんじゃないかと思いますよ

吹き出し会話形式の表示があるブログはオリジナリティが高く魅力的だ!

他の人のブログを見ているとたまに、吹き出し会話形式の表示をしているブログがあるじゃないですか

あれって文章や、画像だけのブログが多い中でオリジナリティがあってめっちゃ魅力的だなと前から思っていました。

じょんのび
こんな感じかな?

これこれ!この拭き出し会話形式の表示があると読者の注意を引きやすく、その後の文章を読んでもらえる可能性が高まります。

もちろん、人気ブロガーの多くは文章力やコンテンツ力、本人の魅力で文章と画像だけで魅力あるブログを作っています。

ただ、アクセスの少ない弱小ブロガーだったら、使えるものは使って読者の滞在率、アクセスアップを図りたいのが正直な気持ちです。

CSSでカスタマイズして作れないかと色々試行錯誤してみたんですが、私の知識ではうまくいかなくてあきらめていました。

CSSは前から空いた時間にコツコツ学んでいるのですが、実際にコードを書いてみると自分が思っているように表示されなくて、難しいなと感じています。

表示のズレを直すのにも慣れないと、結構な時間がかかるし、時間をかけても自分の現在のスキルでは納得できる所まで行かないことも多いです。

そんな時たまたま見ていたブログにプラグインを導入することで吹き出し会話形式の表示が実現できると紹介されていましたので、試しにインストールしてみました

speech dubble プラグインの導入

ブログ管理画面のプラグイン新規追加を呼び出し、peech dubbleと入力して検索します

speech bubble

インストールしたら有効にするだけで特にプラグインの設定はいらないです。楽ですね!

後は吹き出し会話形式の表示を載せたい所に定型のソースコードを貼り付ければ、表示されます

ソースコードの貼付け

見やすいようにビジュアルエディタの方で表示していますが、実際はテキストエディタに貼り付けてください

ソースコードの説明

こちらのソースコードを入力すると、下のように表示されます

①〜⑤を変更することで表示形式を変えることができます

  1. 9種の吹き出しがあり、コードを変えることで表示を変更できます
  2. 画像の表示場所を左右に変更できる
  3. 画像を変更できる
  4. 名前を変更できる
  5. コメントを入力

1、吹き出しの変更方法

吹き出しコードは drop , std , fb , fb-flat , ln , ln-flat, pink , rtail , think  の9種類がありコードを変更することで吹き出しのデザインを変更できます

drop

じょんのび
おっす!

じょんのび
こんにちは!

std

じょんのび
おっす!

じょんのび
こんにちは!

fb

じょんのび
おっす!

じょんのび
こんにちは!

fb-flat

じょんのび
おっす!

じょんのび
こんにちは!

ln

じょんのび
おっす!

じょんのび
こんにちは!

ln-flat

じょんのび
おっす!

じょんのび
こんにちは!

pink

じょんのび
おっす!

じょんのび
こんにちは!

rtail

じょんのび
おっす!

じょんのび
こんにちは!

think

じょんのび
おっす!

じょんのび
こんにちは!

コードによって名前の表示位置が画像下になって見づらくなってしまうのが残念ですね

それでも色々な吹き出しが選べるのは表現方法が増えていいです

2、画像の表示場所を変更できる

2の場所を変更することで左右に表示位置を変更できます。

  • L1 左に通常吹き出し
  • L2 左に思考の吹き出し
  • R1 右に通常吹き出し
  • R2 右に思考の吹き出し

L2、R2で思考の吹き出しにする場合は名前の位置は吹き出しの上部になります。thinkで名前の表示位置が画像下になるのが気になるなら、こちらを変更したほうがいいです

3、画像を変更できる

初期設定ではspeech bubbleプラグインに入っている画像が表示されます

オリジナルの画像を入れたい場合は、FTPソフトを使用して自分のブログのフォルダ内にあるspeech bubbleプラグインフォルダ内に画像をアップロードする必要があります

FTPソフトは無料でダウンロードできるものがいろいろありますので、自分のパソコンに入っていない場合はダウンロードしてください

ちなみに私はFFFTPを使用しています

FTPソフトから自分のサーバーに接続して、自分のブログのフォルダを選択します

自分のブログのURLフォルダ ➡public_html➡wp-content➡plugins➡speech-bubble

と開いていきspeech bubbleフォルダ内に画像をドラック、コピー・貼付け、FTPでパソコン操作画面から画像を選択➡ダウンロード どれでもいいのでフォルダ内に画像を入れてください

フォルダ内に画像データがあれば画像の設定は完了です

画像のサイズはプラグインの方で表示サイズに変更してくれるので、サイズ変更の必要はありませんが、あまりに大きいサイズだとデータ量が多くなるので編集ソフトでサイズ変更してみいいかもしれません

4、名前の変更

名前を自分の好きなように変更できます

5、コメント入力

コメントを入力することができます

まとめ

色々なブログをみていると、たまに会話吹き出しを使っているブログ記事を見ることがあって、「これどうやってやってるのかな」と疑問に思っていたのですが、こんな便利なプラグインがあったんですね

ブログ記事は文章だけだと見づらいので、画像を挿入することが多いのですが、それはどのブロガーの人もやっているので差別化が難しいんですよね

そこで、記事の中に会話吹き出しを使えばアクセントになって文章を読んでもらえるのではないかと思います

プラグインの設定も難しくなく簡単に利用できるので、表現方法の一つとして取り入れてみたらどうでしょうか?

FTPでの画像挿入がFTPソフトを使ったことがない人にとっては敷居が高いかもしれませんが、いろんな方がspeech bubble1プラグインの設定の方法を解説しているので、検索してみてください