《WordPress》LINEのような会話形式の吹き出しを入れるプラグイン


しゃぼん玉 女性

WordPressの記事に吹き出しを入れてみたいと思ったことはありませんか?

こんなLINEみたいな会話形式のやつです↓

LINE 吹き出し

文章の中に適度に入れてやると記事全体がとても読みやすくなります。

初めてサイトを訪れた人はまず「ぱっと見」で興味のある記事かどうかを判断します。

なので関連する画像や吹き出しを効果的に配置することで

興味を持ってもらえる確率も上がります。

吹き出しを入れる方法

さてこの吹き出しですが、

実はとても簡単に記事の中に挿入することができます。

難しそうと思った人もいるかもしれませんが、

プラグインを入れるだけでこの機能は実装することができます。

「Speech bubble」をインストールしてみよう

WordPress管理画面の左メニューから

プラグイン  >  新規追加をクリックします。

Speech bubble」で検索すると出てきます。

今すぐインストール」ボタンをクリックするとインストールが始まります。

Speech bubble 新規追加

インストールはすぐに終わります。

終わったら「有効化」をクリックします。

これでプラグインが使える状態になります。

Speech bubbleプラグインの使い方

初期設定などは特にありません。

投稿画面でショートコードを書くことですぐに吹き出しを使うことができます。

ビジュアルモードとテキストモードのどちらでも利用可能です。

WordPress ビジュアルモードとテキストモードの切り替え

まずはとりあえず使ってみましょう。

以下のコードをコピペしてみてください。

こんな感じで表示されます↓

A さん
こんにちは!
B さん
あなた誰ですか?

基本的にはこのようにコードを貼り付けるだけで会話風吹き出しを表示できます。

とても簡単ですね。

では次にセリフや画像などを設定する方法を見ていきましょう。

セリフの変更

Aさんのセリフは●●●●●の部分を変更、同じくBさんのセリフは△△△△△の部分を変更することで自由に書き換えることができます。

吹き出し内で改行したい場合は普通に改行すればOKです。

そのまま反映されます。

キャラ(アイコン画像)の名前を変更

これも簡単。

name=”A さん“ name=”B さん の部分。

A さん」「B さん」と書かれている部分を書き換えます。

好きな名前に変更できます。

吹き出しの種類(デザイン)を変更

なんと9種類ものデザインが用意されています。

これだけ至れり尽くせりで無料なのは素晴らしいですね。

いろいろ使ってみて自分のサイトに合ったものを選ぶといいでしょう。

type=”drop”】 と書かれている部分を変更すると吹き出しの種類を変えることができます。

9種類の吹き出しは、

drop・std・ fb・ fb-flat・ln・ ln-flat・ pink・ rtail・ think

とありデフォルトはdropになっています。

ちなみにそれぞれの吹き出しのデザインは以下のような表示になります↓

drop

あつシゲ
これはdropです。

通りがかりの猫
水滴な感じがいいですね。

std

あつシゲ
これはstdです。

通りがかりの猫
とてもシンプルですね。

fb

あつシゲ
これはfb、FaceBook風の吹き出しです。

通りがかりの猫
メッセンジャーと同じ外観というわけですね。

fb-flat

あつシゲ
これはfb-flatです。

通りがかりの猫
fbをフラットな感じにしてあります。

ln

あつシゲ
LINE風の吹き出しです。

通りがかりの猫
なるほど、LINEの略だったのか!

短縮しすぎてわからんかった。

ln-flat

あつシゲ
これはln-flatです。

通りがかりの猫
lnをフラットな感じにしてあります。

pink

あつシゲ
これはpink、文字通りピンク色の吹き出しです。

色が違うだけでこんなに印象が変わります。


K子さん
女性向けのブログなどにちょうどいいデザインですね。

rtail

あつシゲ
こういう色使いの吹き出しもあります。

通りがかりの猫
綺麗なエメラルとグリーンの吹き出しです。

think

