記事の中に吹き出しがあると、ちょっとかわいらしく見えるね。
CSSで会話を表現する方法なんていうのもありますが、僕はあんまりCSSのことをわかっていません。微調整くらいならなんとな〜くできるけど、まったくもって自信なし。
だけど画像以外でアクセントを加えられるとしたら、会話を表現できる吹き出しスタイルってけっこう筆頭候補なんじゃあないかと個人的に思っています。
さて、本サイト内のエントリーでも時折登場している吹き出し。これWordPressのプラグイン『Speech Bubble』を使っているんです。CSSのことはようわからんけどプラグインならなんとなく使える気がする…と思っていたら、このプラグイン…汎用性がスゴく高い。
僕と同じようにCSSのことはよくわからないけど吹き出しで会話を表現したいという人に、超絶オススメです。
ショートコードで簡単に吹き出しを表現できるプラグイン『Speech Bubble』
このプラグインの最大の特徴が、吹き出しはすべてショートコードを書くだけでOKだというところ。ショートコードにちょっと手を加えるだけで様々な表現ができたり、左右に振り分けることが可能なんです。
プラグイン『Speech Bubble』をWordPressに追加する
なにはともあれ、まずはWordPressの管理画面にプラグイン『Speech Bubble』を追加するところから始めていきましょう。
WordPressの管理画面にログインしたら、【プラグイン】→【新規追加】から『Speech Bubble』を検索します。『Speech Bubble』を発見したら【いますぐインストール】→【プラグインを有効化】をクリックして有効化しましょう。ひとまずこれだけでOKです。
『Speech Bubble』を使って記事内で吹き出しを表現する
投稿記事に『Speech Bubble』を使って吹き出しを挿入する方法はとても簡単です。ショートコードをポンっと追加するだけでOKなんですよ。すっごく簡単。
[php htmlscript=”true”]
[[speech_bubble type="ln" subtype="L1" icon="1.jpg" name="1さん"] 1です 。よろしく。[/speech_bubble]]
[[speech_bubble type="ln" subtype="R1" icon="2.jpg" name="2さん"] 2です。こんにちわ。[/speech_bubble]]
[/php]
ひとまず上のショートコードを投稿画面にコピペしてプレビューを見てみることにしましょう。どうみえましたか？
[speech_bubble type=”ln” subtype=”L1″ icon=”1.jpg” name=”1 さん”] 1です。よろしく。 [/speech_bubble]
[speech_bubble type=”ln” subtype=”R1″ icon=”2.jpg” name=”2 さん”] 2です。こんにちわ。[/speech_bubble]
このように左右にわかれて吹き出しで会話が表現されているのがわかるかと思います。たったこれだけなんですよ。これで吹き出しを表現できるんですよ。
なんて簡単なんだ！
僕はこのプラグインと出会ったことに、ちょっとした感動すら覚えてしまいました。
『Speech Bubble』でいろんな吹き出しを表現することができちゃうよ！
上で表現した吹き出しはLINE風でしたが、このプラグインはすごく便利なことに、ちょっとショートコードに手を加えるだけで色んな吹き出しを表現することができちゃうんです。その数なんと9つ。多っ！
吹き出しのスタイルの変更方法はとても簡単です。【type=”●●”】の●●の部分を変えるだけでOKです。●●の部分に入るコードは以下の9つの中からいずれかを選んであげましょう。
選択肢 → drop・std・fb・fb-flat・In・ln-flat・pink・rtail・think
type=”drop”の場合
[speech_bubble type=”drop” subtype=”L1″ icon=”1.jpg” name=”1さん”] dropはデフォルトです。 [/speech_bubble]
[speech_bubble type=”drop” subtype=”R1″ icon=”2.jpg” name=”2さん”] シャドーがいい感じ。[/speech_bubble]
type=”std”の場合
[speech_bubble type=”std” subtype=”L1″ icon=”1.jpg” name=”1さん”] stdってスタンダード？ [/speech_bubble]
[speech_bubble type=”std” subtype=”R1″ icon=”2.jpg” name=”2 さん”] シンプルですね。[/speech_bubble]
type=”fb”の場合
[speech_bubble type=”fb” subtype=”L1″ icon=”1.jpg” name=”1さん”] fbってFacebookでしょ。 [/speech_bubble]
[speech_bubble type=”fb” subtype=”R1″ icon=”2.jpg” name=”2さん”] Facebookメッセンジャーですかね。[/speech_bubble]
type=”fb-flat”の場合
[speech_bubble type=”fb-flat” subtype=”L1″ icon=”1.jpg” name=”1さん”] fb-flatはスマホアプリか。 [/speech_bubble]
[speech_bubble type=”fb-flat” subtype=”R1″ icon=”2.jpg” name=”2さん”] こっちの方が見たことある人多そう。[/speech_bubble]
type=”ln”の場合
[speech_bubble type=”ln” subtype=”L1″ icon=”1.jpg” name=”1さん”] InはLINEのINですかね。 [/speech_bubble]
[speech_bubble type=”ln” subtype=”R1″ icon=”2.jpg” name=”2さん”] おそらくそういうことでしょう。[/speech_bubble]
type=”ln-flat”の場合
[speech_bubble type=”ln-flat” subtype=”L1″ icon=”1.jpg” name=”1さん”] In-flatはフラットなんですね。 [/speech_bubble]
[speech_bubble type=”ln-flat” subtype=”R1″ icon=”2.jpg” name=”2さん”] のぺっとしてる感じですかね。[/speech_bubble]
type=”pink”の場合
[speech_bubble type=”pink” subtype=”L1″ icon=”1.jpg” name=”1さん”] pinkはイメージ通りって感じ。 [/speech_bubble]
[speech_bubble type=”pink” subtype=”R1″ icon=”2.jpg” name=”2さん”] 女子力を高めるのによさそう。[/speech_bubble]
type=”rtail”の場合
[speech_bubble type=”rtail” subtype=”L1″ icon=”1.jpg” name=”1さん”] rtailはタイルって読むのかな。 [/speech_bubble]
[speech_bubble type=”rtail” subtype=”R1″ icon=”2.jpg” name=”2さん”] 「r」は発音するんですかね。[/speech_bubble]
type=”think”の場合
[speech_bubble type=”think” subtype=”L1″ icon=”1.jpg” name=”1さん”] thinkは心の声です。 [/speech_bubble]
[speech_bubble type=”think” subtype=”R1″ icon=”2.jpg” name=”2さん”] 我はメシア。[/speech_bubble]
よく使いそうなタイプの吹き出しだけいつでも呼び出せるようにしておくと便利ですね。
吹き出しを左右で使い分けるときにいじるのは「subtype」
吹き出しの種類を覚えたところで、次は会話しているように見せるための方法を覚えましょう。といってもこれも簡単。【subtype=”■■”】の■■の部分を変更するだけでOKです。
基本的に左に置きたい場合はsubtype=”L1“。
右に対話する人物を置きたい場合はsubtype=”R1“としてあげればいいかと思います。LはLeft（左）のLで、RはRight（右）のRということなんじゃあないかと思います。
[php htmlscript=”true”]
[[speech_bubble type="ln" subtype="L2" icon="1.jpg" name="1さん"] lnはLINEのLNですかね。 [/speech_bubble]]
[[speech_bubble type="ln" subtype="R2" icon="2.jpg" name="2さん"] おそらくそういうことでしょう。[/speech_bubble]]
[/php]
ちなみに、L2・R2だと以下のようになります。
[speech_bubble type=”ln” subtype=”L2″ icon=”1.jpg” name=”1さん”] lnはLINEのINですかね。 [/speech_bubble]
[speech_bubble type=”ln” subtype=”R2″ icon=”2.jpg” name=”2さん”] おそらくそういうことでしょう。[/speech_bubble]
考えてますね。スタイルをthink以外で考えさせたいときなどに使うといいでしょう。
画像を追加して色んなキャラに会話をさせると面白い
さて、会話の中で最も重要なのはキャラクターなんじゃあないかと思います。というかそうでしょう。『Speech Bubble』にはあらかじめ2つの画像が用意されていますが、オリジナリティを出すにはキャラクターの存在は必要不可欠。写真やイラスト画像を追加してバラエティ豊かな会話を楽しみましょう。
『Speech Bubble』の吹き出しに使用する画像はギャラリーに保存していてもダメです。保存先はプラグインフォルダ内にある『Speech Bubble』内のフォルダになります。
FTPソフトなどからアクセスして以下の場所に吹き出しに使いたい画像をアップロードしておきましょう。
アップロード先：/wp-content/plugins/speech-bubble/img以下になります。
ちなみに、吹き出しの画像を指定するのは【icon=”▲▲”】の▲▲の部分です。ここにアップロードした画像の名前を入れてあげればOKです。
例）icon=”A.jpg” icon=”Q.png”など
よくある失敗として、拡張子が間違っているとアイコンが表示されないというケースがあります。僕も使い始めた当初はこのミスに気づかずに何度か四苦八苦しました。
キャラクターの名前については【name=”◎◎”】の◎◎の部分を好きなように変更してあげればいいでしょう。あとはセリフを入力してあげれば出来上がり。
どうですか？ すごく簡単に楽しいブログ記事を書けそうな気がしませんか？
MarsEditのフォーマットに追加しておくとはかどるよ！
僕はエントリーの執筆にMarsEditというMacアプリを使用しています。
4000円とちょっとお高いアプリですが、色々と試してきた中でこのアプリの使いやすさはピカイチです。
Format→Customizeからよく使いそうなショートコードを登録しておけばいつでもサッと呼び出せるので、あとは必要に応じてiconやname、吹き出し内容を書き換えるだけで手軽に使えます。
簡単・手軽にブログにアクセントを加えることができる『Speech Bubble』。色々な場面で活躍するプラグインだと思います。
直接ダウンロードするならこちらから
[adrotate group=”2″]
コメント