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

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風の吹き出しが使えるようになったので写真を切り抜いて顔だけを使ってみたりしても面白いですよね。

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

閲覧ありがとうございました!

保存版!illustratorのマジ現場で便利なテクニック&エフェクト集7選... イラストレーターのすぐ使えるテクニック7選!! 制作現場で「このタイトルをもっと見栄えをよくしたい、背景にこういうのがあればもっとアピールしたいメッセージが引き立つのになー」って時に役立つチュートリアルをまとめてみました。 完成形だけをみるのではなく、途中のレイヤーやアピアランスの使い方にも注...
WordPressにyoutube動画簡単埋め込み方法!レスポンシブ対応で高速化... WordPressの記事でYou Tubeの埋め込み動画の表示が重いのを解決する「Youtube SpeedLoad」 !! 素晴らしいプラグインです! しかもブログ記事のYoutube動画表示が高速化されるだけでなくレスポンシブにも対応していて、インストールするだけ!! 設定は1つチェック...
イラレでマップ制作時に役立つエフェクト!質感を簡単にアップする方法... Illustratorの簡単エフェクトチュートリアル!! 今回は、地図やアクセスマップを作る際に、道路や地面などの質感を上げるエフェクトです。 案内リーフレットやパンフレットで地図が中面に見開きで掲載するときってありますよね?? ただ単にマップを作って配置していては、絵的にもたない時があると思...
MacOSマニュアル基礎!ファイルのアイコン画像変更チュートリアル!... Mac OSを使う上で基礎中の基礎になるファイルのアイコン画像の変更方法をご紹介します!! とーーーっても簡単です!本当に簡単です!! 初めてMacを使うあなた、これからMacを購入して使おうかなと考えているあなたでもこのマニュアルをみればすぐにできると思います。 用意してもらうのは変えようと...
【保存版随時追加】商用可能な高品質イラストのフリー素材サイト集!... 広告・チラシ・ポスター、ホームページ、バナー、ブログなどを制作する際に必要になってくるのがイラスト素材。 有料サイトで買ってもいいですが、仕事の見積もりもギリギリでそこまで予算とれるかな〜? どっかにフリー素材の高品質なイラストはないかな〜? 大丈夫! ありまーーすっ!! 必ずブックマ...
Illustratorで桜のシルエット・パターンの描き方チュートリアル... イラストレーターで桜の描き方チュートリアル! デザインやレイアウトでヘビーローテーションな桜のシルエットやパターンをすぐ描けるようになる作り方です!! この作り方を覚えれば、応用で他の花も描けるようになるし、桜の花びらも出来ちゃいますよ。 この作り方にIllustratorのバージョンは関係な...
マックブックプロのバッテリーの実寿命は?少しでも長持ちさせるには?... いつものようにマックブックプロを使って仕事をしていたのですが、ふとこの「バッテリーの寿命」ってどうなんだろうって思ったわけですよ。 あなたもマックブックプロのバッテリーの寿命が気になりませんか? マックブックプロのバッテリーのバッテリーに関する情報は、メニュー左上のリンゴマークの「このMacに...

スポンサーリンク



-Word Press

error: Content is protected !!

Copyright© BUZZ GEEK MAGAZINE , 2018 All Rights Reserved.