記事の詳細

ブログの中にLINEやFacebookのメッセージみたいに会話風でやり取りしている文章があると変化があることから離脱率やページ滞在時間が伸びる傾向があります。

今回はそんな吹き出しを使った会話が簡単に作ることができるWordPressのプラグイン『Speech Bubble』を紹介したいと思います。

5分もあれば使えるようになる簡単なプラグインなのでぜひお試しあれ!

この投稿を読むとできるようになること

こんな風に吹き出しで会話しているような表現を作れるようになります。
※サンプルは「ポップコーンダイエットブログ」より

【Speech Bubble】でLINE風の会話をブログに挿入する

 

まずはプラグイン【Speech Bubble】をインストール

WordPressのダッシュボードにログインして「プラグイン」「新規追加」を選択します。

WordPressにプラグインをインストール

プラグインの検索に Speech Bubble と入力します。

WordPressプラグイン検索

以下の画像のようにプラグインが見つかりますので、「今すぐインストール」をクリックします。

【Speech Bubble】を検索して見つけましょう

インストール中・・・。ぐるぐる・・・。

WordPressプラグインのインストール中

「有効化」を押せばインストール完了です。

WordPressプラグインを有効化

特に設定はありませんので、インストールはこれにて完了です。

次は使い方を説明していきます。

吹き出しを出したい時はショートコードを貼り付けるだけ

コピペしてWordPressの投稿画面に貼り付けてみてください。

貼り付けるとこんな画面で表示されます。

【Speech Bubble】の標準設定での会話形式

名前を変えてみよう!

以下のショートコードのnameXXXXの部分を変更すると、吹き出しの名前の部分が変更できます。

[speech_bubble type=”drop” subtype=”L1″ icon=”1.jpg” name=”XXXX“] こうやってショートコードを貼り付ければいいんだね [/speech_bubble]

【Speech Bubble】吹き出しの名前を変更する方法

メッセージを変更してみよう!

メッセージを変更する時は以下のXXXXの部分を変更するとメッセージの内容が変わります。

[speech_bubble type=”drop” subtype=”L1″ icon=”1.jpg” name=”テスト1号さん”] XXXX [/speech_bubble]

メッセージを変更してみますね。

こうなります。

【Speech Bubble】メッセージを変更

左右を入れ替える方法は?

吹き出しの位置が左からと、右からのものに設定するのはsubtypeXX部分を L1 にすると左から、 R1 にすると右から吹き出しが出てきます。

[speech_bubble type=”drop” subtype=”XX” icon=”1.jpg” name=”テスト1号さん”] こうやってショートコードを貼り付ければいいんだね [/speech_bubble]

L1ばっかりにしても大丈夫です。

このショートコードだと、こうなります。

【Speech Bubble】両方左からでも大丈夫

画像を変更してみよう!

ちょっと難しくなりますが、吹き出しの画像をデフォルトのものから変更してみましょう。

FTPでサーバに接続して、プラグインがインストールされているディレクトリのimgの中に画像をアップロードします。

【Speech Bubble】画像のアップロード先

こんな感じで2つの画像をアップロードしてみました。

【Speech Bubble】画像追加

アップロードした画像を設定する方法は以下のiconXXXXの部分にアップロードした画像のファイル名を書くだけです。ファイルの種類はjpg、png、gif、svg、tifが対応しているそうです。

[speech_bubble type=”drop” subtype=”L1″ icon=”XXXX” name=”名前”] メッセージ [/speech_bubble]

このようにショートコードを書くと・・・

こうなります。

【Speech Bubble】画像を変更

ポプコかわいいですね!

吹き出しのデザインは全部で9種類

吹き出しの種類も実は変更ができまして、drop、std、fb、fb-flat、ln、ln-flat、pink、rtail、thinkの全部で9種類のコードがあります。

typeXXXXの部分にコード名を書きます。

[speech_bubble type=”XXXX” subtype=”L1″ icon=”1.jpg” name=”名前”] メッセージ [/speech_bubble]

drop:デフォルト

std:スタンダード

fb:フェイスブック風

fb-flat:フェイスブックのフラットデザイン版

ln:LINE風

ln-flat:LINEのフラットデザイン版

pink:ピンクの吹き出し

rtail:水色の吹き出し(rtailってなんだろう?)

think:心の声の吹き出し

Speech Bubbleを使って楽しいブログを作ろう!

今回ご紹介させていただきました【Speech Bubble】を使うと、簡単にマンガ風の会話をブログ内に作ることができてしまいます。

マンガに慣れている日本人は文章よりも、このような吹き出しになっているほうが読みやすく、頭のなかにスッと入ってきやすかったりします。

コンバージョン率の改善にも役立てられると思いますので、ぜひ効果的な使い方をしてみてください。

 

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

The following two tabs change content below.
インクループ株式会社

インクループ株式会社

インクループ株式会社は、データ分析、市場調査に基づく企画立案、コンテンツ制作、運用を通じてお客様の目標を実現する会社です。WEBサイトをもっと活用したい、ECサイトの売上をもっと増やしたいなどのお悩みをお持ちの方はぜひお気軽にお問い合わせください。

ほかの投稿も読んでみませんか?

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

仕事ではパソコンが使いこなせるのが当たり前

相模原市産業会館パソコン教室

AD

ページ上部へ戻る