会話プラグイン「Speech bubble」の設定方法&使い方

ひつじ
<景品表示法に基づく表記> 当サイトのコンテンツ内には商品プロモーションを含みます。

会話プラグイン speech bubble

僕のブログを読んでくれている人にとってはお馴染みのプラグイン「Speech bubble」の使い方をご紹介いたしましょう。

ひつじくん
ひつじくん
僕らみたいな会話形式を簡単に作ることができるプラグインだよ!
おおかみくん
おおかみくん
それはすげぇ!!

「Speech bubble」を使えば、僕の使っているような会話形式を簡単に導入することができます!

会話を入れることで文章が豊かになりますし、読者としても読みやすい文章になりやすいのがメリットですね。僕はもともと文章を書くのはそんなに上手ではありませんが、会話を導入することによってそれをごまかしています(笑)

ではそんな便利な会話プラグインのspeech bubbleの設定方法&使い方をじっくり見ていくことにしましょう!

ブログデザインを想いのままに!

Speech bubbleのインストール方法

WordPress管理画面からプラグイン新規追加

プラグインを新規追加

まずはSpeech bubbleをインストールするために、WordPress管理画面>プラグイン>新規追加と進んでください。

Speech bubbleを検索する

プラグインを検索

そして、検索窓で「Speech bubble」と入力して、検索をしましょう。そうするとプラグインが見つかるはずです。

Speech bubbleをインストール

インストール

Speech bubbleが見つかったら、「今すぐインストール」のボタンを押しましょう。インストールは10秒ほどで完了します。

Speech bubbleを有効化

インストール

インストールが完了したら、そのまま「有効化」のボタンを押しましょう。

これでSpeech bubbleは有効化されました…が、キャラクター設定などはここからです。ここからキャラクター画像をアップロードする作業に移りましょう!

Speech bubbleの初期設定(キャラ画像のアップロード)

FTPツール

プラグインインストールが終わったら、会話で使いたいキャラクター画像をアップロードしましょう!ちなみにキャラクターイラストはココナラを使って依頼すれば簡単に手に入れることができます。

キャラクター画像のアップロードは、FTPツールというツールを使って行います。

FTPツールには様々ありますが、今回はXserverに標準搭載されているFTPツールを使ってキャラクター画像をアップしていきましょう。

XserverのFTPツールを起動

xserver

XserverでFTPツールを起動します。

そのためにはエックスサーバーの「インフォパネル」>「サーバーパネル」と移動し、その中から「FTPアカウント設定」という項目を探して進みましょう!

FTPアカウントを登録

ftp

  1. FTPアカウント:好きな名前を入力
  2. パスワード:8文字〜15文字で設定
  3. ディレクトリ:空欄でOK
  4. FTP容量:0MBでOK

FTPアカウントを登録します。上記の通りに入力して、FTPアカウントを登録しましょう!

FTPアカウントにログイン

FTP

ではFTPアカウントにログインするために「ログイン」を押してください。

speech bubbleのファイルまで到達する

FTPツール

そうすると、たくさんのファイルがあるページにたどり着くと思います。

それではここから、

「編集するドメイン」>「public_html」>「wp-content」>「plugins」>「speech-bubble」>「img」

の順に、クリックして進んでいってください。

FTPでキャラクター画像をアップロード

アップロード

そこまでたどり着いたら、キャラクター画像のファイルをアップロードしましょう。

「ファイルを選択」>「アップロード」の順にボタンを押して進むと、キャラクター画像がアップロードされます。きちんとアップロードされているなら、同ページ内にアップロードしたファイルが増えているはずです。

Speech bubbleの使い方

スピーチバブルの使い方

基本的な使い方は以下のコードを貼り付けて、会話を書いていくだけです。

[[speech_bubble type="drop" subtype="L1" icon="画像名.jpg" name="〇〇くん"] こんにちは[/chat]]
[[speech_bubble type="drop" subtype="R1" icon="画像名.jpg" name="△△さん"] こんばんは[/chat]]

ただその上で、キャラクター画像・キャラクター名・セリフ・吹き出しの種類を選んで使っていく必要があります。その詳しい方法をこれから紹介していきましょう。

キャラクター画像の設定の仕方

