働いテイル

吹き出しプラグインで会話表現ができるSpeech Bubble

  • このエントリーをはてなブックマークに追加
Speech Bubble
Pocket

ただ記事を書くより、楽しくわかりやすく伝えたい場合もあります。
そこで記事投稿で簡単に会話形式にできる吹き出しプラグインを使ってみました。

こんにちは。

ちち!こんにちは!

吹き出しプラグインで会話表現できるSpeech Bubbleのインストール

スピーチバブルはwordpressのプラグインとなります。
インストールについて簡単に手順を説明しておきます。

【手順1】
WP管理画面 左メニューの「プラグイン」→「新規追加」

SpeechBubbl

【手順2】
[1]にある検索ボックスに「Speech Bubble」を入力しEnter。すると[2]のように一覧が表示される。 図は「インストール済み」となっているが、ここのボタンが「今すぐインストール」となっているのでクリックしインストール。

SpeechBubbl

【手順3】
インストール完了後、プラグインを有効にする。後から「インストール済みプラグイン」の一覧から有効にすることもできます。図は「インストール済みプラグイン」一覧画面。

SpeechBubbl

この作業でインストールは完了となります。

吹き出しプラグインを使って記事を書いてみる

ビジュアルモード、テキストモードどちらにも以下のコードそのままコードを張り付けることで利用できます。
以下のコードをそのまま張り付けると

こうなります。

Aさん
こんにちは

Bさん
はい。こんにちは

あとは必要な編集をすれば会話形式の記事作成が可能です。

名前を変更する

■■■と●●●の箇所を変更するだけです。簡単ですね。

セリフを変更する

■■■と●●●の箇所を変更するだけです。

吹き出しパターンを変更する

『Speech Bubble』には初めから9つの吹き出しパターンが用意されています。
speech_bubble type=”drop”のtype設定を変更することでデザインがかわります。

  1. drop(影付きの最初設定)
  2. std(白ベースのシンプルタイプ)
  3. fb(facebookタイプ)
  4. fb-flat(facebookタイプ)
  5. ln(以前のLINEタイプ)
  6. ln-flat(今のLINEタイプ)
  7. pink(ピンク)
  8. rtail(エメラルドブルー)
  9. think(考え中のモヤモヤ吹き出し)

drop

「drop」を設定しました。

どろっぷ?

std

「std」を設定しました。

えす、てぃ、でぃ?

fb

「fb」を設定しました。

えふびー?

fb-flat

「fb-flat」を設定しました。

えふびーふらっと?

ln

「ln」を設定しました。

えるえぬ?

ln-flat

「ln-flat」を設定しました。

えるえぬふらっと?

pink

「pink」を設定しました。

ぴんく!すき!

rtail

「rtail」を設定しました。

あーるたいる?

think

「think」を設定しました。

!!脳に直接?!

キャラクターの位置を変更する

fb-flatタイプをベースに調整しています。

左側へ揃える

subtype箇所をL1へ設定するだけです。

娘、こっちにきなさい。

ちち、いた。

右側へ揃える

subtype箇所をR1へ設定するだけです。

娘、今度はこっちにきなさい。

ちち、いた。

吹き出しの形状を変更する

話している状態

fb-flatタイプをベースにsubtype=”L1″、subtype=”R1″を設定しています。

subtype=”L1″を設定しています。

むすめはsubtype=”R1″だよ!

考えている状態

fb-flatタイプをベースにsubtype=”L2″、subtype=”R2″を設定しています。

subtype=”R1″を設定しています。

むすめはsubtype=”R2″だよ!

subtype=”●●”にL1を設定すれば左寄せの話している状態、R1を設定すれば右寄せの話している状態。
subtype=”●●”にL2を設定すれば左寄せの考えている状態、R2を設定すれば右寄せの考えている状態となります。
デザインはtype設定に依存するようです。

アイコン(イラスト)を変更する

ちち、変身します。

とう!

ばばーん

ちちがくまさんになった。

まずはアイコン画像のアップロード先を確認します。
アイコン画像のアップディレクトリは、wp-content/plugins/speech-bubble/img/となっているはずですので、FTPソフト等で利用したいアイコン画像を対象ディレクトリにアップロードします。
アップロード後、icon=”1.jpg”の設定をアップしたファイル名に変更することで、好きなアイコン画像を利用することができます。

ちなみに上記は、上からchichi-l.jpg、chichi-bureru.jpg、kuma.jpgの3つのアイコン画像を設定しています。

吹き出しプラグインSpeech Bubbleのまとめ

Speech Bubbleプラグインを使うと、内容をまとめきれないような場合でも、会話のキャッチボールという形で勢いよく書けますね。
また、会話形式でまとめる必要があるため、結果的に簡潔でわかりやすい記事になると思います。

ただ、ヘッダーにスピーチバブル用のCSSがやたら読み込まれるので改善したいです。

Pocket

スポンサーリンク