Speech Bubble × AddQuicktag で簡単吹き出し会話を実現してみた

Photo by Unsplash

柴犬のはなちゃん
Kentaro、今回からブログに吹き出し会話を導入したらしいよ!

キリンのぷーちゃん
マジで!聞いてないよ。てかこの会話も公開されてるの?

キリンのぷーちゃん
簡単なのは分かるけどギャラは増えるのかなぁ。今までは影ながらサポートしていたから良いものを。

柴犬のはなちゃん
ま、読みにくいブログがこれで少しは読みやすくなるだろうし、読者の為にやってやろうよ

キリンのぷーちゃん
わかったよ。。。

 

皆さんこんにちは、Kentaroです。

ブログを少しでも読みやすくしようと思い、今回新たにSpeach BubbleとAddQuicktagという2つのプラグインを導入、吹き出し会話を実現しましたので、纏めておきます。

Speech Bubble

Speech Bubbleは吹き出し会話を簡単に導入出来るWordpressプラグインです。

インストール方法

WordPress管理画面から『プラグイン』⇒『新規追加』と進み、Speech Bubbleで検索、インストール&有効化を行います。

有効化するだけで準備は完了です。面倒な設定等は全く要りません。

基本構造はこれ

基本構造は次の通りです。これをコピペして、①〜④に必要事項を入力するだけで吹き出し会話が導入出来ます。

全部で4つの要素で構成されています。

  1. 全体デザイン:全部で9通りのデザインが用意されています
  2. 左右&付け根の種類:キャラを左に置くか右に置くか&付け根の種類(後述)を選択します
  3. 使う画像:使用する画像を指定します
  4. 名前:画像のまわりに出すキャラの名前を指定します

①全体デザイン

全体デザインは9通り用意されています。題名の部分(dropとか)を先程のコードの①の代わりに入力するだけでOKです。先ずはお好みのデザインを選びましょう。

drop

柴犬のはなちゃん
デフォルト設定だけどちょっと野暮ったいよね
キリンのぷーちゃん
あまり好きじゃ無いなぁ

std

柴犬のはなちゃん
stdだよ
キリンのぷーちゃん
シンプルでいいね。気に入った!

fb

柴犬のはなちゃん
その名の通りFacebookみたいなかんじ
キリンのぷーちゃん
確かに〜

fb-flat

柴犬のはなちゃん
これはさっきのをちょっと平面的にした感じかな
キリンのぷーちゃん
見やすいね!Facebookの通知の音が聞こえそう

ln

柴犬のはなちゃん
lnのlはエルの小文字だよアイじゃないので間違いないでね!
キリンのぷーちゃん
LINEぽいね。こんなに簡単に作れるんだ〜

ln-flat

柴犬のはなちゃん
LINE系もういっちょ
キリンのぷーちゃん
LINEをフラットデザインにした感じだね

pink

柴犬のはなちゃん
こりゃまた派手だねぇ
キリンのぷーちゃん
ブログのテーマカラーが赤系だと良いかもね

rtail

柴犬のはなちゃん
こちらは青系だね
キリンのぷーちゃん
ちょっと派手かなぁ

think

柴犬のはなちゃん
肉食べたい
キリンのぷーちゃん
野菜食べたい

②左右&付け根の種類

②にはL1、L2、R1、R2の4通りのいずれかが入ります。

それぞれLは左側から出てくるメッセージ、Rは右側から出てくるメッセージのことで、1は尖った付け根、2は想像している様な感じの付け根になります。

一つ一つ見ていきましょう。

L1

柴犬のはなちゃん
普通にしゃべっている感じかな

L2

柴犬のはなちゃん
想像している感じだね

R1

キリンのぷーちゃん
今度は右から!

R2

キリンのぷーちゃん
もういっちょ

③使う画像

使うキャラクターの画像についてはFTPを使用して以下の場所に格納する必要があります。FTPソフトウェアを使っても良いですし、面倒な方はロリポップサーバーをご利用の場合はWebベースのロリポップFTPでアップロード出来ます。

アップロード先は以下のフォルダです。

wordprss>wp-content>plugins>speech-bubble>img

この中に使いたい画像ファイルを格納し、例えば画像ファイルが形式がjpgでファイル名がhogeだった場合は③にhoge.jpgと入力します。するとプラグインが③の部分に記載されているファイル名を自動で対象フォルダの中から探しに行ってくれます。

.jpgや.png等の拡張子まで含めて記載する必要があることに注意してください。

④名前

最後に各キャラの名前については④の部分に入力すれば完了です。

AddQuicktag

使う度に先程のコードをいちいち書いていては時間が幾らあっても足りませんので、簡単に入力できる様にAddQuicktagというプラグインを導入して登録しておきましょう。

このプラグインを使えばワンクリックでコードを読み込むことが出来ます。

インストール

先程同様にプラグインを検索し、インストール&有効化を行います。

設定

その後Wordpressの管理画面から『設定』⇒『AddQuicktag』とクリックします。

  • ボタンのラベルには自分で分かる様にこのタグの名前を入力します(「ぷーちゃん吹き出し」等)
  • 開始タグには自分で①〜④を入力した初めの[ ]を入力します。
  • 終了タグには[/speech_bubble]と入力します。
  • 一番右のチェックボックスにチェックを入れて全てにチェックを入れます。

以上で設定は完了です。

使い方

ここまで設定を完了すると、投稿時のエディタの中に『Quicktags』というプルダウンが現れますので、そこをクリック、先程設定したタグをクリックすると自分が入力したタグが自動で入力されます。

これで毎回[speech…]と入力する手間無しに簡単にタグを入力することが出来、会話式のブログを作成する手間が大幅に省けます。

まとめ

いかがだったでしょうか。

今回の記事を纏めるとこんな感じです。

  • Speech Bubbleというプラグインを導入すると簡単に吹き出し会話デザインを導入出来る
  • AddQuicktagというプラグインを導入すると毎回コードを入力する手間が省け、吹き出し会話の様なコードを多用するブログ作成にかかる時間が短縮できる
柴犬のはなちゃん
どうだったかな?頑張って説明したから疲れちゃった
キリンのぷーちゃん
今後もKentaroには頑張らせるのでまた見に来てよね!したっけまたねー