ブログでお喋り！WordPress 会話プラグイン「Speech bubble」

実は、以前からプラグインのインストールだけはしてあったのですが画像の準備とか中々使い始める事が出来ずに放置プレイだった

WordPressのプラグイン「Speech bubble」

このプラグインを利用するとLINEやFacebookのメッセージの様に会話形式にて記事を作成する事ができますので、今回は雨天続きでバイクにも乗れずネタも無いってことから

重い腰を上げて、準備に取り掛かります！（笑）

あ、こんな感じでデフォルトの画像を使用するのであればプラグインをインストール後すぐに利用できますので「難しい」のか？「簡単」なのか？問われれば

誰でも簡単に会話形式で記事を作成！

という前振りとなりますね!?（笑）

参考にしたサイト：会話プラグイン「Speech bubble」の設定方法＆使い方

Speech bubble （ふきだしプラグイン）だったら簡単！便利！

まずは、WordPressにプラグイン「Speech bubble」をインストール！デフォルトでは上のやりとりで表示したように「1.jpg」と「2.jpg」の２種類のアイコンが既に用意されています！

デフォルトの画像を使用するのであれば、他は何もやることはありません！

そのまま利用する事が可能です！

また必要に応じてFTPなどで指定されたディレクトリに画像をアップすれば、オリジナルのアイコンを使用する事もできます！

大きい画像でも100pxに自動で変換してくれるらしいのですが、最初から大き過ぎても小さ過ぎても綺麗に作るのが面倒だったので

今回は200pxの画像を作成して放り込んでおきました！（笑）

作成した画像は

• ageha
• トロさん
• ムーさん
• 天の声（笑）
• 店員さん

５種類です！

Speech bubble （ふきだしプラグイン）使い方は？

基本的な使い方は、以下のコードを貼り付けて会話を書いていくだけです！

属性の説明

• type=””　吹き出しの種類
• subtype=””　位置と吹き出しの形（声・思考）
• icon=””　使用する画像のファイル名
• name=”” アイコンの下に表示される名前

[speech_bibble type=”” subtype=”” icon=”” name=””] と [/ speech_bubble] の間（上のコード表の部分で「こんには」と書かれている部分）に会話内容を打ち込めばOKです！

ちなみに

吹き出しの種類は全部で８種類（×2 声＆思考）です！think（考えてる風）は、それぞれの種類の吹き出しに設定されているみたいですね!?

• drop　初期設定のシンプルな吹き出し
• std　超シンプルな吹き出し
• rtail　形が特徴的な吹き出し
• pink　ピンクの吹き出し
• fb　PCのFacebookのメッセージ風の吹き出し
• fb-flat　スマホのFacebookのメッセージ風の吹き出し
• ln　LINEのメッセージ風の吹き出し
• ln-flat　LINEのメッセージ風の吹き出し

think　考えてる風の吹き出し

subtypeプロパティでは、アイコンの位置と吹き出しの形（声・思考）を下記の形で指定します！

• L1　キャラクターの位置：左
  • 吹き出しの先っぽ：通常
• L2　キャラクターの位置：左
  • 吹き出しの先っぽ：考える風
• R1　キャラクターの位置：右
  • 吹き出しの先っぽ：通常
• R2　キャラクターの位置：右
  • 吹き出しの先っぽ：考える風

それでは、実際にどんな感じか？使用しながら説明したいと思います！

drop

ドロップシャドウですかね!?太い吹き出し線と全体に影が付いて浮いている感じがしますね!?

std

スタンダード（標準）を指すのですかね!?シンプルな吹き出しです！

rtail

吹き出しの尻尾がクルンッとなっていますね!?少し使い辛いかも…

pink

全体ピンクな吹き出しです（笑）使い辛い？というより、これは使用する場面を考えてしまう吹き出しですね!?（笑）

fb

フェイスブックのメッセージ風の吹き出しですね!?アイコンが丸抜きされています！

fb-flat

これもフェイスブック風（平面）です！これもアイコンが丸抜きされていますね!?

ln

LINE風です！輪郭がしっかりしていて影もあり使いやすそうです！

li-flat

こちらもLINE風ですね！シンプルな形なのですが、輪郭線と影が無いので背景が白だとモニターによっては少し見づらいかも？

考えている風

L1をL2、 R1をR2に変更するだけです！それぞれの拭き出しで２パターン用意されているみたいですね!?

会話内容はテキスト扱いなのでSEO的にもグッド！

会話内容がテキストなのでSEO的にも良さそうですよね!?また会話内でリンクタグも使えましたので、簡単なタグ打ち（エディターで自動挿入もできますが）ができれば

文字の大きさや太さ、関連ページへのリンクなど

活用の幅が広がる事

間違いいなし！です（笑）

↓会話内のテキストをタグで装飾（文字の大きさと太さを指定して過去記事にリンクを張る）

↓こんな感じになります！

 

どうでしたでしょうか？WordPressで会話形式の記事が簡単に作れるプラグイン「speech bubble」こんな感じで会話形式で書くブログも中々面白そうですよね!?

過去記事で店員さんとのやり取りなど

会話形式に直してみるのも面白いかも！（笑）
やってみましたw

また、全て会話形式だと逆に見づらい記事にも成りかねませんのでポイントを抑えて使用していきたいと思います！

WorePress.ORG プラグイン Speech bubble (ふきだしプラグイン)

スポンサーリンク