[[speech_bubble 中略 icon="画像名.jpg" ] こんにちは[/chat]]
[[speech_bubble 中略 icon="画像名.jpg" ] こんばんは[/chat]]

アップロードした画像名を「icon=”画像名.jpg”」の部分に入れましょう。

ちなみに画像は勝手に100×100pxにリサイズされますので、大きい画像を入れた場合でも大丈夫です。

セリフの入れかた

[[speech_bubble 中略] こんにちは[/chat]]
[[speech_bubble 中略] こんばんは[/chat]]

セリフは「こんにちは」「こんばんは」の部分に入れるだけです!

キャラクター名の変え方

[[speech_bubble 中略 name="〇〇くん"] こんにちは[/chat]]
[[speech_bubble 中略 name="△△さん"] こんばんは[/chat]]

キャラクター名は「name=””」の部分で決定できます。

僕の場合はここに、「ひつじくん」「おおかみくん」と入れています。

吹き出しの種類

実用的な見出しの種類は8種類!この中から好きな吹き出しを選んで使ってみてください!

drop

ドロップ

[[speech_bubble type="drop" subtype="L1" icon="画像名.jpg" name="〇〇くん"] こんにちは[/chat]]
[[speech_bubble type="drop" subtype="R1" icon="画像名.jpg" name="△△さん"] こんばんは[/chat]]

std

std

[[speech_bubble type="std" subtype="L1" icon="画像名.jpg" name="〇〇くん"] こんにちは[/chat]]
[[speech_bubble type="std" subtype="R1" icon="画像名.jpg" name="△△さん"] こんばんは[/chat]]

rtail

スクリーンショット 2017-04-06 21.39.14

[[speech_bubble type="rtail" subtype="L1" icon="画像名.jpg" name="〇〇くん"] こんにちは[/chat]]
[[speech_bubble type="rtail" subtype="R1" icon="画像名.jpg" name="△△さん"] こんばんは[/chat]]

pink

pink

[[speech_bubble type="pink" subtype="L1" icon="画像名.jpg" name="〇〇くん"] こんにちは[/chat]]
[[speech_bubble type="pink" subtype="R1" icon="画像名.jpg" name="△△さん"] こんばんは[/chat]]

fb

fb

[[speech_bubble type="fb" subtype="L1" icon="画像名.jpg" name="〇〇くん"] こんにちは[/chat]]
[[speech_bubble type="fb" subtype="R1" icon="画像名.jpg" name="△△さん"] こんばんは[/chat]]

fb-flat

fb-flat

[[speech_bubble type="fb-flat" subtype="L1" icon="画像名.jpg" name="〇〇くん"] こんにちは[/chat]]
[[speech_bubble type="fb-flat" subtype="R1" icon="画像名.jpg" name="△△さん"] こんばんは[/chat]]

ln

ln

[[speech_bubble type="ln" subtype="L1" icon="画像名.jpg" name="〇〇くん"] こんにちは[/chat]]
[[speech_bubble type="ln" subtype="R1" icon="画像名.jpg" name="△△さん"] こんばんは[/chat]]

ln-flat

ln-flat

[[speech_bubble type="ln-flat" subtype="L1" icon="画像名.jpg" name="〇〇くん"] こんにちは[/chat]]
[[speech_bubble type="ln-flat" subtype="R1" icon="画像名.jpg" name="△△さん"] こんばんは[/chat]]

考えている風にする

考えている風

ちなみにこれは考えている風にすることもできます。

考えている風にするにはいかのように、L1→L2、R1→R2という風に変更してもらうだけでOKです!

[[speech_bubble subtype="L2"] こんにちは[/chat]]
[[speech_bubble subtype="R2"] こんばんは[/chat]]

まとめ

会話プラグイン speech bubble

Speech bubbleの使い方を詳しく紹介させていただきました。

ちょっと設定が難しかったかもしれませんが、ショートコードを入れるだけで簡単に会話ができるようになるのがメリットです。ちなみにショートコードはAdd Quick Tagに登録しておけば素早く呼び出すことができますので便利ですよ!

おおかみくん
おおかみくん
Add Quick Tagもほんと便利だなー

そんな感じで、便利な会話プラグインSpeech bubbleの使い方でした!ぜひ使って見てください!

ABOUT ME
記事URLをコピーしました