スポンサーリンク

WordPressプラグイン【Speech Bubble】LINEやフェイスブック風の吹き出しで更に記事を見やすく!

みなさんこんにちは。
今回はWordPressプラグインであるSpeech Bubbleの使い方についての記事です^^

吹き出しプラグインSpeech Bubble

Speech Bubbleを使えばLINEやフェイスブックのメッセージ風にブログを装飾する事が可能!導入方法・使い方は超カンタン!5分でできますので、ぜひお試しアレ^^

奥さん
いいから、さっさと教えろや
piyo
・・・・はい・・・・・

上記の様なシンプルなデザインから、LINE・フェイスブック風にもデザイン変更可能。
興味のある方は是非お試しください^^

Speech Bubbleを使用して作成した記事はコチラ↓
吉宗 極 / 万両乱舞とアイコンチビ姫!天井狙いで大量上乗せ!高継続率当選か!そして天国内当選は?

スポンサーリンク

まずはSpeech Bubbleのインストールしよう

プラグインのインストール方法は知っている方が多いと思いますが、知らない方の為に解説しておきます^^

1.まず、WordPressの管理画面を開きます。
【左サイドバー】→【プラグイン】→【新規追加】を選択。

speechbubble導入の画像

2.新規追加を開くと下の様な画面が表示されます。右上にプラグインの検索窓がありますので、そこに【Speech Bubble】と入力。

speechbubble導入の画像

3.検索結果が表示されます。【Speech Bubble】が見つかりますので【今すぐインストール】をクリック。

speechbubble導入の画像

4.インストールが完了後、下画面が表示されますので【プラグインを有効化】をクリック。

speechbubble導入の画像

これで【Speech Bubble】の導入は完了です。

Speech Bubbleの記事内での使い方

プラグインをインストールするとショートコードが使用可能になります。
下記コードをコピペして使って下さい。

記事編集画面で上記コードは入力すると、下の様に表示されます。

悟空
オッス!オラ悟空!
べジータ
ふん。カカロットか

名前とセリフを変更しよう

コード内の【name】の部分を変更すればキャラの名前の変更が可能。[][]の間を変更すると、吹き出しのセリフを変更することができます。
では、キャラを【悟飯】と【ピッコロ】に変更してみます。

悟飯
ピッコロさーん!
ピッコロ
・・・悟飯・・・

キャラクターの配置を変更しよう

基本は上記に様な対面させ、会話調にするのがベターだと思いますが、配置を変更する事も可能です。変更箇所は【subtype=”L1″】
R1で右側へ配置 L1で左側に配置します。

悟空
ようべジータ!
べジータ
オレ様に近づくんじゃねー!

キャラクターの画像を変更してみよう

デフォルトはシルエット画像ですが、自分オリジナルの画像に変更する事も可能!
方法は、FFFTP等で、【speech-bubble】の中の【img】フォルダへ画像データをアップロードします。

ファイルのアップロード先

【ドメイン】→【public_html】→【wp-content】→【plugins】→【speech-bubble】→【img】

画像形式

画像データの使用可能ファイル名は半角英数字
使用可能形式は【jpg】【png】【gif】【svg】【tif】

アップロードが完了したら【icon=”1.jpg”】のファイル名を変更します。

piyo
おはよう
奥さん
・・・何だ、テメーか

吹き出しのデザインパターンを変更しよう

吹き出しパターンも変更可能です。 変更箇所は【type=”drop”】
コードは【drop】【std】【fb】【fb-flat】【ln】【ln-flat】【pink】【rtail】【think】の9種です。

drop デフォルト

piyo
おはよう
奥さん
・・・何だ、テメーか

std シンプルなデザイン

piyo
おはよう
奥さん
・・・何だ、テメーか

fb フェイスブック風

piyo
おはよう
奥さん
・・・何だ、テメーか

fb-flat フェイスブックのフラットver.

piyo
・・・
奥さん
・・・何だ、テメーか

ln LINE風

piyo
いつになったら・・・
奥さん
・・・何だ、テメーか

ln-flat LINEのフラットver.

piyo
まともに・・・
奥さん
・・・何だ、テメーか

pink 女子に人気??

piyo
挨拶・・・
奥さん
・・・何だ、テメーか

rtail 男子に人気・・・でもない

piyo
してくれんの・・・?
奥さん
・・・何だ、テメーか

think 心の叫び

piyo
・・・コイツ・・・
奥さん
・・・コイツ・・・

まとめ

いかがでしたでしょうか?
ブログ記事の幅が広がる Speech Bubble ぜひ一度、試されて見て下さい^^

15 Responses to “WordPressプラグイン【Speech Bubble】LINEやフェイスブック風の吹き出しで更に記事を見やすく!”

  1. イス姉 より:

    早速ちょっと入れてみまーす

    私の場合は相手を誰にするかやな・・・w
    アイコンもか

    • piyo より:

      >イス姉さん

      どうもです^^
      超簡単なんで、ぜひ試されてくださいー!

      お相手は・・・記事楽しみにしてますww

  2. もん より:

    早速ありがとうございます!!
    読んでて楽しくなりますね^^
    馬ニートさんとのやりとりをこんな感じでやりたかったんですがまた次の機会にやってみます^^
    とても分かりやすい記事でした。

    • piyo より:

      >もんさん

      そう言って下さると、記事更新した甲斐があり、大変うれしいです^^
      ありがとうございます。

      Speech Bubble導入記事、楽しみにしてます^^

  3. パカ より:

    早速奥様ー‼️笑
    てかこんなのできるの凄いです( ;∀;)
    私ももう少しブログが落ち着いたらやってみます୧(ᕯ˙ᗨ˙ᕯ)୨

    • piyo より:

      〉パカさん

      ぜひ試されてみて下さいー(^-^)
      おもしろい記事、期待しています-w
      稼働も無理せず、ファイトです!

  4. 馬ニート より:

    こんなプラグインもあるんですね!
    僕もやりたいなー、なんて思ってたんで
    早速パクって色々試してみます(^ν^)笑

    これで僕が乱用すれば、世間の評価は
    僕が始めたみたいになりますよね(^ν^)フフフ

    • piyo より:

      〉馬ニートさん

      人気ブロガーが、まさかそんなコスい事するはずないですよね~w

      万が一その時は馬さんのコメント欄を荒らしにきます(^-^)そして馬さんのみ、このページのリンクを貼って戴きます(^v^)ニコニコ

      ともあれ、記事期待しています^^

  5. うきゆき より:

    おおお
    ありがとうございます。
    これは使えそうなプラグイン!
    私も使って見ます!

    (にやり)

    • piyo より:

      〉うきゆきさん

      コメントありがとうございます(^^)

      ニヤリって……
      毎回うきゆきさんの記事センスには嫉妬してます-w

  6. […] ぴよさんのこちらの記事から使い方が丁寧に書かれてます […]

  7. […] LINEやフェイスブック風の吹き出しで記事を見やすくできる、Speech Bubble […]

  8. ひろこ より:

    ありがとうございます!参考にさせて頂きこのサイトに使ってみました。

コメントを残す

サブコンテンツ

Page Top