吹き出しプラグイン【Speech bubble】の設定方法と使い方

2018年11月2日

ブログ初心者でも超簡単に使える!

るっこら
どもども、るっこらです。

今回は、便利な吹き出しプラグインSpeech bubbleの設定方法と使い方をご紹介します!

吹き出しによって会話形式で文章がかけるプラグインです。
読者にとって読みやすく、書いてる自分も楽しくなること間違いなしっ!

誰でも簡単に使えるので、順番に進んでいきましょう!

Speech bubbleのインストール

まずはWordpressの管理画面からスタートします!

WordPressの管理画面「プラグイン」→「新規追加」


Speech bubbleをインストールするために、Wordpress管理画面→「プラグイン」→「新規追加」を選択しましょう。

Speech bubbleを検索→「インストール」→「有効化」


右上の検索欄で「Speech bubble」と入力して検索しましょう!

見つけたら、「今すぐインストール」を押してインストールが完了するまで少し待って下さい。

10秒ほどでインストールは完了します。

次に「有効化」にを押しましょう。

これで有効化されたので、キャラクター画像の設定に移りましょう!

Speech bubbleの初期設定

ここでは、会話で使いたいキャラクター画像をアップロードしていきます。

使いたい画像は用意しておいて下さいね。

画像のアップロードは、Xserver内にあるFTPツール使って画像をアップロードしていきます。

月額900(税抜)から、高速・多機能・高安定レンタルサーバー『エックスサーバー』

Xserver内のFTPアカウントの設定

Xserverのサーバーパネルで「FTPアカウント設定」を選択します。

自分のドメインの右側にある「選択する」を押しましょう!

FTPアカウントを作成

ここではアカウントを作成します。

アカウント名は、好きな文字列を入力する。

パスワードは、8文字~15文字で設定する。

接続先ディレクトリは、空欄のまま。

FTP容量も、0MBでそのまま。

これで右下の「FTPアカウントの作成(確認)」を押しましょう!

FTPアカウントにログイン

FTPアカウントにログインするために「ログイン」を押しましょう!

アップロードファイルまで進もう

ここは少しわかりにくいかもしれませんが、順番に進めば難しくありません!

では、上記の画面に到達するまでの順番を説明するよ!

ログインしたら、「編集したい自分のドメイン」→「public_html」→「wp-content」→「plugins」→「speech-bubble」→「img」の順にクリックして進むと、

上記の画面にたどり着きます。

ここで右側の「ファイルを選択」でアップロードしたい画像を選んで「アップロード」を押しましょう。

アップロードが完了したら、左側に新しくファイルが追加されますよ!

Speech bubbleの使い方

るっこら
ここまで来たら、あとは好きなパターンを選んで楽しみましょう!

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

必要に応じて、吹き出しの種類、表示位置、キャラクター画像、キャラクター名、セリフは自由に変えて使ってくださいね!

上記を例にすると、

“drop” → 吹き出しの種類

“R1” → 表示位置 (右側)

“L1” → 表示位置(左側)

“画像ファイル名” → キャラ画像

“○○くん” → キャラ名

ありがとう → セリフ

吹き出しの種類

Speech bubbleの吹き出しの種類は、

[ drop ]  [ std ]  [ fb ]  [ fb-flat ] [ ln ]  [ ln-flat ]  [ pink ]  [ rtail ]の全部で8種類!

< drop >

るっこら
るっこらです

葉っぱくん
はっぱです

< std >

るっこら
シンプル

葉っぱくん
スタンダードなやつだ

< fb >

るっこら
Facebook風

葉っぱくん
見やすいやつだ

< fb-flat >

るっこら
これまたFacebook風

葉っぱくん
パート2!

< in >

るっこら
LINE風

葉っぱくん
よく使うやつだ

< in-flat >

るっこら
LINE風の…

葉っぱくん
パート2!!

< pink >

るっこら
pink

葉っぱくん
女子向けだ

< rtail >

るっこら
これはrtail

葉っぱくん
りてーる?

考えている風

るっこら
今日は何食べようかな?

葉っぱくん
おなか減ったなぁ

どの種類でも、R1→R2、L1→L2のように数字を変更すると、考えているような吹き出しにもできますよ!

終わりに

Speech bubbleの設定方法と使い方をご紹介しました!

初心者でも会話形式で文章を書くことによって、

見やすく伝わりやすい記事を作るができます。

吹き出しのコードは、Add Quick Tagに登録しておけば、

もっと簡単で便利に使えます!

いかがでしたか?

便利で楽しい吹き出しプラグインをぜひ使って見てください!