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

    こんにちは！くだらない寸劇失礼しましたｗ御覧頂いたとおり、今回はこのような会話風の吹き出しを簡単に設置できるWordPressプラグイン「Speech bubble」のご紹介になります。インストールから導入まで５分もあれば充分過ぎるくらいの簡単さなので、どなたでも使える便利なプラグインです。しかも、記事を書いていて楽しいという、ブログ運営者の精神衛生上にもよいプラグインときたらもう手放せません。とても簡単とは言え、少しコツが必要な部分もあるので、そこもチェックして進めてみて下さい。それでは参りましょう〜！

Speech bubbleのインストール

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

Speech Bubble使用前の準備

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

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

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

【speech_bubble type="ln" subtype="L1" icon="s1.jpg" name="ざんぷ" ]こんにちは、飲食店さんの集客サポーターことざんぷです。 [/speech_bubble】

1	【speech_bubble type="ln" subtype="L1" icon="s1.jpg" name="ざんぷ" ]こんにちは、飲食店さんの集客サポーターことざんぷです。 [/speech_bubble】

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

  テキストの部分を書き換えることで、 好きなセリフに変更が可能です。 （引用： 冥王ハーデス編 - 冥界 第五獄 フェニックス一輝 対 天雄星ガルーダのアイアコスより）   ショートコード内の、 「icon」「name」任意の名前に変更し、 「type」「subtype」は以下のように 変更することが可能です。

【type】を変更する

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

【subtype】を変更する

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

まとめ

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