会話プラグイン「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ツールには様々ありますが、今回はXserverに標準搭載されているFTPツールを使ってキャラクター画像をアップしていきましょう。
XserverのFTPツールを起動
XserverでFTPツールを起動します。
そのためにはエックスサーバーの「インフォパネル」>「サーバーパネル」と移動し、その中から「FTPアカウント設定」という項目を探して進みましょう!
FTPアカウントを登録
- FTPアカウント:好きな名前を入力
- パスワード:8文字〜15文字で設定
- ディレクトリ:空欄でOK
- FTP容量:0MBでOK
FTPアカウントを登録します。上記の通りに入力して、FTPアカウントを登録しましょう!
FTPアカウントにログイン
ではFTPアカウントにログインするために「ログイン」を押してください。
speech bubbleのファイルまで到達する
そうすると、たくさんのファイルがあるページにたどり着くと思います。
それではここから、
「編集するドメイン」>「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
[[speech_bubble type="std" subtype="L1" icon="画像名.jpg" name="〇〇くん"] こんにちは[/chat]] [[speech_bubble type="std" subtype="R1" icon="画像名.jpg" name="△△さん"] こんばんは[/chat]]
rtail
[[speech_bubble type="rtail" subtype="L1" icon="画像名.jpg" name="〇〇くん"] こんにちは[/chat]] [[speech_bubble type="rtail" subtype="R1" icon="画像名.jpg" name="△△さん"] こんばんは[/chat]]
pink
[[speech_bubble type="pink" subtype="L1" icon="画像名.jpg" name="〇〇くん"] こんにちは[/chat]] [[speech_bubble type="pink" subtype="R1" icon="画像名.jpg" name="△△さん"] こんばんは[/chat]]
fb
[[speech_bubble type="fb" subtype="L1" icon="画像名.jpg" name="〇〇くん"] こんにちは[/chat]] [[speech_bubble type="fb" subtype="R1" icon="画像名.jpg" name="△△さん"] こんばんは[/chat]]
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
[[speech_bubble type="ln" subtype="L1" icon="画像名.jpg" name="〇〇くん"] こんにちは[/chat]] [[speech_bubble type="ln" subtype="R1" icon="画像名.jpg" name="△△さん"] こんばんは[/chat]]
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の使い方を詳しく紹介させていただきました。
ちょっと設定が難しかったかもしれませんが、ショートコードを入れるだけで簡単に会話ができるようになるのがメリットです。ちなみにショートコードはAdd Quick Tagに登録しておけば素早く呼び出すことができますので便利ですよ!
そんな感じで、便利な会話プラグインSpeech bubbleの使い方でした!ぜひ使って見てください!