WordPressのSpeech bubbleを使って会話を再現、CSS変更、画像準備、使用上の注意点など

この記事の読了時間は約8分です。

Speech bubbleという会話を吹き出しで表現できるプラグインを導入してみました。

デザインを変えるためのCSSの変更、ジェネレータを使った画像の準備&差し替え、使用上の注意について。

大阪にお笑い芸人の単独ライブに行くことが多いので、面白かったやりとりをブログで紹介するには吹き出しが有効だと思い導入しました。

吹き出しの種類

デフォルトで用意されている吹き出しの種類は9種類。
speech_bubble type=”＊＊”の値を以下の中から選ぶと種類を変えられます。

コードはdrop・std・ fb・ fb-flat・ln・ ln-flat・ pink・ rtail・ thinkのどれかを選べばいい。

WordPressの吹き出しプラグインSpeech Bubbleで会話形式のブログコンテンツが作れる！ | ブログマーケッターJUNICHI

登場人物が複数いる場合

吹き出しの色がAさんとBさんで異なるものは2人の登場人物を想定して作られています。なので、複数の人物を使う場合は吹き出しは人物ごとに色が変わらないものがいい。
色が変わらないのはdrop、std、pink、rtailの4つ。
見やすさ的にdropかstdの2択。

漫才を表現する場合

お笑いライブを見に行って、その時の印象的なボケ・ツッコミを表現したい場合は、吹き出しの色がAさんとBさんで異なるものの方がわかりやすい。
ただし、Bさんの色がAさんの色に比べて濃いと、ツッコミのフレーズが目立ってしまうので、なるべく色の差がない（目立ち度が平等）ものがいい。
吹き出しの色は異なるが、目立ち度の差がないものはfbかIn

画像部分を左寄せしたい場合

Speechbubbleの制作者のサイトで方法が公開されています。

参考WordPress Speech Bubbleプラグインをアレンジしたい人のためのCSS変更方法 

プラグインから編集はできないので、ソースを表示させてCSSをいじって、それをコピペで適用させる方法が紹介されています。

人物画像の準備

Speech bubbleでは吹き出し時の人物画像を指定の画像に置き換えることができます。
ブログ記事によく登場する人物を整理して、画像を準備しましょう。
あとから追加することができるので必要な時に追加でOKです。
僕の場合だと、自分、おかん、おとん、アインシュタイン稲田、アインシュタイン河井。

「いらすとや」を使う

手っ取り早く画像を準備したい場合は商用利用可で無料で使える「いらすとや」がおすすめです。かわいくて表情豊かな画像がたくさんあります。ブログとtwitterで使っているアイコンも「いらすとや」のものを使っています。

 

 

 

 

 

人気がありすぎて、日本全土に浸透しているという情報が。

参考いつの間にか、日本が「いらすとや」だらけになってる(全文表示) 

あなたの街の情報誌もよく見ると「いらすとや」がありませんか？

似顔絵メーカーを使う

自作する場合は似顔絵メーカーを使うと時間が省略できます。

似顔絵ジェネレータ

>>http://www.nigaoemaker.jp/generator/

似顔絵ジェネレーター : 似顔絵メーカー

リアルでかわいい似顔絵が作れる。

 

 

 

ビオレママ顔メーカー3

>>http://www.kao.co.jp/biore/biore-u/bioremamagao/

花王 ビオレｕ ビオレママ顔メーカー3

ゆるい感じの画像が作れるので吹き出しにはちょうどいい。

 

 

アバターゲームズ

>>http://www.avatargames.jp/

アバターゲームズ | アバタージェネレーターや無料ゲームを作成アバタージェネレータにある６つの中から１つを選ぶ

 

 

FaceQ

中国の掲示板サイトなどでよく見るテイストの似顔絵を作れるアプリ。画像にセリフを入れられる。

にがおえやさん キュート

頭がでかい独特なかわいいアイコンを作れるアプリ。

アイコンを好きな画像に設定する方法

