Speech bubble (ふきだしプラグイン)でブログで簡単にキャラを会話させよう！

Warning: Use of undefined constant SB_ALERT_SUBTYPE_MISSING - assumed 'SB_ALERT_SUBTYPE_MISSING' (this will throw an Error in a future version of PHP) in /home/digilocus/digilocus.net/public_html/wp-content/plugins/speech-bubble/classes/SnbSpeechBubble.php on line 180

Warning: Use of undefined constant SB_ALERT_SUBTYPE_MISSING - assumed 'SB_ALERT_SUBTYPE_MISSING' (this will throw an Error in a future version of PHP) in /home/digilocus/digilocus.net/public_html/wp-content/plugins/speech-bubble/classes/SnbSpeechBubble.php on line 180

Ame

蓮さん、こないだNHKの人を撃退…じゃなくて、なんか帰ってくれた話が面白かったからブログに書きたいんだけど、会話用のイラスト描いてよ～

蓮

ブログで会話とかおしゃれなことする気だこの人！

蓮

いいよ～、Ameの自画像ね、ちょっと待っててね

という感じの流れで、ブログ内でキャラを会話させる仕組みを取り入れることとなったDigiLocus。

ブログ内での会話、Ameさんはもっと難しいやり方でふきだしなど作ることも考えたみたいですが、より簡単に済む「Speech bubble (ふきだしプラグイン)」を使わせてもらうことになりました。

WordPressでのSpeech bubble (ふきだしプラグイン)の使い方を、今回気づいたことなどを踏まえながら順番に書き記しておきたいと思います。

（正直やり方を見たとき複雑そう…と思って少し躊躇しましたが、全然簡単にできましたよ！）

Speech bubble (ふきだしプラグイン)をWordPressにインストール

まずはWordPressの「プラグイン」という項目から、「Speech bubble (ふきだしプラグイン)」を検索してインストールします。

Speech bubble (ふきだしプラグイン)

インストールしたら有効にしておきましょう。

ふきだしで会話させたいキャラの画像を準備

Speech bubble (ふきだしプラグイン)をインストールできたら、会話させたいキャラを用意しなくてはいけませんね。

デフォルト

用意しなくてもわたくしのような「デフォルトの人」は用意されていますが。

画像の準備はブログのサーバーからやらなきゃいけない手順なので、わたしの使っているXserverを例にお話します。

ぱっと見ちょっと難しそうですが、やってみれば何てことないです。

わたしも最初「えっ、WordPressに画像アップロードするだけじゃないの…？」とやったことない手順に不安になりましたが、下の通りにやってくだけなので初心者でも大丈夫！

FTPアカウントの作成

Xserverのサーバーパネルに入ってもらって、「FTP」という項目の「FTPアカウント設定」を押して下さい。

Speech bubble (ふきだしプラグイン)

そうするとドメインの選択画面というのが出てきますので、ふきだしを使いたいブログを選択しましょう。

FTPアカウント設定という画面になったら、「FTPアカウントの追加」を押します。

Speech bubble (ふきだしプラグイン)

FTPユーザーID
パスワード
パスワード（確認）

この3つを入力したら「接続先ディレクトリ」は空欄、「FTP要領」は0のままで大丈夫なので、右下の「FTPアカウントの作成（確認）」ボタンを押しましょう！

これで第一の下準備は完了です。
ホームに戻ってまた「FTPアカウント」を押してもらうと、今追加したFTPアカウントがちゃんと増えているはずなので、それを選択してログインします。

画像ファイルのアップロード

ログインしたら、こんな画面が出てくるはずですね。

Speech bubble (ふきだしプラグイン)

ファイルを次々とクリックしながら進んでいきます。
進む順番は、下の通りです。

Speech bubble (ふきだしプラグイン)を設置したいブログのファイル名を選択　→　public_html　→　wp-content　→　plugin　→　speech-bubble　→　img

imgまで来たら、右にある[ファイルのアップロード]のところで「ファイルを選択」を押して画像を選び、「アップロード」します。

ファイル形式はjpg、png、gif、svg、tifが使えます。

jpgとpngは試しましたが、正直ちっちゃいので違いがよく分かりません。
ファイルサイズが半分で済むjpgで十分だと思いましたが、お好みで！

WordPressでのSpeech bubble (ふきだしプラグイン)の書き方

以上で全ての前準備が終わったら、いよいよWordPressでふきだし機能を使ってみましょう。

いつものようにWordPressの「投稿」画面に行き、テキスト画面に下記のコードを貼り付けます。これがSpeech bubble (ふきだしプラグイン)でふきだしを使うコードです。

「種類」はふきだしのデザインの種類、「向き」は左向きか右向きか、「画像」は準備したキャラの画像、「名前」はキャラの名前、「文章」には会話の文章を、自分で入れていくことになります。

記入例を挙げると、こんな感じ。


	
		
			
				
			
			蓮
		
		
			 これが記入例です！

これがこう表示されます↓

蓮

これが記入例です！

それでは、ひとつひとつ書き方を説明していきますね。

type

Speech bubble (ふきだしプラグイン)には、ふきだしの種類がいくつも用意されています。親切ですね。

こんな感じだよ～という例を挙げてみますので、好みのふきだしをお使い下さい！

コードのtype=”●●”のところにstdとかdropとか書けばOKです。

std

ここに、会話させたいキャラの画像名を書きます。

アップロードした画像の名前をそのまま書いて下さい。hasu.jpgなど拡張子（.jpgとか.pngとか）の部分までしっかりと！

name

キャラの名前を好きにつけましょう。

この名前はふきだしの種類によって、アイコンの下に書かれたりふきだしの上に書かれたりしますね。長い名前だとふきだしの上のパターンの方がすっきりする？

※もしWordPressにちゃんとコードを書き入れてもSpeech bubble (ふきだしプラグイン)が作動してくれない時は、WordPressを一旦閉じてみると、解決するかもしれません。

ふたたびWordPressにログインしてコードを書いてみると、わたしの場合はちゃんとふきだしが表示されました。

まとめ

Speech bubble (ふきだしプラグイン)というプラグインを使えば、ブログ内で簡単に会話をさせることができましたね！

プラグインは確かに動作が遅くなったり、無駄に増やしてはいけないと遠慮しがちですが、ブログ内での会話をプラグインなしでとなるとハードルが高いです。

見栄えもSpeech bubble (ふきだしプラグイン)の方が良いように思いますし、わたしは気に入って使わせてもらってるプラグインですね。

ちょっと昔で更新が止まってるのが気になるところではあるんですが、今のところ問題なく使えるのでこのまま使用させて頂こうと思います＾＾