【WordPress】会話風な吹き出しプラグイン「Speech Bubble」の使い方

ざんぷ
こんにちは、飲食店さんの集客サポーターことざんぷです。
熊田くん
ざんぷさん、こんにちはー!熊田と申します。こちらへの登場は初めてになりますね!よろしくお願いします♪
ざんぷ
熊田くんどもです。
ざんぷ
熊田くんに初めて登場していただいたのは他でもありません。
ざんぷ
吹き出しプラグイン「Speech Bubble」の説明をしたいがためです。
 
熊田くん
ええええええええっーーーーー!?それだけですか!!?
ざんぷ
ええ、その通りです。
熊田くん
ひどい...ひどすぎる....( ;∀;)
ざんぷ
冗談冗談w
ざんぷ
とてもおもしろいプラグインだから、今後も登場してもらおうと思ってるよ!
熊田くん
それじゃあ....♪
ざんぷ
宇佐さんに来てもらおうかと思ってるんだ☆
宇佐さん
・・・。
熊田くん
(こやつ...おちょくっとる。)
熊田くん
(せめて宣伝だけでもしてやるぞっ!!!)
熊田くん
僕のLINEスタンプはこちらから
  こんにちは!くだらない寸劇失礼しましたw御覧頂いたとおり、今回はこのような会話風の吹き出しを簡単に設置できるWordPressプラグイン「Speech bubble」のご紹介になります。インストールから導入まで5分もあれば充分過ぎるくらいの簡単さなので、どなたでも使える便利なプラグインです。しかも、記事を書いていて楽しいという、ブログ運営者の精神衛生上にもよいプラグインときたらもう手放せません。とても簡単とは言え、少しコツが必要な部分もあるので、そこもチェックして進めてみて下さい。それでは参りましょう〜!

Speech bubbleのインストール

それではプラグインのインストールから。 いつも通り検索フォームから 「Speech Bubble」と入力し探しましょう。 speech_bubble 画像上で「インストール済み」と なっている所が「いますぐインストール」 になっていることを確認し、クリックして下さい。 完了するとボタンが切り替わるので 「有効化」ボタンをクリックします。   ここまでは普段通りの流れなので、 流れ作業ですね(^o^)

ざんぷ
最終更新日が2年前で心配だけど、問題なく使えますよ。

Speech Bubble使用前の準備

まずは使用する画像を準備します。 デフォルトでは60x60の表示なので 同サイズの画像であれば問題ありません。 CSSをいじって、大きくする方は それと同サイズ以上で準備しましょう。   ここで問題があります。 Speech Bubbleには、管理画面上の 設定ページが存在しません。   つまり、FTPを使って 直接アップロードする必要があります。 アップロード方法は、ご自身の環境によって 変わってきますので、今回は割愛させて下さい。   ファイルの場所は、 【"wp-content/plugins/speech-bubble/img"】 こちらになりますので、 画像の準備が出来たら ポンポン入れていきましょう♪  

ざんぷ
表示されるアイコンは正方形なので、アップロードする画像は正方形にトリミングしておきましょうね!でないと...縦や横に潰れちゃいます(汗

Speech Bubbleショートコードの使い方

Speech Bubbleは記事内にショートコードを 書くことで機能してくれます。 デフォルトでは、ツールバーに表示されないので 表示させるプラグインを使用するか、 ご自身でコピペして使うようにして下さい。

(両端の"【】"は"[]"に変えてください)   するとこんな感じに、

ざんぷ
こんにちは、飲食店さんの集客サポーターことざんぷです。
  テキストの部分を書き換えることで、 好きなセリフに変更が可能です。
一輝
聖闘士(セイント)に同じ技は二度も通じぬ。今やこれは常識!!
(引用: 冥王ハーデス編 - 冥界 第五獄 フェニックス一輝 対 天雄星ガルーダのアイアコスより)   ショートコード内の、 「icon」「name」任意の名前に変更し、 「type」「subtype」は以下のように 変更することが可能です。

【type】を変更する

drop・std・ fb・ fb-flat・ln・ ln-flat・ pink・ rtail・ think 以上の9種類から選べます。

ざんぷ
type="drop"です。
ざんぷ
type="std"です。
ざんぷ
type="fb"です。
ざんぷ
type="fb-flat"です。
ざんぷ
type="ln"です。
ざんぷ
type="ln-flat"です。
ざんぷ
type="pink"です。
ざんぷ
type="rtail"です。
ざんぷ
type="think"です。

【subtype】を変更する

ざんぷ
subtype="L1"です。
ざんぷ
subtype="R1"です。
ざんぷ
subtype="L2"です。
ざんぷ
subtype="R2"です。
    subtypeを変更することで Lは左側(Left)、Rは右側(Right) に位置移動します。   また"2"に変更すると、 "think"風の吹き出しになります。 使い所が多そうなので、 是非覚えておいて下さい☆

まとめ

今回は、吹き出しプラグイン 「Speech Bubble」について ご説明しました。簡単に使えて 表現の幅が広がるのは嬉しいですね♪ 記事更新の手が止まらなくなりそうw (なんてね('A`))


おすすめの記事