流行りの「ブログで吹き出し」をやってみたい!これで解決WPプラグイン「Speech Bubble」

投稿日:2017-05-24 更新日:

ワードプレスとスピーチバブル

なんかこれいやだなぁ。ちゃんとした吹き出しで話したいよ。
でもHTMLとかCSSとか変えないといけないんだよねぇ。わたしそのへん苦手だし簡単に吹き出しで話せる方法ないかな~

アリマスよ

え?え~~~っ!?

遊び心というかブログを書いているとマンネリ化してモチベーションが↓↓ってことありますよね。(まだ2記事目でそれをいうか(笑))

やっぱり、楽しく読んでもらうには楽しく書かなきゃって思うんです。

それで導入したいと思ったのが吹き出し。

最近の有料テンプレートだと標準で吹き出し機能があるんですが、超有名なワードプレス専用のプラグインがあるということで「Speech Bubble」を導入しました。ということで導入記録を残したいと思います。

※現在は「Speech Bubble」から下の記事で紹介している方法に変更しましたので、本記事のSpeech Bubbleでの吹き出しはすべて画像に差し替えてあります。

「Speech Bubble」の導入編

まずはプラグインの導入です。検索してインストールするだけなので簡単ですよ。

「Speech Bubble」のインストール

それではまずプラグインをインストールしなくては何も始まりませんのでインストールしちゃいましょう。

ワードプレス管理画面のプラグインから新規追加を選んで画面右上に「Speech Bubble」と入力します。

すると表示されましたね。「Speech Bubble」


これです。これ。この右上にある「今すぐインストール」をクリックするとほどなくインストールが完了し、


「有効化」というボタンに変わりました。これをクリックして有効化すると完了です。

おどろくほど簡単ですね。

「Speech Bubble」の使用編

インストールが終わったところでさっそく使ってみましょう。

「Speech Bubble」の使用方法

これもまた簡単です。

このようなタグを投稿ページや固定ページのテキストに打ち込むとだけで

こんな感じで表示されます。

ちょっとまって。わたしの顔映ってないよ~ では映るようにしましょう

「Speech Bubble」画像の変更

画像の変更を行うにはまず、使いたい画像のアップロードが必要です。

画像のアップロード先は wp-content/plugins/speech-bubble/img/ になります。具体的に画像で見てみましょう。
※この例はXerver Web FTPです。


いつも使用しているFB-800とかりんの画像をアップロードしました。表示される画像は自動的に60px×60pxにリサイズされるのでアップロードする画像のサイズは少なくとも60px×60px以上の正方形がいいですね。

個人的には150px×150pxとか300px×300pxがいいかなと思っています。もし容量的に許せるなら300px×300pxがおススメです。とくに画像が立ち姿とかの場合は。(理由は後述します。)

画像のアップロードがすんだらiconの部分を表示したい画像の名称にします。

このとき、拡張子(ここでは.jpg)も正確に入れてください。

「Speech Bubble」名前の変更

勘のいいあなたならお気づきかとおもいますがnameの部分を書き換えると

ワタシはFB-800デス。  かりん わたしはかりんだよ。ちゃんと名前が表示されたね。  かりん ねぇねぇビーたんでもさなんかちょっとさびしくない?もっと色とかついてたらうれしいな♡

「Speech Bubble」吹き出しタイプの変更

typeとsubtypeを変更すると色々な吹き出しで楽しめます。それでは一つずつみてみましょう。

スタンダード版

type="std"でsubtype="L1"デス。  かりん type="std"でsubtype="R1"だよ。

type="std"でsubtype="L2"デス。  かりん type="std"でsubtype="R2"だよ。考え中みたいになった!

facebook版1

type="fb"でsubtype="L1"デス。  かりん type="fb"でsubtype="R1"だよ。これはfacebookみたいだね

type="fb"でsubtype="L2"デス。  かりん type="fb"でsubtype="R2"だよ。これはfacebook風味の考え中だね

