【WordPress】SpeechBubbleプラグインで吹き出し掛け合いを簡単実装しよう

FacebookやLINEのような吹き出しをWordPressショートコードで実装できる「Speech Bubble」をご紹介します。

Aさん
こんなことができるとは楽しそうですね。

Bさん
楽しいですよ。今日はなんとこれを簡単に作れるみたいです。

Aさん
ほんとかなぁ

Features

  • ショートコードで記事に吹き出しとアイコンと名前が追加
  • 記事に直接HTMLとCSSを記述しなくてOK
  • 9種類の吹き出しセットが使用できる

導入

今回プラグインの導入については省略します。過去記事を参考に、「Speech Bubble」でプラグイン検索してみてください。

プラグイン導入がのっている記事

アイコンのアップロード

アイコンはFTPなどでアップロードする必要があります。
デフォルトで指定されている、\wp-content\plugins\speech-bubble\img\にあげましょう。サイズはリサイズされるようなのであまり気にせずOKです。画像の種類(jpgやpng)もWeb上で表示できるものであればOKです!

使い方

[speech_bubble type="drop" subtype="L1" icon="4.png" name="nagata"] こんにちは [/speech_bubble]

※ ちなみに上記のようなショートコードのエスケープは[[]]で囲むことで可能です。

1. メッセージ部分

上記のこんにちはの部分を変えることによって、吹き出しの中のメッセージを変更可能です。

2. 吹き出しデザイン

吹き出しデザインはtype="drop"の部分です。

  • drop
  • std
  • fb
  • fb-flat
  • ln
  • ln-flat
  • pink
  • rtail
  • think

3. 引き出し部分デザイン

しっぽの部分と左右の設定です。subtype="L1"のプロパティを変更します。

  • L1:左配置、吹き出しがしゃべってる風
  • L2:左配置、吹き出しが考えてる風
  • R1:右配置、吹き出しがしゃべってる風
  • R2:右配置、吹き出しが考えてる風

4. アイコンの変更

先ほどアップロードしたものをicon="4.png"で設定します。指定の場所に配置したら、パスは必要ありません。

5. 表示名

name="nagata"のところを変更するだけでOKです。

まとめ

nagata
なんだか楽しくて、必要以上に使いたくなるプラグインですね。どうでした?

guma
よかったと思いますよ。楽しそうでなによりです。

nagata
今日のお相手は、2車線道路を運転するときは常に左車線を意識しながら右車線を走る“guma”さんでした。

guma
nagata氏はいつも見てないから曲がりたいところで曲がれないですもんね。それでは、またあう日まで。

フォローして続編をチェック

@universionsをフォロー