ブログやサイトに記事を投稿していると、たまに会話風にしてみたいときがある。

そこでさっそく、”会話風 プラグイン”でググッてみると「Speech Bubble」のプラグインが「いいよ」ということを知ったのである。

 

ここでは、Speech Bubbleの設定方法と使い方について紹介する。

 

Speech Bubbleとは

 

 

Speech bubble (ふきだしプラグイン) は、直接的なHTML&CSSコード化なしであなたのポストのスピーチ泡飾りを容易に追加できる。

 

と解説されている。

 

Speech Bubbleの設定方法と使い方

 

で、このプラグインのインストール方法については、管理画面(ダッシュボード)からプラグイン、新規追加に進む。

 

 

プラグインを追加の画面になったら、右上にある検索欄に「Speech Bubble」と入力する。

すると画面に「Speech Bubble」の項目がでてくるので、「今すぐインストール」ボタンをクリックする。

 

プラグインのインストール後は、有効化を選択する(画面上で有効化を選択する)。

 

設定方法と使い方

 

設定方法としては、「Speech Bubble」のショートコードをコピーして投稿ページや固定ページに貼り付けるだけである。

 

 

ショートコードについては、ここから持ってきた。

たったこれだけで、吹き出しとアイコンが現れる。

 

A san
Ask something.
B san
Answer something.
A san
Think something.
A san
Think something, too.

 

デフォルトではこんな感じになる。

私も最初、こうしたコードをコピーして、サイトに貼り付けたのだが、上手くサイトに反映されなかった。

なので、ヤフーとかグーグルの検索欄にコピーしたコードをぶち込んで、それをまたコピーして貼り付けると上手く行ったのである(メモ帳などの類でも可)。

 

吹き出しの変更

A san
Ask something.
B san
Answer something.

 

 

さっきのコードを少しわかりやすくしてみた。

 

 

そして、この吹き出し部分の変更をする時は、”std”の部分を変更する。

試しに”ln”に変えてみる。

 

A san
Ask something.
B san
Answer something.

 

するとLINE風の吹き出しになるのである。

その他にも

 

「drop」「std」「fb」「fb-flat」「ln-flat」「pink」「rtail」「think」

 

などの吹き出しがあるようだ、自分で好きなものを選んでくれ。

 

 

ちなみに心の声を表現したいときには、subtype=の部分を”c”と”d”に変更する。

単体で変えることも可能である。

 

A san
Think something.
A san
Think something, too.

 

 

会話内容の変更

 

 

会話内容を変更したいときには、name=”A san” ]の後ろ部分を変更すればいい(Bも同じ)。

 

A san
左側の人物の吹き出しです。
B san
右側の人物の吹き出しです。

 

名前の変更

 

 

名前を変更したいときには、name=”A san”のA sanの部分を変更する(Bも同じ)。

 

上官
左側の人物の吹き出しです。
ヒッキー
右側の人物の吹き出しです。

 

画像の変更方法

で重要な画像を変更する方法だが、まず画像を選んでおくことが必要になる。

 

選んだうえですることは、エックスサーバーにアクセスする。

そしてログインする。

 

 

ログイン後は、「ファイルマネージャー」にアクセスする。

 

 

ここでは、下記の通りに進んでいく。

 

◆自分のドメイン名をクリックする。
◆public_htmlをクリックする。
◆wp-contentをクリックする。
◆pluginsをクリックする。
◆speech-bubbleをクリックする。
◆imgをクリックする。

 

 

img画面を開いたら、

ファイルのアップロードの下にある、「ファイルを選択」ボタンをクリックし、準備した画像を選択する。

 

 

画像を選んだら、「アップロード」ボタンを押す(一度に5つまで可能のようだ)。

 

 

そうしたら、画面上に画像が反映されたのが確認できる。

あとは、投稿ページや固定ページに戻って、ショートコードを書き換える。

 

 

 

icon=”1.jpg”の「1.jpj」部分と、icon=”2.jpg”の「2.jpg」部分をさっきアップロードした画像に書き換える。

すると、下記のようにアイコンが設定された画像に変更されるのである。

 

上官
貴様ぁ!名前はなんと言うのだ
ヒッキー
ヒッキーであります。

 

こんな風に、キャラクターのアイコンが表示される。

アイコンがつくだけで、それらしいものになる。

ちなみに文字は、テキストになるようだ。

以上で、Speech Bubbleの設定方法と使い方についての解説は終了する。

 

ワードプレスのプラグイン設定の話

ワードプレスのプラグイン設定の話

ワードプレスでサイトやブログをするなら、必ず「プラグイン」という機能を使うと思う。そもそも、プラグインというツールは何なのか。プラグインは、WordPressの...

投稿 2017/02/16