吹き出しプラグイン 使用方法

By | 2014年12月26日
Pocket

本プラグイン(Speech Bubble plugin)を使用するとWordpressの記事に簡単に吹き出しを追加できます。
事前にここよりダウンロード&インストール下さい。
以下に記事への追加方法を記します。

1. “管理画面->投稿->新規投稿”に以下のショートコードをコピー&ペーストしてください。”テキスト”タブにコピペして下さい。

[speech_bubble type="drop" subtype="L1" icon="1.jpg" name="A さん"] おこんばんわ [/speech_bubble]
[speech_bubble type="drop" subtype="R1" icon="2.jpg" name="B さん"] おばんです [/speech_bubble]

2.画像で示すとこんな感じになります。赤丸の部分が”テキスト”タブです。

speech-bubble-usage-1

(*)次の手順へ行く前のチェック!

コピー&ペーストして頂いた下記☆印の部分には半角のスペースを挿入する必要があります。type等の区切りとして半角スペースを使用しております。うまく行かない場合は,まずこの点をチェック下さい。よろしくお願いいたします。
[speech_bubble☆type="drop"☆subtype="L1"☆icon="1.jpg"☆name="A さん"] おこんばんわ [/speech_bubble]

3. “公開” -> “プレビュー”のボタンを押してください。

  以下のようなアイコン+名前+吹き出し+セリフが表示されているかと思います。

A さん
おこんばんわ

B さん
おばんです

主に,typeで形等を指定,subtypeで方向を指定,iconでアイコン指定,nameで表示する名前を指定しています。


4. 次の項目から吹き出しの形等を変更するための方法を説明していきます。