facebook版2

type="fb"でsubtype="L1"デス。  かりん type="fb"でsubtype="R1"だよ。これもfacebookみたいだね

type="fb-flat"でsubtype="L2"デス。  かりん type="fb-flat"でsubtype="R2"だよ。これもfaceBook風味の考え中だね

LINE版1

type="ln"でsubtype="L1"デス。  かりん type="ln"でsubtype="R1"だよ。これはLINEみたいだね。

type="ln"でsubtype="L2"デス。  かりん type="ln"でsubtype="R2"だよ。これはLINEで考え中だね

LINE版2

ピンク版

type="pink"でsubtype="L1"デス。  かりん type="pink"でsubtype="R1"だよ。これかわいい!

type="pink"でsubtype="L2"デス。  かりん type="pink"でsubtype="R2"だよ。これかわいいなぁ

rtail版

type="rtail"でsubtype="L1"デス。  かりん type="rtail"でsubtype="R1"だよ。吹き出しのしっぽのところが少し曲がってるからrtailなんだね。

type="rtail"でsubtype="L2"デス。  かりん type="rtail"でsubtype="R2"だよ。L1とかR1をL2とかR2にすると考えてる風になるのか。いまさら声を大にしては言えないよ。

drop版

type="drop"でsubtype="L1"デス。  かりんtype="drop"でsubtype="R1"だよ。思ってたよりもたくさんあるね。

type="drop"でsubtype="L2"デス。  かりん type="drop"でsubtype="R2"だよ。たくさんありすぎて迷ってきたなぁ。

think版

type="think"でsubtype="L1"デス。  かりん type="think"でsubtype="R1"だよ。thinkだとR1にしても考え中になるんだね。

type="think"でsubtype="L2"デス。  かりん type="think"でsubtype="R2"だよ。R2にしたら色がかわった!

「Speech Bubble」のカスタマイズ編

ここではCSSを変更しますので、必ずプラグインを停止およびバックアップをとり自己責任でおねがいします。

「Speech Bubble」画像サイズを変えたい

次の吹き出しの色変更と一緒にみてください。

「Speech Bubble」吹き出しの色も変えたい

たくさん種類がありすぎて迷っちゃうんだけど、その前に画像が小さくない?もう少しわたしの顔がわかるようにしたいなぁ。  できることはできますが、CSSを変更しないといけませんよ。  そうなの?むずかしそうだなぁ。。。でも変えたいし。。。  大丈夫デス。とりあえずln-flatをベースに変更してみたものを貼ってみますね。

プラグインSpeech Bubbleを停止させてから「speech-bubble/css/sb-type-ln-flat.css」をひらき一度すべてのコードを削除して上記のコードを貼り付けてください。 貼り付けたらSpeech Bubbleを有効化しマス。するとln-flatで吹き出しを使った際の画像サイズが変わっているはずデス。  ほんとだ!しかも色もかわってるよ!

 

ハイ、かりんさんはピンクが好きなようなので色も変えてみました。 pinkだとかわいいのですが、少々読みにくいのでこちらの方がよいかと思いマス。 画像サイズを変える: /*@表示したいサイズに変更*/箇所を変更。 左側に画像がある吹き出し色: /*@L吹き出しの色変更*/箇所を変更。 右側に画像がある吹き出し色: /*@R吹き出しの色変更*/箇所を変更。 のように好きなサイズ・色に変えてみてくださいネ。

まとめ

Speech Bubbleをつかうと会話形式で楽しくブログが書けますね。

しかも吹き出しのパターンもたくさんあるので好みのパターンで会話をすれば楽しさ倍増。書き方にもよりますが読み手側も楽しく読めるのではないでしょうか。

どうしても吹き出しや画像をカスタマイズしたいという場合は少し大変かもしれませんが、勉強がてらにすこしコードをさわってみるのもいいかもしれませんね。

-ブログ運営

Copyright© FoB log , 2019 All Rights Reserved.