1. 【自分のサイトのURL】/public_html/wp-content/plugins/speech-bubble/img内に画像をアップロードします。FTPソフトやサーバー会社のファイルマネージャーを使ってアップロードして下さい。画像サイズは大きくても縮小されるので、正方形であれば何でもいいです。
2. ブログを書く時のタグをicon=”＊＊”の値に保存した画像ネーム（～.pngなど拡張子も含む）を入れればOK

Speechbubbleの実例とコード

実例：アインシュタインの掴みネタ

アイコン画像はhttp://100coin1up.jugem.cc/?eid=2619で公開されているMii画像を利用。

コード

Speechbubbleを有効化して、稲田の画像をinadanaoki.jpg、河井の画像をkawaiyuzuru.jpgで保存していると、以下のコードで上記のやりとりが再現できます。

実例：おとんとおかんのやりとりに俺がツッコむ

「いらすとや」の画像を使用。

参考お爺さんの顔のアイコン

参考お婆さんの顔のアイコン

参考いろいろな表情のイラスト「おじさん」

コード

Speechbubbleを有効化して、おとんの画像をoton.png、おかんの画像をokan-old.png、俺の画像をossan.jpgで保存していると以下のコードで上記のやりとりが再現できます。

実例：若めのおかんアイコンを使った吹き出し

アバターゲームズのジェネレータで作成したアイコン（若めのおかん）を使用。

コード

Speechbubbleを有効化して、おかんの画像をokan.gifで保存していると以下のコードで上記の吹き出しが再現できます。

画像が反映されない場合の確認事項

1. icon=”＊＊”の＊＊の部分に画像を保存する時につけた名前と同じ名前が入っていますか？
2. 画像の名前は日本語を使わず、ローマ字と数字で構成されていますか？
   例、おっさん.jpg ではなくossan.jpg
3. ＊＊の部分に拡張子である、.jpg、.gif、.pngを入れていますか？
4. .jpgではなく.jpegである場合もあります。正しい拡張子を入力していますか？
5. 画像は正方形になっていますか？長方形だとうまく表示されません。

異なる似顔絵メーカーを使って画像を作成すると、保存する時の拡張子が違うので、コードの入力時にはよく確認しましょう。

使用時の手間を省略

Speechbubbleはショートコードがないので、他のプラグインを使って手間を省略すると便利です。登録したコードを簡単に呼び出すプラグインとしてはAddQuicktag、コードスニペットなどがあります。

Quicktagsはプラグインを有効化して、設定で吹き出しコードを入力しておけばOK、記事作成時に「Quicktags」から選べるようになります。コードスニペットはまだ導入していないので使い方不明ですが、同じように使えるはずです。

Speechbubleの注意点

長い間更新されていない

Speechbubbleの最終更新は2年前（2016年10月15日現在）。作者のサイトを見ても更新する情熱がないので、おそらくこのまま放置されることになります。

プラグインの詳細を開くと

このプラグインは現在使用している WordPress のバージョンではテストされていません

という警告文が出ます。

更新されないということはセキュリティ上の問題や、wordpressのバージョンアップに対応しないということなので、今後不具合が出てきそうです。

多用は厳禁

会話風の吹き出しは多用すると逆に読みにくくなります。

ブログの書き手である自分から読者へのメッセージが記事なので、自分のアイコンを使って吹き出しで表現するよりも、「」と画像で訴えた方がシンプルです。

吹き出しの会話は読者に低俗な印象を与えてしまう危険性もあります。

まとめ

• Speechbubbleは画像アイコンを差し替えて使う。
• 画像がうまく反映されない場合は拡張子を確認する。
• AdddQuicktagsなどを使って記事作成画面で簡単に呼び出せるようにしておくと便利。
• 多用は厳禁、ワンポイントで使うと効果的。
• プラグインが古いので不具合出るかも。

---

この記事をブログ等で紹介する際は下のHTMLコードをコピペしてお使い下さい。
泣いて喜びます。

<a href="http://49hack.jp/speechbubble-plugin-css-gazou/">WordPressのSpeech bubbleを使って会話を再現、CSS変更、画像準備、使用上の注意点など</a>