ブログ

Speech Bubble 会話形式でブログを楽しく!設定方法と使い方について解説


Warning: Use of undefined constant SB_ALERT_SUBTYPE_MISSING - assumed 'SB_ALERT_SUBTYPE_MISSING' (this will throw an Error in a future version of PHP) in /home/hinatab0cc0/hinatab0cc0.com/public_html/wp-content/plugins/speech-bubble/classes/SnbSpeechBubble.php on line 180

Warning: Use of undefined constant SB_ALERT_SUBTYPE_MISSING - assumed 'SB_ALERT_SUBTYPE_MISSING' (this will throw an Error in a future version of PHP) in /home/hinatab0cc0/hinatab0cc0.com/public_html/wp-content/plugins/speech-bubble/classes/SnbSpeechBubble.php on line 180

Warning: Use of undefined constant SB_ALERT_SUBTYPE_MISSING - assumed 'SB_ALERT_SUBTYPE_MISSING' (this will throw an Error in a future version of PHP) in /home/hinatab0cc0/hinatab0cc0.com/public_html/wp-content/plugins/speech-bubble/classes/SnbSpeechBubble.php on line 180

Warning: Use of undefined constant SB_ALERT_SUBTYPE_MISSING - assumed 'SB_ALERT_SUBTYPE_MISSING' (this will throw an Error in a future version of PHP) in /home/hinatab0cc0/hinatab0cc0.com/public_html/wp-content/plugins/speech-bubble/classes/SnbSpeechBubble.php on line 180

どうも、チャビン(@gorichabin223)です。

WordPressのプラグインで、LineやFacebookのような会話形式の表示が可能なのがこの「Speech Bubble」です。

イメージはこんな感じ


太郎 さん

花子さん、こんにちは

花子 さん

太郎さん!どうも、こんにちは


文字をつらつらと綴るよりも、会話形式で書くことで、ブログ全体が明るくなりますし、読んでいる方も楽しい気分になりますよね。

早速このプラグインのインストール方法と使い方についてまとめてみました。

Speech Bubbleのインストール方法について

Speech Bubbleのインストールは極めて簡単です。

WordPress管理画面の【プラグイン>新規追加】より、検索エリアでプラグイン名をそのまま入力してください。

インストールはこれで完了です。有効化する事を忘れずに。

次に使用方法です。

Speech Bubble使い方について

まずは、下記のコードを実際に貼り付けてみてください。

ビジュアルモードでもテキストモードでもどちらでも使用できますので、使いやすい方で結構です。

太郎 さん
花子さん、こんにちは
花子 さん
太郎さん!どうも、こんにちは
太郎 さん

花子さん、こんにちは

花子 さん

太郎さん!どうも、こんにちは

こんな感じになりましたか?

このプラグインで変更できる箇所は下記、4つになります。

  1. 位置の変更
  2. メッセージ・名前の変更
  3. 形式の変更
  4. 画像の変更

さっそく、それぞれどうやって変更するのか解説していきます。

①位置の変更について

”名前”
メッセージ

この、subtypeで変更できます。

L1L2R1R24パターンから選んで設定をします。

L1の場合

名前

メッセージ


L2の場合

名前

メッセージ


R1の場合

名前

メッセージ


R2の場合

名前

メッセージ


LとRで左か右を決定しており、1か2でコメント風か考えている風と切り替わっているのがわかりますね。

②メッセージ・名前の変更について

”名前”
メッセージ

メッセージは、「メッセージ」部分を直接変更してください。

名前は、「名前」部分を直接変更してください。

③形式の変更について

”名前”
メッセージ

表示形式は、typeで変更できます。

全部で9種類(drop・std・ fb・ fb-flat・ln・ ln-flat・ pink・ rtail・ think)あります。

下にサンプルを載せてみますので、記事にあったものや流行りのものを使用しましょう~!

<dropの場合>

Dropくん

名前の下に、メッセージが表示されるパターンだね!


<stdの場合>

stdくん

スタンダートタイプがこれなんだね。


<fgの場合>

fbくん

Facebookをイメージしているね。画像が○でかたどられているのが特徴かな?


<fb-flatの場合>

fb-flatくん

fbバージョンの画像部分に線がないですね。


<lnの場合>

inくん

Line形式がこれでしょうか?


<ln-flatの場合>

in-flatくん

これも、Line形式でしょうか? lnとどこが違うのか?


<pinkの場合>

pinkくん

文字、囲みがピンクに変わっていますね!


<rtailの場合>

rtailくん

メッセージ背景色が青色になっていますね。


<tinkの場合>

thinkくん

考えている風の吹き出しになっていますね。


④画像の変更について

画像はちょっとだけ、面倒です。

といっても、そこまでではないのでご安心ください。

”名前”
メッセージ

この、iconの部分で決めているんですが

自分が使いたい画像をサーバにアップロードをして指定する必要があります

アップロード方法についてはこちらの記事を参考にしてください。

WordPressFFFTPからエックスサーバに画像をアップロードする方法について

アップロードができたら、後はファイル名を変更するだけになります。

太郎 さん

画像変更できました!好きな画像に変更してね♪

まとめ

いかがでしたでしょうか。

Speach Bubbleの設定と使い方について理解できましたでしょうか?

LineやFacebookなどのパターンが人気があるのかなぁと感じています。

是非、ブログの一部に組み込んでみて、動きのある記事にしてみてはいかがでしょうか?

  • おすすめの投稿がありません
2021年ポイントサイトランキング
  • モッピー

    累計会員数900万人突破!内職/副業/お小遣い稼ぎするならモッピー!
    会員数国内最大級の、800万人。Amazonや楽天でのショッピングもお得になるし、ポイ活=「モッピー」。上場企業が運営してい流ので安心です
  • ECナビ

    特徴は、覆面モニターやアプリインストールでのポイント獲得です。上場企業が運営していますので、安全性・セキュリティ面も問題なしです
  • ちょびリッチ

    サービス開始してから、累計400万人が利用している有名サイト。 お気に入りのショップでのお買い物や会員登録・資料請求、ゲームやバナーのクリックなど様々な方法でポイントを貯めることができます。