あつシゲ
これはthink。文字通り、会話ではなく頭の中で考えている事を表現できる吹き出し。

K子さん
使い分けるとすごく便利だなぁ…

アイコン画像の変更方法

デフォルトの設定ではシンプルなアイコンになっていますが、自分で画像を用意することで好きなキャラを表示させることができます。

Before

A さん
こんにちは!
B さん
あなた誰ですか?

After

K子さん
こんにちは!
通りがかりの猫
あなた誰ですか?

手順1 画像を用意する

自分で顔アイコンとなる画像を作るか、もしくは素材サイトなどからダウンロードして準備します。

jpg, png, gif, svg, tifなどのファイル形式が使用できます。

かわいいアイコンを手取り早く用意したいという場合は、

いらすとや」を活用すると良いかと思います。

無料で利用できます。

ちなみに画像の大きさはプラグイン使用時に自動で調整されますので特に考える必要はありません。

手順2 画像をアップロードする

お使いのサーバーにFTPで接続します。

WordPressのフォルダの中の「speech-bubble」の中の「img」フォルダを探します。

エックスサーバーの場合ですと場所はこのようになります↓

自分のドメイン>public_html>wp-content>plugins>speech-bubble>img

先ほど用意した画像をドラッグ&ドロップでアップロードします。

Speech Bubble アイコン画像アップロード

これでいつでもアイコン画像使用できる状態になります。

手順3 アップロードしたアイコン画像を使用する

ショートコードを貼り付ける時に【icon=” ○○.jpg“】の部分に、先ほどアップロードしたファイル名を指定するとその画像が表示されるようになります。

※画像サイズは自動的に調整されますのでサイズ変更しなくても大丈夫です。

アイコン画像の向きと吹き出しのしっぽの形を変更

アイコン画像の位置を左にするか右にするかは 「 subtype=” ” 」の部分で変更します。

また、吹き出しのしっぽの形も同じく「 subtype=” ” 」の部分で変更できます。

L1 → 人物は左側、吹き出しのしっぽは「話す」感じに

あつシゲ
subtype=”L1″にしました。 

K子さん
アイコン画像が左側にきます。

L2 → 人物は左側、吹き出しのしっぽは「考える」感じに

あつシゲ
今度はsubtype=”L2″にしました。 

K子さん
考えている感じを表現できます。

R1 → 人物は右側、吹き出しのしっぽは「話す」感じに

あつシゲ
subtypeを”R1″にしました。

通りがかりの猫
人物は右に表示されます。

R2 → 人物は右側、吹き出しのしっぽは「考える」感じに

あつシゲ
subtypeを”R2″にしました。

通りがかりの猫
考えている感じになる。

キャラを増やせばより個性的に

アイコン画像を色々使い分けることで豊かな表現が可能になります。

あなたのサイトに合わせてかわいいアイコン画像やカッコイイ画像を使用すると良いでしょう。

SEO的には

SEO的な部分にどう作用するか気になる人もいるでしょう。

ですが心配いりません。

吹き出し内の文字列はテキストなので

ちゃんとコンテンツとしてSEO的に良い働きをしてくれます。

同じような機能が実装されているWPテーマもある

使用するWPテーマによっては、これと同じような機能が最初から実装されている場合があります。

なのでスティンガーProやアフィンガーなどそういったテーマを使う場合はSpeech Bubbleプラグインを使用する必要はありません。

まとめ

いかがでしたでしょうか?

このプラグインを使うとかなり多彩な表現が可能になります。

とても便利なので活用されることをおすすめします。

ではまた!

スポンサーリンク
スポンサードリンク
スポンサードリンク

\ 役に立ったらシェアをお願いします /

\ フォローすると最新情報が届きます /

おすすめ記事

おすすめ記事



ブログランキングに参加しています。

ブログランキングに参加しています。


にほんブログ村 小遣いブログ ネットビジネスへ
スポンサーリンク
スポンサーリンク
スポンサードリンク