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

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

スポンサードリンク

Speech bubbleのインストール

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

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

Speech Bubble使用前の準備

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

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

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

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

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

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

【type】を変更する

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

shunsuke
type=”drop”です。
shunsuke
type=”std”です。
shunsuke
type=”fb”です。
shunsuke
type=”fb-flat”です。
shunsuke
type=”ln”です。
shunsuke
type=”ln-flat”です。
shunsuke
type=”pink”です。
shunsuke
type=”rtail”です。
shunsuke
type=”think”です。

【subtype】を変更する

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

まとめ

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

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitter でshunsukeをフォローしよう!

関連記事

  1. 【WordPress】記事内への定型文挿入プラグインPost Snippetsの使用方法

    【WordPress】記事内への定型文挿入プラグインPost Snip…

  2. 【WordPress】メニューのアイコン設置プラグインFont Awe…

  3. 【WordPres】スライドショー作成プラグインMeta Slider…

  4. WordPress無料テーマおすすめ一覧!レスポンシブ&デザイン重視が…

  5. 【WordPress】SNSボタンを設置するプラグイン「AddToAn…

  6. 【WordPress】nofollowの簡単追加プラグインUltima…

ツールバーへスキップ