【WordPress】書くのも読むのも楽しくなるSpeech bubble (ふきだしプラグイン)

   2015/05/22   icon-clock-o読了時間:約11分41秒

これまでWordPressのプラグインについてもちょこちょこ書いてきましたが、
今回は記事の編集中にショートコードを書くだけで、吹き出しを作って
こんな感じ↓ の会話文風の表示にしてくれる Speech bubble (ふきだしプラグイン) をご紹介します。
Speech bubble

Speech bubbleはsnb arisoude-nakatta様とMamoru Fukuda様、お二人の共同制作によるプラグインです。
制作者様の記事はこちら⇒WordPress・吹き出しプラグイン(Speech Bubble) ver.1.0公開
こちらの記事内に使用方法などへのリンクもありますので是非ご一読を。

『ありそうでなかったものを』という制作者様のブログタイトルどおり、
今まで有りそうで無かったプラグインですし、作っていただいたことに感謝するばかりです。
解説などの際に会話形式で書いてあるサイトさんにちょっと憧れてたんですよね。
でもCSSで吹き出し作るの面倒そうだしな・・・と諦めていたのですが、
このプラグインさえあればショートコードを単語登録しておいて『ふきだし』と打つだけで済むという。
うう、嬉しい。提供ありがとうございます(ノ´∀`)ノ

使用方法については制作者様の解説をお読みいただくのが一番ですが、
自分の備忘録のためにも設定、使用法などを以下で説明させていただきます。

 目次 

まずはインストールから
基本の使い方
type指定で吹き出し枠のデザインを変えてみよう
subtype指定で会話と思考を切り替え
icon要素でアイコン画像を指定する
吹き出しの上下の間隔を狭くする
name要素で名前を表示させない

まずはインストールから

プラグインページ⇒新規追加⇒「Speech Bubble」を検索⇒インストール⇒有効化してください。
プラグインを検索

基本の使い方

プラグインのインストール&有効化が済んだら、編集画面でショートコードを書いてみましょう。
ショートコード

名前(name)はお好みで変更してください。
また、上手く動かない時には、合間の半角スペースを消してしまっていないかを確認してください。

上のように書くと ↓ こうなります。

左の人
これがデフォルトの吹き出しです
右の人
インストール後すぐに使えて便利ですね

type指定で吹き出し枠のデザインを変えてみよう

吹き出しの形状タイプは以下の9種類。
drop
std
fb
fb-flat
ln
ln-flat
pink
rtail
think

ふきだし形状の説明01
ふきだし形状の説明02
ふきだし形状の説明03

subtype指定で会話と思考を切り替え

左の人
subtypeの引数を書き換えると、吹き出しの出っ張り(引き出し線?尻尾?ツノ?)の形を変えることができます
右の人
ちなみに引数は『ひきすう』って読みます。
使いたい結果を呼び出すための名前みたいなものです

左の人
a、L1、left1のどれかを指定すれば左の人の会話になります。
subtype=”a”、subtype=”L1″、subtype=”left1″のどれでも
表示される結果は同じってことですね
右の人
b、R1、right1のどれかで右の人の会話になります

左の人
c、L2、left2のどれかを指定すれば左の人の心の声に
右の人
d、R2、right2どれかで右の人の心の声になります
右の人
ちなみに私は覚えやすいL・Rの1・2で使うことにしました
左の人
ゲーマーだからだな・・・
右の人
ん?
左の人
いや、なんでもないです
左の人
typeとsubtypeの組み合わせしだいでデザインもいろいろですし、CSSをちょっといじればデザインを変えることもできます
右の人
うーん、どれを使おうかなあ・・・

icon要素でアイコン画像を指定する

ヒカル
Speech bubbleフォルダ内の画像フォルダにお好みの画像を
FTPソフトでアップロードして、ショートコードのicon=”●●.jpg”の部分に
画像の名前を入れるだけです
チョビ
画像フォルダは wp-content/plugins/speech-bubble/img
こんな感じのディレクトリになっているはず

FTPで画像をアップロード

ヒカル
上の画像の例で言えば『c-01.gif』という画像を
アイコンに使うために icon=”c-01.gif” と記述します
ミー
使える画像の拡張子は jpg, png, gif, svg, tif のいずれかです。
画像をアップロードする際と、画像の名前を記述する際にご注意ください
ヒカル
プラグインの更新によって画像フォルダが上書きされると、自分で入れたアイコン画像が消えてしまうことがあります。その時は再度画像をアップロードし直すか、予め取っておいたバックアップから画像フォルダをアップロードしましょう。

吹き出しの上下の間隔を狭くする

ヒカル
<div class=”sb-no-br></div>でショートコードを囲むと吹き出し同士の間にある改行を省くことができます。閉じタグを忘れないようにご注意

チョビ
このコードで幅が変わらない場合は、2つ以上の吹き出しを連続させる際にWordPressの編集画面上で改行を入れないように記述してください
 
それでこのくらい狭くなるはず!たぶん!

name要素で名前を表示させない

 
名前表示を出したくないからといってname要素を削除してしまうとショートコードが上手く動かなくなるので注意です
 
というわけで名前の表示を省きたい時は、下記のコードのように
name にノーブレークスペースを入れてみました

空白状態ですので人間の目には名前も何も見えませんが、適当にふきだし周辺を
反転して見ていただくと分かるとおり、ノーブレークスペースが表示されています。
ノーブレークスペース

 
ノーブレークスペースについて詳しくはHTMLソースコードの解説②
記事をご参照ください

 良かったら押してみてください♥

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