Speech Bubbleプラグインで会話型の吹き出しデザインを極めよう!

投稿者: | 2018年7月28日

Speech Bubbleプラグインで会話型の吹き出しデザインを表示させる方法をご紹介します。

ワードプレスには本当に様々な機能があるんです。

下記のように、「吹き出し」で会話をしているような表示を見かけることありませんか?

自分のブログでも使ってみたい!と思うことも少なくないはず。

クマ吉
Hello! 今日はいい天気ですね? 

Aki☆
こんにちは☆お洗濯日和ですね。

 

ワードプレス(wordpress)に出会う前までは、HTMLやCSS、画像サイズの変更など色々駆使して・・・色々なことを意識して作ったことを覚えています。時間をかけた割には、見栄えが悪かったりと。

しかし、ワードプレスの「Speech Bubble」とうプラグインツールの存在を知った時、これまでの労力は一体何だったんだろう・・・と感じました。

知らないと、とても高度な技術を使っているような印象を持ちますよね・・。

設定値をちょっとだけ変更するだけで、様々なタイプの吹き出しイメージに変更することができますので、気になる方は是非トライしてみてくださいね。

吹き出しを使用するには、「Speech Bubbleプラグイン」をインストールします。

 


 

Speech Bubbleプラグインのインストール

 

【プラグイン】⇒【新規追加】のページを表示します。

Speech Bubbleでキーワード検索します。

下記の通りプラグインをインストールします。

 

Speech Bubbleプラグインのインストールが完了したら、忘れずに【有効化】ボタンをクリックします。

 


 

Speech Bubbleの使い方

プラグインのインストールが終わったら、下記のコードを記事に記載するともうそれらしい吹き出しが表示できますよ。

<吹き出しのベースとなる記載方法>

記事に下記のコードを記載します。

[speech_bubble type="●●●" subtype="L1" icon="1.jpg" name="A さん"]  やっほー!! [/speech_bubble]
[speech_bubble type="●●●" subtype="R1" icon="2.jpg" name="B さん"] どうしたの?[/speech_bubble]

speech_bubble type=”●●●”
●●●の部分は、吹き出しデザインの設定値となります。
「drop、std、fb、fb-flat、ln、ln-flat、pink、rtail、think」の9種類があるんですね。

それぞれ、デザインに特徴があるので、サイトに合わせて変更してみてください。

設定値:type=”drop”

A さん
やっほー!

B さん
どうしたの?


設定値:type=”std”

A さん
やっほ!

B さん
どうしたの?


設定値:type=”fb”

A さん
やっほ!

B さん
どうしたの?


設定値:type=”flat”

A さん
やっほ!

B さん
どうしたの?


設定値:type=”ln”

A さん
やっほ!

B さん
どうしたの?


設定値:type=”ln-flat”

A さん
やっほ!

B さん
どうしたの?


設定値:type=”pink”

A さん
やっほ!

B さん
どうしたの?


設定値:type=”rtail”

A さん
やっほ!

B さん
どうしたの?


設定値:type=”think”

A さん
やっほ!

B さん
どうしたの?


 

人間のアイコンは変更できるの?

コードをよく見ると察しがつくかと思いますが、icon=”1.jpg” やicon=”2.jpg”の表示部分がありますよね。

このjpgファイルの中身を変更したり、新しく追加したい画像を追加し、コードに書いてあげればOKです

簡単ですよね?

今回使用したいアイコンを2つ用意します。

【クマ吉】と【Aki☆】です。

ファイル名はそれぞれ、kuma.png とaki.pngという名前にします。

 

自身のサイトのFTPサーバーにログインします。

FTPサーバーに初めてログインする方は、FFFTPソフトをダウンロードしてください。

ダウンロードすると下記の画面が表示されるので、自身のFTPサーバーの情報を入力してください。

【ホスト名の設定名】:任意の名称
【ホスト名】:自身のFTPサーバー名を入力
【ユーザー名】:自身のFTPユーザー名を入力
【パスワード】:自身のパスワードを入力
【ローカル初期フォルダ】:空白でOK
【ホストの初期フォルダ】:空白でOK

設定を入力したら【OK】ボタンをクリックして【接続】ボタンをクリックします。

 

FTPサーバーにログインします。

下記のフォルダ名まで進みます。
public_html/wp-content/plugins/speech-bubble/img

そうすると、1.jpや2.jpgとうファイル名が見つかります。
この中に、kuma.png とaki.pngファイルをドラックしコピーします。

 


 

それでは、下記のコードを貼り付けます。
変更点は、
1.jpg ⇒ kuma.png Aさん ⇒ クマ吉
2.jpg ⇒ aki.png  Bさん ⇒ AKi☆

[speech_bubble type="drop" subtype="L1" icon="kuma.png" name="クマ吉"] Aki☆さん、ちゃんと設定できた? [/speech_bubble]
[speech_bubble type="drop" subtype="R1" icon="aki.png" name="Aki☆ "] 私でもできたよっ☆。[/speech_bubble]

 

クマ吉
Hello! 今日はいい天気ですね? 

Aki☆
こんにちは☆お洗濯日和ですね。

 


 

まとめ

あれこれと説明を記載しまたが、上手く吹き出しアイコンが表示できましたでしょうか?

会話形式の質疑応答スタイルの記事を記載したい場合なんかには最適ですね。

このサイトの英語カテゴリの記事で、今後このツールを活用して分かり易い記事を作成しようと思ってます。

この記事が参考にしていただけると嬉しいです。

 

 

 

Speech Bubbleプラグインで会話型の吹き出しデザインを極めよう!」への2件のフィードバック

  1. ミラ

    はじめまして。
    ランキングからきましたミラです。
    まさしく!ブログに吹き出しで会話を入れたかったので、とても参考になりました。
    ありがとうございました。

    返信
    1. kuma 投稿作成者

      ミラさん、訪問ありがとうございます。
      お役に立ててこちらも、大変うれしいです。
      私も最初、吹き出しってどうやればいいんだろう・・って悩みましたし、きっと難しいことしているんだろうなぁ
      と思ってました。

      試行錯誤しながら作っているので、まだまだ恥ずかしい限りです。
      中々更新頻度も頻繁にできないけど、よろしくね。

      ミラさんのサイトにも是非、訪問したいです。

      返信

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です