吹き出し,プラグイン,ワードプレス,会話,チャット

Word Press

Line風の吹き出しトークができる超おすすめWPプラグインSpeech Bubble

更新日:

スポンサーリンク

 

インタビューをしているような記事を書く時に吹き出しでトークを表現できるWordPressのプラグインをお探しの方、ぜひコレを使ってみてください。

そうそう、記事がマンネリ化して少しアクセントや表現の幅を広げたいって方にもオススメ。

この「Speech Bubble」を使えばLineのようなトークがブログ記事にも入れることができますよ。
プラグインはインストールすつだけだし、使い方はショートコードを記憶させればラクチン!!!

しかも吹き出しだけでなくトークしているキャラも自由にカスタマイズできるから、いろいろなキャラや人物を記事の中に登場させることができて、使ったらちょっとハマるかも(笑)

それではっ!!!!!

Line風のチャットトークのような吹き出しが表示できる「Speech Bubble」をご紹介したいと思います。

Speech Bubbleを使ってLine風のトークを記事に入れよう!

さぁ、はじめはプラグインの新規追加で「Speech Bubble」と検索して、インストールして有効化しましょうね。

設定はありません。これで終了ですね。

使い方はこちらのコードを基本的に使っていきます↓

A さん
おこんばんわ
B さん
おばんです

上のコードを「テキストモード」に貼り付けてください。プラグイン設計者さんのサイトではテキストモードと書いてありましたが「ビジュアルモード」でも動作しますね。

ちなみに使ってみるとこんな感じです。

A さん
このプラグインいいね!!
B さん
うん!マジで!

こういう感じですね!!

 

A さんの名前
Aさんのコメント
B さんの名前
Bさんのコメント

「"A さん"」に名前を入れる事で上側の人の名前になります。

そして「"B さん"」に名前を入れると下側の人の名前ですね。

コードサンプルの「おこんばんわ」のとこにはAさんが話す言葉で

「おばんです」のとこにはBさんが話す言葉になりますね。

 

吹き出しのタイプはこんな感じ!

吹き出しは9種類あります。吹き出しの中の言葉が種類のコード名になりますよ。

A さん
dropだよ
B さん
stdだよ
A さん
fbだよ
B さん
fb-flatだよ
A さん
lnだよ
B さん
ln-flatだよ
A さん
pinkだよ
B さん
rtailだよ
A さん
thinkだよ

 

「subtype」は右側に表示するか左側に表示するか「L1」で左側一行目に吹き出し調で表示、「R1」で右側の一行目に吹き出し調で表示って感じ。

L1 R1で会話風の吹き出し、L2、R2で考えている感じの吹き出しです。

サンプルコードは二行分のコードしかないのでコードを入れて表示されるのは2行だけですが、ショートコードでもっと行数を増やす事も可能ですね。

長めのトークばかりを追加したいのであれば、始めからショートコードに行数を増やしておくと便利ですねっ!!

ちなみに左側2行だとこんな感じ!

パンクロッカー
左に寄ってるかーーい!
お客さん
寄ってるよ〜。

みたいに表示されます!

 

画像の変更方法は???

画像も自由にカスタマイズできますよ!FTPソフトを立ち上げて、ご自分のサーバーの

/ドメイン/public_html/wp-content/plugins/speech-bubble/img

この階層に使いたい画像を追加します。そしてその画像の拡張子までの名前を「icon="1.jpg"」の1.jpgと入れたい画像の名前を差し替えることで画像が表示されます。

A さん
必ず追加した画像名すべて拡張子まで入れるんじゃぞ!!

GIFアニメもイケますね!!その他にもpngも大丈夫です。汎用画像フォーマットなら使えると思います。

 

Line風の吹き出しができるプラグインのまとめ

せっかくLine風の吹き出しが使えるようになったので写真を切り抜いて顔だけを使ってみたりしても面白いですよね。

かわいいペットが話しているチャット風景もペット好きにはたまらない会話コンテンツになるでしょうし。
使い方は無限にありそう。ぜひ使ってみてくださいね。

次ページはこちら!

