Speech Bubbleプラグインの使い方

【WordPress】会話形式の吹出しSpeech Bubbleプラグインの使い方

自分のブログや記事をもっと分かりやすく伝えたい!なんかポップな感じで伝えたい!弟子と師匠みたいな会話形式で読者に伝えてみたい!

こういう風に考える方は多いかと思います。

でもいざやろうとすると、デザインとかCSSとかスマホ対応とか、「ちょっとめんどくさいな…」ってなりませんか?
ご多分に漏れず私もそうでした…。

なんとか楽する方法が無いかなと調べたところ、あるじゃないですか。イケてるWordPressのプラグインが!これでLINEライクな会話形式をさくっと自分のブログに作ることが出来ますよ(/・ω・)/

プログラミングやWordPressを習得するのに一番近道な方法とは?

Speech Bubbleプラグインの使い方と設定

インストール&有効化方法

speech_bubbleインストール方法
プラグインのインストール方法等は釈迦に説法かと思いますが、一応書かせてください。

インストール手順

 

早速有効化しよう

speech_bubbleプラグインを有効化
「Speech Bubble」をインストールしたら「プラグインを有効化」をクリックして、早速有効化しちゃいましょう。

Speech Bubbleプラグインの使い方

新規投稿画面で下記コードを入れてプレビューを見てみよう

上記コードのプレビュー結果はこちら
shuffleee
ね、すでに吹き出しが出来てるでしょ?

このデフォルトの吹き出しでも良いんだけど、もっとそれっぽいのも欲しいよね。「安心してください。なんと他にも9種類もあるのです。」

 

吹き出しデザインの変え方

吹き出しデザインの変え方はコードにある「type=”◯◯”」の◯◯部分を変えるだけでOKですよ。

それぞれの種類は「drop」「std」「fb」「fb-flat」「ln」「ln-flat」「pink」「rtail」「think」の文字を入れ替えることになります。
イメージを見ないと分かりませんね。それぞれのデザインは以下になります。

drop
pei
どっすか!師匠!

師匠
デフォルトのデザインじゃ。かわゆすなあ。
std
pei
どっすか!師匠!

師匠
シンプルイズベストじゃ!
fb
pei
どっすか!師匠!

師匠
まさにFacebookじゃ。顔も丸くなったぞ。
fb-flat
pei
どっすか!師匠!

師匠
これはアプリのFacebookメッセンジャーかな。
ln
pei
どっすか!師匠!

師匠
旧LINEじゃな。わしは結構この時のデザインも好きじゃぞ。
ln-flat
pei
どっすか!師匠!

師匠
LINEの微妙な色加減は好きじゃ。
pink
pei
どっすか!師匠!

師匠
わしだとちょっとオカマ感が出てしまうぞ。
rtail
pei
どっすか!師匠!

師匠
ビビット系な色じゃな。
think
pei
どっすか!師匠!

師匠
わしの頭の中は覗いちゃダメじゃぞ。

ね、このように色々自分の好みで選べると嬉しいですよね。

 

名前の変え方

名前の変え方は簡単で、コードにある「name=”◯◯”」の◯◯部分を変えるだけでOKですよ。

エロじじぃ
誰がエロじじぃじゃ!

 

吹き出しの向きの変え方

吹き出しの向きの変え方は、コードにある「subtype=”◯◯”」の◯◯部分を変えるだけでOKですよ。パターンは4つで「R1」「R2」「L1」「L2」ね。Rは右側(Right)に吹き出しが付いて、Lは反対の左側(Left)ね。

師匠
漫才は立ち位置が大事じゃな。

L2やR2にすると好きなデザインのまま考え中のイメージに出来るよ!

師匠
わしゃ別に漫才の師匠では無いんじゃが…

 

画像の変え方

デフォルトで付いている画像では名無しの権兵衛さんの青と赤だけで味気がありませんね。出来ればオリジナルや別の画像に変えたいところです。画像の変え方はFileZillaなどのFTPソフトを使用する必要があります。

FTPソフトでWordPressをアップしているサーバに入り「\wp-content\plugins\speech-bubble\img\」に使用したい画像をアップロードしてください。
FileZilla
ここでは「pei.png」というファイルをアップロードしました。

画像ファイルをアップロードしたら次はそのファイル名をコードの「icon=”◯◯”」の◯◯部分に入れましょう。

pei
引越しよっかな。

気になるスマホでの見え方は?

今やスマホの時代、スマホでの見え方は最重要ポイントですよね。あいにくシャッフルブログはPCで見られている方がほとんどですが、とはいえスマホは大事です!

smartphone01

どう?少し余白が大きすぎる部分はあるけど、それくらいだったら自分でカスタマイズしても良いしね。全然許容範囲というかバッチリだと思います

まとめ

いかに見てくださっている方のために分かりやすくするか、分かりやすい見え方にするか、というのがブログだけでなくどんなサービスでも重要だと思います。私はまだまだ未熟者でまだまだ決して見やすいとは言えませんが、徐々に成長していきたいと思います。

そのためにもこの吹き出しプラグインはユーザーさんに分かりやすく、かつポップな感じで伝わると思うのでどんどん多用していきたいと思います。良いプラグインを見つけられて良かったです。

あやうく書き忘れそうになりました汗
こちらのプラグインは下記の「ありそうでなかったものを」のブログの方が作成しております。

詳しい使い方等も載っておりますので是非ご覧ください。

もし良かったらフォローとか購読して頂けると嬉しいです!╭( ・ㅂ・)و ̑̑ グッ !

follow us in feedly

コメントを送る

メールアドレスが公開されることはありません。

CAPTCHA