簡単！吹き出し文をプラグインで記事に取り入れる設定方法を紹介！

サイトを見ていると、ライン風の会話形式でのやり取りをしているものがあると思います。 こんな感じで。

こういった表示を行うどうしたらいいのか、調べてみた所、使用しているテーマのCCSにコードを書き加える方法とプラグインを使用する方法がありました。 CCSにコードを書き加える方は、重たくならないというメリットがありますが、CCSをいじるというちょっとハードルの高い作業になり、もし不具合や、間違いなどを起こせば、サイトが表示しないという最悪のケースもあります。 ですので、今回はプラグインを使って吹き出し分を記事に取り入れる方法を紹介していきます。 ちなみに今回の設定では「Adquicktag」を利用してワンクリックで使用ができるように新しいタグを作る必要があります。 まだ「Adquicktag」をインストールしていないのであれば、こちらを参考にしてください。

吹き出し文で有名なプラグインといえば

吹き出し文を使えるようにするプラグインで有名なものといえば、「Speech bubble（吹き出しプラグイン）」だと思います。 ただし、一つ気になるのが、更新情報。3年前に更新されて以来、そのままになっているんですね。 気にするかどうか、なんでしょうが、ボクは個人的にセキュリティにはこだわりたい方なので、こういう点が、とても気になるんですよ。 ですので、「Speech bubble」の導入は止めました。 ですが、他に吹き出し文を記事内で使うためのプラグインが見つからない。 そこで、Google先生に聞いてみた所、見つけました。 自作プラグインで、Wordpressのプラグイン一覧には登録されていないものですが、最新版は2018年4月25日の更新となっています。 早速こちらのプラグインを紹介していきたいと思います。

プラグイン「WP Speech Balloon」

そのプラグインは「WP Speech Balloon」 Tip 4 Lifeというサイトを運営されているRA’sさんという方の自作プラグインです。 機能的に「Speech babble」よりも更に簡略化されている印象です。 軽さを重視して作成されたとのことで、この様な結果になったそうですが、どちらかというとプラグインが多くなりすぎて重いサイトになってしまうのでは、という恐れを持っているボクにとっては、とてもぴったりなプラグインです。 それでは、インストールの方法と設定の方法を紹介していきます。

「Wp Speech Ballon」のインストールと設定

それではWp Speech Ballonのインストールと設定方法を解説していきます。

インストール

1. 製作者RA’sさんのサイト「tips 4 Life」から「Wp Speech Ballon」のzipファイルをダウンロードします。 ダウンロード先は覚えていておいてくださいね。 2. WordPressの「プラグイン」の「新規追加」で「プラグインをアップデート」をクリックしてください。 3. 「ファイルの選択」をクリックし、ダウンロードした先から「Wp Speech Ballon.zip」ファイルを選択してください。 4. ファイルの選択を終えたら「今すぐインストール」をクリックします。 5. インストールが完了したら、「プラグインを有効化」しておいてください。 これでインストールは完了です。

設定と使い方

「Wp Speech Ballon」をインストールした後は、記事内で2種類の吹き出し文が使えるようになります。 とはいえ、このままですと記事内で使うためには、その度にコードを入力しないといけません。 簡単に使えるように「Addquicktag」を使って、ワンクリックで記事に挿入できるようにしておきましょう。 「Addquicktag」のインストールと使い方はこちらの記事を参照にしてください。

1. 「Wp Speech Ballon」のコードを「Addquicktag」に登録します。 右パターンと左パターンでコードの順番が異なりますので、注意してください。 2. アバター画像を用意する必要があります。 縦横60 px以上の正方形の画像をオススメします。 個人的には、できれば縦横60 pxきっかりの画像がいいとおもいます。 というのも、正方形でなかったり、60 pxよりも大きい画像の場合、画像の中央から60 px四方の大きさで切り取られて表示されるからです。 用意した画像をWordpressより「メディアを追加」で保存し、その「http」を含めたURLすべてを記録しておいてください。 3. 使い方はいたって簡単。 まず、吹き出し文のタグを吹き出し文を入れたい場所に入れ込みます。 次に画像、名前、会話文を加えていきます。 画像は「wsbAvatar]」の後ろ、名前は「wabName]」の後ろ、会話文は「wsbText」の後ろになります。 左側に表示するパターンで例を出すと、 となります。

5つのパターンが選べます

この「WP Speech Balloon」では吹き出し文用の枠が5種類用意されています。 コードの一番最初の「L」や「R」の後ろに「1」と番号がありますが、これが通常の吹き出し文用の枠になります。

この「1」を「2～5」に変えていくことでパターンの違う枠が使えるようになります。 では、実際に見ていきましょう。

パターン2 思惑バージョン

コードはこちら。

パターン3 パステル&ステッチバージョン

コードはこちら。

パターン4 Lineバージョン

コードはこちら。

パターン5 twitterバージョン

コードはこちら。

まとめ

いかがでしたでしょうか？ ちょっと設定がややこしいと感じてしまうかもしれません。 でも、使い慣れてくると記事のアクセントとしてとても便利ですし、重宝します。 ぜひ、使いこなして楽しい記事を増やしていってください。