吹き出しを使おう|Speech Bubble |ワードプレス

シェアする

  • このエントリーをはてなブックマークに追加
キーボード

吹き出しを使ってみますね。見ていて楽しいですよね(^o^)丿

CSSカスタマイズではなく、Speech Bubble を利用します。

スポンサーリンク

Speech Bubble とは

簡単に吹き出しを作れる、ワードプレスのプラグインです。

ずっと難しいと思っていたのですが、このプラグインを使えば、html、CSSの知識はいりませんよ。
コードを記事の中に入れるだけです。

LINEやFacebookの会話のように書くことができます。

ちょっと記事の雰囲気が変わりますよね。

こんな感じで、以前のサイトで利用していました。

ぷよぷよシリーズ新アプリ ぷよぷよ!!タッチ事前登録開始 ぷよぷよタッチを攻略しよう

時々、見かけますよね?

登場人物、顔の部分をいろいろと変えると面白いですね。

では、今から、このサイトにも設定します。

インストールと設定

ダッシュボード ⇒ プラグイン ⇒ 新規追加 ⇒ 検索 ⇒インストール ⇒ 有効化

次に、Speech Bubble のHP↓より、ショートコードをコピーします。

https://wordpress.org/plugins/speech-bubble/faq/

赤丸の部分、 [speech ~ bubble] まで4行です。
Speech Bubble — WordPress Plugins

これを記事に貼り付けて、見てみましょう。テキスト、ビジュアル、どちらでもok。

コードは、スタイル、拭き出しの位置と向き、アイコンの名前、呼び名となっています。

A san
Ask something.

B san
Answer something.

A san
Think something.

A san
Think something, too.

そのままだと、こんな感じになりますね。
Aさんが質問して、Bさんが答えて、A.Bさんとも考え中・・。ですね。

ビジュアルモードでも見れません。プレビューだと確認できます。

あとは、このショートコードを自分用に編集します。日本語で使えます。
名前をA.B.から 好きな名前に。 呼び名も変えましょう。

画像、1.2も変更します。そのままだと、のっぺらぼうで怖いですよね。

コードは、どこかにコピーしておいて、いつも使える様にしておくと便利です。
また、コード・タグを呼び出せるプラグインもあります。AddQuicktag

これも、とても便利なプラグインです。また、別記事で、今度説明しますね。
今回の吹き出しは、特に、入れなくても使えます。

追記:その後 AddQuicktag の記事を書きました↓ 一緒に入れると便利です。

コード・タグを簡単入力|AddQuicktag|ワードプレス
先日、吹き出しの紹介をしました。 その時に、コードを呼び出して使えるプラグイン 『AddQuicktag』について少し触れました。 今回...

アイコン画像を変えよう

まず、好みのイラストをいくつか用意しましょう。
会話形式なので、とりあえず、2つ以上あればokですね。

その画像に、デフォルトから変更します。これは、FTPサーバーの方で追加します。

Xサーバーを利用しています。FTPアカウントから変更します。
やり方は、以前、子テーマに404.phpを追加した時と同じです

↓こちらを参考にして下さい。

404ページのカスタマイズ|simplicity2|Xサーバー
404エラーページをカスタマイズしてみました。時々、センスの光る404ページを見かけますよね。一度、やってみたかったのです、自分でカスタマイ...

FTPアカウントにログインして、ドメインを選択して、フォルダを順番に進み、imgのフォルダを開きます。

public_html ⇒ wp-content ⇒ plugins ⇒ speech-bubble ⇒ img

フォルダの中に 1.jpg 2.jpg と2つのファイルがあります。
ファイルを開くと、のっぺらぼうの青と赤の人物の画像となっています。

ここに、自分の選んだ画像ファイルを追加しました。

先ほどのコードの icon=”1.jpg” の 1 の部分 を変更すればokです。

名前は name=”この部分を変えます”

こんな感じになりました。吹き出しタイプはドロップにしてあります。
会話は例です(^^)/

Uさん
よぉ、久しぶり!

Pさん
元気にしてる? 楽しんでる?

吹き出しのタイプ

いくつか用意されています。上記が drop ですね。シンプルで好きです。

speech_bubble type=”drop”  となっています。
この drop の部分を変更するとタイプが変わります。

これが9種類もあります。

せっかくなので、Uさん、Pさんに紹介してもらいましょうか(*^_^*)

Uさん
まずは、std デフォルトだね。シンプル
Pさん
次は、ln だよ。LINE風。見慣れてるよね
Uさん
今度は、fb-flatに変更
Pさん
同じくFacebook風、fb だよ
Uさん
今度は、ln-flatに変更
Pさん
可愛いpink 自分にピッタリ?
Uさん
rtail、爽やかな青もあるよ
Pさん
thinkは・・心の声だね

以上、『drop』『std』『fb』『ln』『fb-flat』『ln-flat』『pink』『rtail』『think』を紹介しました。変えるのも簡単です。

使ってみると楽しいですよ! ついつい、やり過ぎて暴走しそう(^_^;)

ね? 記事が賑やかになったでしょ? 語り口調だと親しみが湧きます。
口コミレビューなんかに利用するといいね♪

ブログも楽しく書こう(^^)/

Pさん
これから、このサイトで使っていきますね!
もっと、オシャレな名前に次は変えよっと。

吹き出しの中の文章は、短めが読みやすいですね。
テンポよく読めます。長い時は改行しましょう。

以上、吹き出し導入レポでした。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

トップへ戻る