5. セリフを変更するときは,ショートコードの][で挟まれた部分に書き込んで下さい。

[speech_bubble type="drop" subtype="L1" icon="1.jpg" name="A さん"] おこんばんわ [/speech_bubble]
(太字部分参照)

6. type=”drop” の部分で9種類の吹き出しデザイン(アイコンの形含む)を指定します。

[speech_bubble type="drop" subtype="L1" icon="1.jpg" name="A さん"] おこんばんわ [/speech_bubble]

type=”std”とすると,デザインが変化します。デザインは以下のリンクを参照ください。
drop, std, fb(FaceBook風), fb-flat, ln(LINE風), ln-flat, pink, rtail, think

追って日本語版の各記事を追加していきたいと思います。

7. subtype=”L1″の部分では,引き出し部分(尻尾の部分)の左右の指定と,形状の指定を行います。

[speech_bubble type="drop" subtype="L1" icon="1.jpg" name="A さん"] おこんばんわ [/speech_bubble]

a,L1,Left1と同じ分類をされているものは,同じように機能します。type=”think”のみ全て引き出しが丸で表現されます。

引数(どれか一つ) 説明
a,L1,left1 引き出しが線で左側に表示。(しゃべっている雰囲気)
b,R1,right1 引き出しが線で右側に表示。(しゃべっている雰囲気)
c,L2,left2 引き出しが丸で左側に表示。(考えている雰囲気)
d,R2,right2 引き出しが丸で右側に表示。(考えている雰囲気)


8. icon = “1.jpg”の部分では,アイコンを指定できます。

[speech_bubble type="drop" subtype="L1" icon="1.jpg" name="A さん"] おこんばんわ [/speech_bubble]

アイコンをアップロードするフォルダとしては,Speech bubbleプラグインのimgフォルダです。アイコンの追加・変更方法はアイコン編集方法を参照ください。

画像の拡張子としては,jpg, png, gif, svg, tifのものを内部のコードで確認しています。


9. name=”Aさん”の部分では,”Aさん”の部分をアイコンの下部や,吹き出しの上に表示します。

[speech_bubble type="drop" subtype="L1" icon="1.jpg" name="A さん"] おこんばんわ [/speech_bubble]

位置は選択したデザイン毎に決まっています。

10. 吹き出し間の上下間隔が広いと思われた場合は以下のように<div class=”sb-no-br”></div>の間にショートコードを追加してみてください。

無用の改行を削除できます。ただし,セリフが短いとその狭まりは認識しずらいかもしれません。
<div class=”sb-no-br”>
[speech_bubble type="pink" subtype="L1" icon="1.jpg" name="A さん"] おこんばんわ。長い間,ブログを更新されてませんでしたが,如何おすごしでしょうか? [/speech_bubble]
[speech_bubble type="pink" subtype="R1" icon="2.jpg" name="B さん"] おばんです。なんとかやっております。 [/speech_bubble]
</div>

A さん
おこんばんわ。長い間,ブログを更新されてませんでしたが,如何おすごしでしょうか?

B さん
おばんです。なんとかやっております。やっと新しいブログ記事を追加しました。


(注)うまくいかないときのチェック項目

以下の項目をチェック下さい。

  • 手順2の赤丸で示した”テキスト”タブでないとうまくいかない場合があるようです。
  • 手順2の(*)の部分も重要です。☆の部分の半角スペースをチェックください。

コメントから気付かせて頂いた部分をチェック項目として追記させて頂きました。ご指摘いただいている皆様ありがとうございます。

以上で説明を終わります。何かご質問があればご遠慮なくコメント下さいませ。

Pocket

24 thoughts on “吹き出しプラグイン 使用方法

  1. 大倉成人

    はじめまして、大倉と申します。

    突然のコメントで失礼いたします。

    松原潤一さんの紹介でSpeech Bubbleをインストールさせていただき、
    今日はじめて記事に使ってみたのですが、
    テキストのまま表示されてしまいます。
     
    プラグインは有効化しているのですが、
    どこを修正すればいいのかがわかりません。
     
    松原さんとは直接会って話したこともあり、
    仲良くさせてもらっているので、
    松原さんにも相談してみたのですが、
    ちゃんと記載されているので、
    原因がわからないということでした。
     
    一応、記事のURLも記載しておきますので、
    よろしくお願いいたします。

    http://damesalesman-saisei.net/blog/find-usp/

    Reply
  2. 大倉成人

    何度もスイマセン、
     
    松原さんに教えてもらった時に、
    テキストエディタでもビジュアルエディタでも使えると聞いていたので、
    ビジュアルエディタで書いていたのですが、
     
    松原さんにテキストエディタで書き換えてみるように言われて
    やってみたら正常に表示されるようになりました。
     
    お騒がせしてすいませんでした。

    Reply
    1. 管理人 Post author

      大倉さま,なんとか使っていただけたようで安心しております。
      またエディタの方ですが,使用方法の欄に画像を追加するなどして,分かりやすくしたいと考えております。
      今後ともよろしくお願いいたします。

      Reply
  3. 紙山

    いつも楽しく拝見しております。
    このたびは素敵な吹き出しのプラグインをご提供いただき、誠にありがとうございます。

    早速、wordpressにSpeech Bubbleをインストールして使い始めたのですが、指定通りに表示されず困っております。

    具体的には、
    ・左右の指定ができない(2人とも左に寄ってしまう)
    ・吹き出しが表示されない

    といった状態です。
    L1,R1など、解説していただいた通りに色々と試したのですが上手くいきません。

    すでに記述しているCSSが何らかの影響を与えているのでしょうか?
    あるいは他のプラグインが競合してしまっているのでしょうか?

    もし、おわかりでしたらご教授いただけると幸いです。
    何卒、よろしくお願い致します。

    Reply
    1. 管理人 Post author

      紙山さま,ご利用頂きありがとうございます。
      考えうる可能性としましては,

      ○スペースが詰まってしまっていることが考えられます。下の☆印の部分で半角スペースである必要があります。
      [speech_bubble☆type="drop"☆subtype="L1"☆icon="1.jpg"☆name="A さん"] おこんばんわ [/speech_bubble]
      この部分を半角スペースで埋めておかないと,それぞれの状態が区別できないためです。ご確認いただければと思います。

      ○投稿画面にて,”テキスト”にて編集いただけると幸いです。まれに”ビジュアル”にて不具合が出る場合もあるようです。
      ご確認いただければ幸いです。

      ○CSSの件ですが「.sb-type-std > .sb-subtype-a >」等と記述している部分がそれにあたります。
      stdの他,drop,ln,ln-flat等のタイプ別cssがございます。
      この部分と競合しているようなCSSがございましたら,その部分での対応をお願いいたします。

      以上,稚拙ながら私が考えうる可能性を列挙させて頂きました。
      お役に立てればよいのですが。よろしくお願いいたします。

      Reply
  4. Pingback: インストールしたプラグイン | 埼玉東松山の相続サポート | 6万円 坂戸市、吉見町、鳩山町、川島町

  5. サーベルタイガー二世

    こんにちは。
    プラグインインストールさせていただきました。ありがとうございます。

    質問です。

    アイコン画像のサイズを大きくしたいのですが、
    どのように設定したらいいか教えていただけますでしょうか。
    プラグイン編集で”sb-icon”のところにwidthやheightを打ち込んでみましたが変化ありませんでした。

    Reply
    1. 管理人 Post author

      サーベルタイガー二世さま 

      ご利用ありがとうございます。
      申し訳ないのですが,現在のバージョンではアイコン画像のサイズを変更いただけないのです。
      将来のバージョンアップではアイコンのサイズ変更も行いたいと考えております。
      作成当初より考えてはいたのですが,私の力不足もあり,現在のような形でリリースさせていただいております。
      私としてもやりたいところではありますので,それまでお待ちいただければと思います。
      今後ともよろしくお願いいたします。

      Reply
  6. userx

    誤「c,L1,left1 引き出しが丸で左側に表示。(考えている雰囲気) 」

    正「c,L2,left2 引き出しが丸で左側に表示。(考えている雰囲気) 」

    Reply
    1. 管理人

      ありがとうございます!助かります^^
      ご指摘いただきました部分訂正させていただきました。
      今後ともよろしくお願いいたします。

      Reply
  7. tkfm33

    いつもお世話になっております。
    speech bubble活用させて頂いております。

    1点お伺いなのですが、余白の最大限利用について相談させていただきたく存じます。
    吹き出し部分を最大化するため、左側の設置した画像は左寄せ、右側の設置した画像は右寄せとして、余白を極力少なくしたい次第です。

    どちらのcssファイルを編集したら良いか伺えますと幸いです。
    稚拙な質問で申し訳ありません。
    よろしくお願いします。

    Reply
    1. 管理人

      Speech Bubbleをお使い頂きありがとうございます。
      私の備忘録も兼ねまして,記事にしてみました。リンクをご覧下さい。
      端的に言うと,”sb-type-ln.css”であれば,その12行目 「padding: 10px 20px;」の二つ目の「20px」を「0px」に変更すれば良いかと思います。他タイプの.cssでも同じ行ぐらいのpaddingを変更すれば同様の効果が得られると思います。
      ご参考になればよいのですが。。
      よろしくお願いいたします。

      Reply
      1. tkfm33

        管理人様
        お世話になっております。

        この度はご丁寧にご教示くださいましてありがとうございます。
        また、記事まで書いていただきまして大変助かりました。

        非常にわかりやすい内容で、ご指示くださいました内容で反映出来ました。
        本当にありがとうございます。

        Reply
  8. Pingback: speech bubbleプラグインを使えって臨場感を出すサイトづくり | IT副業「脱」初心者!基礎からがっつり稼ぐ!ブログアフィリエイト教室

  9. goro

    管理人様、使い勝手の良いプラグインの作成有り難うございます。
    面白おかしいブログを作成しようと、早速導入してみたのですが、
    typeとsubtypeの反映が無く困っています。
    ご提示頂いているテンプレートをそのままコピペして実験しているのですが、上手くいきません。
    スペースのチェックやビジュアルではなく、テキストでペーストしているのですが、iconとnameのみ表示されてる状態になります。
    wordpressのバージョンに問題があるのかな。とも考えたのですが、どうしても分からず相談させて頂ければと思い、コメントさせて頂いております。
    お忙しいかと思いますが、ご教授頂ければ幸いでございます。

    OS:Windows7
    WordPress:4.3.1–ja
    speech bubble:1.0.3

    Reply
    1. 管理人 Post author

      goro さま、ダウンロードありがとうございます。
      返信が遅くなりもうしわけありません。

      直近で他のユーザさまよりご報告頂いた例と、もしかするとですが同じ症状が発生のかも知れません。
      というのも、テキストエディタの関係で「”」のペーストがうまく行っていないというものです。
      具体的には、「”」(ダブルクォーテーション・2重引用符[半角])が、「”」(2重引用符[全角])にペーストした時点で変化するというものです。

      対策としましては以下2点をお試しいただければと考えております。
      (1)テキストエディタを変えていただく。
      (2) 注意深く「”」の部分を観察頂き、上記のように変化していたら置換頂く。

      もし、可能でしたら問題となっている箇所をコメントに貼り付けて頂いても良いかと思います。
      お手数ですがよろしくお願いいたします。

      Reply
  10. Pingback: 【WordPressプラグイン】会話をLINEの様なチャット形式で表示!全種サンプルと使い方【Speech Bubble】 | はぴすぷ

  11. Pingback: 会話形式の記事が書きたい!吹き出しがつくプラグイン「Speech Bubble」を使ってみたよ - 手芸のスギサク-手作り品のゆるPR部

  12. Pingback: Line風の吹き出しトークができるWPプラグイン「Speech Bubble」会話形式の記事にオススメ!

  13. 太田敦

    初めまして、太田敦と申します。
    つい最近、こちらのプラグインの存在を知り、インストールしました。
    記事には吹き出し式の会話が表示されるのですが、インデックスページで記事の抜粋をしたところショートコードのみが表示されてしまいます。
    なにか解説方法があれば、ご教授いただければと思います。

    Reply
    1. 管理人 Post author

      太田敦さま、プラグインダウンロードありがとうございます。
      いろいろ調べてみたのですが、結論から言うと色々と試していただく必要があるかもしれません。

      以下説明

      • ワードプレスのプラグインは、例「本気で作りたい人向け、WordPressプラグインの作成方法」のなかの「WordPressのプラグインについて理解する⇒WordPressにおけるフックとは何か」に解説されてますように、ある関数にフック(引っ掛け)て、目的とする機能を実行させるといいう風になっているようです。
      • 本、吹き出しプラグインにおきましても、ソースコード”\wp-content\plugins\speech-bubble\classes\SnbSpeechBubble.php”のなかで、

        public function __construct() {
        add_action( 'wp_enqueue_scripts', array( $this, 'action_wp_enqueue_scripts' ) );

        とありますように、”wp_enqueue_scripts”にフックして実行しています。「関数リファレンス/add action」参考。
      • ですので、推測ですがお使いのインデックスページの環境において、”wp_enqueue_scripts”にフックできていないのかもしれません。
      • 対策としてましては、「プラグイン API/アクションフック一覧⇒一般的リクエスト中に実行されるアクション」から、お使いの環境で問題を起こさないアクションへのフックに変更していただくテストをしていただく必要があるかと思います。ざっと見た感じ、大雑把でもうしわけないのですが’registered_post_type’で当たりをつけてみていただいてが良いかも知れません。
      • 具体的には※印の部分をアクションフック一覧の名前(registered_post_type)等で色々と書き換えてみて下さい。

        public function __construct() {
        add_action( '※※※※※※※※※※', array( $this, 'action_wp_enqueue_scripts' ) );

      以上、解説です。

      すみません、慣れないもので調査と返信に手間取ってしまいました。
      また上記間違っている場合もあるかもしれませんが、その際は逆にご教授いただければ幸いです。
      お手数をおかけしますがよろしくお願いいたします。

      Reply
  14. gogondayo

    はじめまして。つい先日(Speech Bubble plugin)をインストール、利用させていただいています。また、その紹介記事をUPしたところツイートやフォローまでして頂いてありがとうございます。

    とてもかわいいプラグインでこの先も使わせていただきたいのですが・・・

    利用方法について質問です。その紹介記事 http://gogon.net/sozaiya_gogon/illust/20501/ の一番下にある、文字数の多い吹き出し「このイラストのサイズは527×・・・・」なのですが、私のIphone6で見ると吹き出しの右側が切れている状態です。PCでは正常に見ることができます。

    何か利用方法に不備があるのでしょうか?文字数や改行が多いなど?

    ここの吹き出し内にイラストも挿入していて、これは削除したのですが、症状は変わりません。

    アドバイス等ありましたら、教えていただけないでしょうか?

    Reply
    1. 管理人 Post author

      gogondayo様

      お世話になっております。つい嬉しくてフォーローさせて頂きました^^
      返信が遅くなり申し訳ございません。リンクを見させて頂きました。

      リンク先では、PCのブラウザでも画面を左右に極端に短くするとおっしゃられているような現象が発生しております。
      通常では起きない現象ですので、調べさせていただきました。

      調査したところ、
      例「正方形にリサイズされたみたいでしゅ!」では
      htmlが<p class=”entry-title single-title”>正方形にリサイズされたみたいでしゅ!</p>
      のようになっており、<p>が修飾されているようです。
      この記事内でも吹き出し以外の部分で、同じようになっているようです。
      そのようなプラグイン or エディタープラグイン等お使いではないでしょうか?
      (Chrome⇒見たい場所で右クリック⇒「検証」を選択していただければ様子がわかるかと思います)

      お調べいただければ幸いです。
      よろしくお願いいたします^^

      PS.当方も勉強になりました。

      Reply
  15. gogondayo

    ご丁寧にありがとうございます。
    の修飾の件はコピペの段階でなにかコードを引っ張ってきてしまったのかもしれません。

    テキストエディタで編集し無事表示できるようになりました。

    これからも、利用させていただきます。

    Reply

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です