WordPressプラグイン Quick Adsense日本語表示のやり方!コピペで簡単... WordPressプラグインの「Quick Adsense」をインストールして、そのまま使うと日本語表示が文字化けするので注意!! 特にアドセンスの「スポンサーリンク」が文字化けすると規約違反にもなるのできちんとスポンサーリンクが日本語表示されるようにしましょう! やり方は本当に簡単です!! ...
イラストレーターの無料毛筆ブラシセット!高品質で使える素材まとめ... デザイナーの方にぜひ見てほしいイラストレーターの毛筆ブラシセットのご紹介! 何か使えるブラシは無いかな〜とネットで検索しているあなたのために、筆で手描きしたようなリアルで高品質なブラシ素材を厳選しました。 リアル感のある素材を使うだけでデザインテクニックがグンと上がりますよ。 しかも無料で...
Webデザイナーが見るべきインスピレーションが湧くWebサイト集8選... Webデザイナー初心者でもベテランでもWebサイトデザインの参考になる、海外のWebサイトデザイン集8選を紹介します。 スッキリしたデザインからアヴァンギャルドなデザインまで幅広く参考になるサイトが集められているのでインスピレーションが掻き立てられること間違い無し! Webデザイナーだけでなく、...
写真の個人情報漏洩を防いでくれるWordPressプラグインが便利すぎる!... WordPressにスマホやデジカメで撮った写真を何もせずに載せるのはマジで危険っ!! 写真のEXIF情報(メタデータ)から撮影場所などの個人情報が漏洩するかも?? EXIF(イグジフ)情報には、撮影したGPSの位置情報、撮影日と時間、撮影に使用したスマートフォンやカメラの機種情報が入っていま...
ブログで内部リンクを簡単にリンクカード風で貼るプラグインの使い方!... どうにかして内部リンクをキレイに貼ってサイトの回遊率をあげたい! 文字だけのリンクなんて味気なくてなんだか見た目もパッとしない! アイキャッチ画像が付いたオシャレなリンクカードを貼りたい! そう思っているあなたにオススメのプラグインはこれっ!!!!! 「Pz-LinkCard」。 「Pz...
危険!リファラスパム!アナリティクス設定で除外する方法紹介!... 来たっ!! ついに来たーーー!!! 来てほしくないアイツが来たーー!! 2015年に入ってから、数多く確認されているリファラスパムに遭遇しました! と言ってもこのサイトではないのですが、運営している別のサイトにリファラスパムが来ました。 リファラスパムに遭遇したのは初めてだったので、...
クリスマスカードの無料イラスト素材集!高品質で可愛い画像が勢揃い!... クリスマスカードの無料イラストテンプレート集をご紹介します! 高品質なイラストで、可愛いサンタクロースやトナカイ・スノーマンやクリスマスツリー・クリスマスリース、プレゼントのイラストなどが入っている子供向けのタイプから大人向けのクラシックでシンプルな上品なタイプまで幅広く集めてみました。 いつも...
新年の挨拶 基本マナーと取引先へのお歳暮の渡し方や挨拶回りのやり方... ビジネスシーンで役立つ、新年の挨拶回りの基本マナーをご紹介します!! 営業での年末年始の挨拶回りに行くときに心得ておくべきことがあります。 やはり挨拶回りの基本といえば、直接相手・お客様に会うことですよね。 直接会って一年の感謝を伝えることがとても重要です。 そうでなくても多忙な年末年始...
【Photoshop無料ブラシ】デザイナー必須の手描き風の筆ストローク集!... Photoshopをお使いのグラフィック・広告・WEBデザイナーさんにオススメしたいっ!! 現役の広告デザイナーがこれなら、現場で使えるなーっと思ったPhotoshopブラシの無料ダウンロードまとめです! ブラシって、CGなどの画像を作り込んでいくうえで、重要なポイントですよね。 筆ストロ...
Photoshop無料キラキラブラシ!商用可で高品質!役立つフリー厳選素材10選!... Photoshopのキラキラブラシ素材を厳選してみました。 キラキラエフェクトを自作しなくてもこんなに高品質なブラシ素材があるんです! デザイナーの仕事の手間を省くことができる超優秀フリーブラシ素材です。 キラキラブラシって、タイトル周りから背景、ちょっとしたアクセントにといろいろと使う場面が...

スポンサーリンク



-Word Press

error: Content is protected !!

Copyright© BUZZ GEEK MAGAZINE , 2018 All Rights Reserved.