今回は「Speech Bubble」というWordPressプラグインをご紹介します。
ショートコードと呼ばれる仕組みを使うことで、吹き出しを使った会話調の記事を簡単に書くことができます。
いくつかデザインなどもカスタマイズできますし、会話内の文章はHTMLとして出力されるので、SEO的にも良い感じ。
本記事の時点で最新版である Version 1.0.3 で解説していきます。
どんなプラグイン？
例えばこんな内容を記事に書くと・・
[speech_bubble type=”fb” subtype=”R1″ icon=”oruzu.jpg” name=”おるず”]WordPressプラグイン「Speech Bubble」が使いやすいですよ〜[/speech_bubble]
[speech_bubble type=”fb” subtype=”L1″ icon=”1.jpg” name=”読者さん”]おぉ！どんなプラグインですか？[/speech_bubble]
[speech_bubble type=”fb” subtype=”R1″ icon=”oruzu.jpg” name=”おるず”]具体的には、ですね・・[/speech_bubble]
こんな感じで表示されます。
[speech_bubble type=”fb” subtype=”L1″ icon=”1.jpg” name=”読者さん”]LINEやFacebookみたいな会話風の記事を書くには、どうすれば？[/speech_bubble]
[speech_bubble type=”fb” subtype=”R1″ icon=”oruzu.jpg” name=”おるず”]WordPressプラグイン『Speech Bubble』が使いやすいですよ〜[/speech_bubble]
[speech_bubble type=”fb” subtype=”L1″ icon=”1.jpg” name=”読者さん”]おぉ！どんなプラグインですか？[/speech_bubble]
[speech_bubble type=”fb” subtype=”R1″ icon=”oruzu.jpg” name=”おるず”]具体的には、ですね・・[/speech_bubble]
会話調だと、読みやすくなりますねー。
上記は１行が長くなっているので折り返されちゃっていますが、１行が１つの吹き出しに対応しているので、設定もしやすいかと。
Speech Bubble の導入方法
１）プラグインのインストール
公式プラグインとして登録されているので、WordPress管理画面の「プラグインの追加」から探せば出てきます。
通常のプラグインと同様、インストールしちゃいましょう。
以下、制作者さんのブログも参考に。日々アップデートされているので、新しい機能の追加などもあるかもしれません。
http://www.arisoude-nakatta.com/wp-speech-bubble-plugin-toc-v-1-0-jp/
２）記事を書いてみる
プラグイン用の設定ページはありません、インストールすれば即使えます。
WordPressの「ショートコード」と呼ばれている仕組みを使っており、先ほど例としてお見せしたような [speech_bubble] 〜 [/speech_bubble] という形式で入力すれば、自動で対応する内容（今回は吹き出し文章＋画像）に変換してくれます。
・・あぁそれと、入力する際はWordPress編集画面を「ビジュアル」から「テキスト」に変えてから入力しましょう。
Speech Bubble で設定可能なパラメータ一覧
書き方の基本形式としては、こんな感じです。
[speech_bubble type=”●●●” subtype=”●●●” icon=”●●●.jpg” name=”●●●”]●●●[/speech_bubble]
●●●の部分を変える事で、デザインや表示内容を変更できます。各パラメータについて、見てみましょう。
type: 吹き出しのデザイン
吹き出しの見た目デザインを選ぶ事ができます。現状、以下の９つから選択可能。
[speech_bubble type=”drop” subtype=”L1″ icon=”oruzu.jpg” name=”おるず”]type=”drop” にした結果[/speech_bubble]
[speech_bubble type=”std” subtype=”L1″ icon=”oruzu.jpg” name=”おるず”]type=”std” にした結果[/speech_bubble]
[speech_bubble type=”fb” subtype=”L1″ icon=”oruzu.jpg” name=”おるず”]type=”fb” にした結果[/speech_bubble]
[speech_bubble type=”fb-flat” subtype=”L1″ icon=”oruzu.jpg” name=”おるず”]type=”fb-flat” にした結果[/speech_bubble]
[speech_bubble type=”ln” subtype=”L1″ icon=”oruzu.jpg” name=”おるず”]type=”ln” にした結果[/speech_bubble]
[speech_bubble type=”ln-flat” subtype=”L1″ icon=”oruzu.jpg” name=”おるず”]type=”ln-flat” にした結果[/speech_bubble]
[speech_bubble type=”pink” subtype=”L1″ icon=”oruzu.jpg” name=”おるず”]type=”pink” にした結果[/speech_bubble]
[speech_bubble type=”rtail” subtype=”L1″ icon=”oruzu.jpg” name=”おるず”]type=”rtail” にした結果[/speech_bubble]
[speech_bubble type=”think” subtype=”L1″ icon=”oruzu.jpg” name=”おるず”]type=”think” にした結果[/speech_bubble]
subtype: 会話キャラの配置（左か右か）としっぽ（？）の種類
このパラメータで出来る事は、２つあります。
１つは、会話キャラの画像を吹き出しの左右どちらに置くか？です。パラメータの先頭に「L」をつけると画像が左に、「R」をつけると画像が右に配置されます。左右交互に置けば、LINEなどと同じようにやり取りしている様子が見やすい文章になるかと。
もう１つは、吹き出しのしっぽ（これ何て呼べば良いんだろう・・）のデザインです。吹き出しって、文章部分から会話キャラ画像に向かってちょろっと何か伸びてますよね、誰が言っているのか分かりやすいように。これの見た目を２種類から選べます。「1」だと通常の会話風、「2」だと考えたり思い出したり心の声的な会話風です。
・・具体的に見てもらった方が分かりやすいと思うので、使ってみた結果を以下に。
[speech_bubble type=”drop” subtype=”L1″ icon=”1.jpg” name=”おるず”]subtype=”L1″ の吹き出し[/speech_bubble]
[speech_bubble type=”drop” subtype=”R1″ icon=”oruzu.jpg” name=”おるず”]subtype=”R1″ の吹き出し[/speech_bubble]
[speech_bubble type=”drop” subtype=”L2″ icon=”1.jpg” name=”おるず”]subtype=”L2″ の吹き出し[/speech_bubble]
[speech_bubble type=”drop” subtype=”R2″ icon=”oruzu.jpg” name=”おるず”]subtype=”R2″ の吹き出し[/speech_bubble]
icon: 会話キャラの画像
吹き出しをしゃべっている会話キャラの画像を設定します。標準で「1.jpg（青い人）」と「2.jpg（オレンジな人）」が用意されているようです。
[speech_bubble type=”drop” subtype=”L1″ icon=”1.jpg” name=”青い人”]icon=”1.jpg” の人です[/speech_bubble]
[speech_bubble type=”drop” subtype=”L1″ icon=”2.jpg” name=”オレンジな人”]icon=”2.jpg” の人です[/speech_bubble]
自分で用意した画像を使いたい場合は、現状だとプラグインのフォルダ内に画像を配置する必要があるようです。
name: 会話キャラの名前
吹き出しをしゃべっている会話キャラの名前を設定します。
「会話キャラ画像」の下、もしくは会話文章の上に表示されます。どちらに表示されるか？は、typeパラメータで設定した吹き出しのデザインによって決まっているようです。
[speech_bubble type=”drop” subtype=”L1″ icon=”1.jpg” name=”Aさん”]Aさんのちょっと笑えるお話[/speech_bubble]
[speech_bubble type=”std” subtype=”L1″ icon=”2.jpg” name=”Bさん”]Bさんのためになるお話[/speech_bubble]
[speech_bubble type=”fb” subtype=”L1″ icon=”oruzu.jpg” name=”おるず”]おるずのどうでもいいお話[/speech_bubble]
吹き出し内の文章
[/speech_bubble]の前に、実際に吹き出し内へで表示させたい文章を入力します。
より高度なカスタマイズ
さてここからは、パラメータを変えるだけでは出来ないカスタマイズなどを。
※注意：ここから先のカスタマイズを行なうと、プラグインをアップグレードした際にカスタマイズ内容が消えてしまう可能性があります。アップグレードする際は、一旦バックアップを。
会話キャラの画像を自分で用意したものにする
これが一番ニーズあると思いますが、現状会話キャラ画像は「Speech Bubble」のフォルダ内にないと表示できないようなので、ちょっと難しいかもしれません。
FTPツールをお使いの方
WordPressを運用しているレンタルサーバーにPDF/音声/動画などのコンテンツをアップロードされている方は、FTPツール（FFFTPやCyberduckなど）を使われているのではないでしょうか？
この環境があれば、以下の手順でOKです。
１）WordPressプラグインのフォルダから「speech-bubble」を探す
FTPツールを使って、WordPressプラグインがインストールされているフォルダへ移動します。フォルダの場所は、レンタルサーバーの種類や、どうやってインストールしたかによって変わりますが、例えばXServerの場合でドメイン直下にインストールしているなら、
/ドメイン名のフォルダ/public_html/wp-content/plugins/
が、WordPressで利用しているプラグインが置かれているフォルダになります。
そして「plugins」フォルダ内から「speech-bubble」を探しましょう。これが「Speech Bubble」プラグインの本体です。
(例：Cyberduckの場合)
２）「speech-bubble」の「img」フォルダ内に画像をアップロード
その中に「img」フォルダがあると思います、その中に自分が使いたい会話キャラ画像をアップロードしましょう。名称は何でもOK。
(例：Cyberduckの場合)
３）記事を書く
あとは記事でショートコードを書く際、icon="●●●.jpgの部分をアップロードした画像ファイル名に変えれば、無事表示されるはずです。
FTPツールをお使いでない方
上記のFTPツールをインストールするか、レンタルサーバーの管理画面から「FTPツール」などでアップロードしましょう。
画像のアップロード方法は、上記と同じです。
吹き出しの位置を調整する
「Speech Bubble」で出力されているHTMLを見ると・・
- 画像キャラの部分
.sb-speaker - 吹き出し文章の部分
.sb-content
というクラス名が付いています。なので、CSSでデザインを調整する場合にはこのクラスに適用しましょう。
例えば、吹き出し部分をもうちょい下に移動させたいなーという時は、以下のようなCSSを追加します。
.sb-content {
margin-top: 8px;
}
[speech_bubble type=”std” subtype=”L1″ icon=”oruzu.jpg” name=”おるず”]そのまま表示
（画像と吹き出し部分の上端が揃っています）[/speech_bubble]
（吹き出し全体がちょっと下に移動しました）[/speech_bubble]
CSSで調整する場合は、WordPressテーマ内のCSSをいじる、Custom CSS and JSで記事ごとにCSSを追加する、等いくつかやり方があります
まとめ
以上が、「Speech Bubble」の基本的な解説になります。
吹き出し風のデザインは、自分でやろうとするとHTMLやCSS3の知識が無いと相当難しいです。でも「Speech Bubble」を導入すれば、手軽に会話調の記事が書けて便利ですね。
開発者さんに感謝しつつ、ドンドン使っていきましょー。