スポンサードリンク


WordPressで吹き出しプラグイン!LINE似の会話ログが面白い!Speech Bubbleの使い方とカスタマイズ方法を公開!

よくQ&Aなどの質問コーナーで吹き出し付きの人型アイコンを並べて、
会話しているデザインを見かけると思います。

WordPressブログでも似たような機能がありまして、LINEやFacebookみたいな会話ログを
表示させて使うことができる、すごく便利な吹き出しプラグインを見つけました。

WordPress 吹き出し

特に運営しているサイトで看板キャラクターを使っている人には、
ちょっとしたアクセントとしてサイトの雰囲気をガラッと変えることができるでしょう。

今回は、このように漫画や会話みたいにブログのコンテンツを盛り上げることができるWordPressのプラグイン「Speech Bubble」というプラグインの使い方をご紹介します。

 

Speech Bubbleのインストール手順

基本的にWordPressを使い慣れている方は
プラグイン検索してインストールするだけですが、先にインストール手順を載せておきます。

管理画面の左メニューから「プラグイン」をクリックします。

「新規追加」ボタンをクリック入力フォームに「Speech Bubble」と入力しEnterキーを押します。

WordPress 吹き出しプラグイン

検索結果の一覧内に「Speech Bubble」が表示されますので、「今すぐインストール」をクリックしましょう。

インストールが完了したら「Speech Bubble」を有効化しましょう。
特に細かい設定は必要なくこの状態で吹き出し機能をWordPressで利用できるようになります。

 

Speech Bubbleの吹き出し機能を投稿記事に載せる方法

「投稿」や「固定ページ」などのエディタ画面内に吹き出し用のショートコードを挿入することで記事中に吹き出しを表示させることができます。

まずは以下のサンプルコードをコピーして記事中に貼り付けてみて下さい。

 

 

こちらのショートコードを記事中に貼りつけると以下の画像とテキストが表示されます。

WordPress 吹き出しプラグイン

人物のアイコンを左右に配置して、真ん中に吹き出しを表示させることができます。

LINEの会話ログのようなレイアウトとなっており、見栄えも綺麗で面白いですね。
例えば、文字数が多く読みづらい記事になってしまった場合に、アクセントとしてつけてあげれば記事の内容が読み手にはわかりやすくなったりするのでおすすめです。

サンプルでは質素なデザインで味気ないですが、他にも吹き出しデザインを変更したり、人物アイコンを差し替えたりカスタマイズ性も高いのが特徴です。

 

吹き出しのセリフやキャラクターの名前の変更方法

セリフやキャラクターの名前の変更は非常に簡単です。

まずセリフですが、「セリフ1」と「セリフ2」の文字列の部分を書き換えることで自由に変更ができます。

キャラクターの名前はショートコード内に記述されたname属性の部分になり、
サンプルのコードでは「名前1」と「名前2」が該当します。

各部分のテキストを変更するだけで済みますよ。

 

吹き出しのデザインと種類の変更方法

このプラグインの魅力的な点は吹き出しデザインのテンプレートが9種類も用意されているところです。

吹き出しデザインは、ショートコードのtype属性の文字列の部分で変更することができます。

 

シンプルなものからデザイン性の高い吹き出しデザインが同梱されています。
以下に吹き出しのデザインをサンプルを載せましたので参考にご覧下さい。

オーソドックスなデザイン「drop」

UMR
大佐!dropというデザインを発見した!
大佐
よくやったUMR!

 

超シンプルなデザイン「std」

UMR
プレーンで非常にシンプルなデザインも発見。
大佐
でかしたぞUMR!

 

facebook調のデザイン「fb」

UMR
facebookでやりとりしているみたいなデザインも。
大佐
そういえば最近facebookやってないなあ。

 

facebookメッセンジャー風デザイン「fb-flat」

UMR
facebookのスマホ用メッセンジャーのようなデザインはどうですか?
大佐
ふむ。ソーシャルカラーというのも悪くないな。

 

LINE調のデザイン「ln」

UMR
LINEの会話ログみたい。
大佐
無線機も必要のない時代のようだな。

 

同じくLINEっぽいデザイン「ln-flat」

UMR
大佐!もう一つ発見した。
大佐
これもLINEなのか?

 

可愛らしいピンク色のデザイン「pink」

UMR
うまるの宴が始まる!!
大佐
どうした?通信が途絶えたぞ、状況を知らせるんだ!

 

見やすくシンプルなデザイン「rtail」

UMR
うまるには合わないデザインだ。
大佐
シンプルで良いと思うがな。

 

think

UMR
うまる まとめサイトの巡回で忙しいから
大佐
駄目だUMR! 未来が変わってしまった! タイムパラドックスだ!

 

CSSやショートコードの設定が得意な人なら、独自デザインの吹き出しを作ることもできると思います。

オリジナルの吹き出しテンプレートを作る楽しみもありますね。

 

吹き出しの形状とキャラクターのレイアウトの変更方法

続いて人物アイコンのレイアウト位置と吹き出しの形状を設定しましょう。

次に設定する部分はショートコードのsubtype属性になります。
全部で4種類設定することができます。

まずはキャラクターの位置ですが、「左寄せ」か「右寄せ」にすることができます。
また、同時に吹き出しの形状も「話す」「考える」があり指定できます。

 

スポンサードリンク

 

キャラクターを左寄せで話す形状の吹き出し「L1」

UMR
こちらUMR。

 

キャラクターを右寄せで話す形状の吹き出し「R1」

大佐
UMR無事か。

 

キャラクターを左寄せで考える形状の吹き出し「L2」

UMR
帰ってスペ4やろうかな。

 

キャラクターを右寄せで考える形状の吹き出し「R2」

大佐
UMRから連絡がない・・・。

 

ちなみに「think」のデザインは「考える」しか指定することができません。

 

キャラクター画像を差し替える方法

Speech Bubble」のプラグインをインストールしたデフォルトの状態では以下のサンプルの画像のみ利用できます。

Aさん
1.jpgのアイコン画像です。
Bさん
2.jpgのアイコン画像です。

これらのアイコン画像を自由に差し替えて遊ぶには、WordPressのPluginsフォルダに任意の画像をアップロードする必要があります。

WordPressを使用しているサーバに接続して、「wp-content」フォルダ内の
「plugins」中を確認し「speech-bubble」を開きます。

その中に「img」フォルダがありますので、このフォルダ内に好きな画像を入れるだけです。

サンプルで「1.jpg」と「2.jpg」が入っていますので、画像サイズを参考にして、
好きな画像をアップロードすると良いでしょう。

対応している拡張子はjpg, png, gif, svg, tifの5種類ですが、jpgが一番無難でしょう。

アップロードが完了したらショートコードのicon属性に、アップロードした画像のファイル名を指定するだけで差し替えできます。

UMR
大佐!画像の差し替えが完了した!

上の吹き出しのように簡単に画像を変更することができますよ。

 

キャラを増やして吹き出し調の会話を盛り上げるのも楽しい

UMR
大佐!目標を完了した。
大佐
よくやったUMR!次の任務に移ってくれ!
UMR
了解。
シルフィン
シュバフィーン!!
シルフィン
UMRさん勝負ですわ!
UMR
面倒なことになっちゃったよ。

デザインテンプレートも9種類と豊富で、デザイン性も優れていて、
尚且つカスタマイズ次第でレイアウトを調整したり、アイコン画像を差し替えたりできるので便利なプラグインです。

工夫次第でどんなこともやれてしまうので、導入することをおすすめします。

主に、質問コーナーやWiki、フォーラムなど運営サイトで活躍すると思います。

The following two tabs change content below.
よっき
パソコンが大好きな青年。職業はプログラマ。 幼少期からパソコンが好きで、趣味がそのまま仕事になりました。 主にウェブ系コンテンツの開発が中心です。 自作PCの魅力に惹かれたのは学生時代の頃で、現在に至ります。 自作PC専門ブログで、お得な情報を紹介しています。 趣味はホームページ制作かな。起業を夢見て奮闘中の毎日!

スポンサードリンク


3 Responses to “WordPressで吹き出しプラグイン!LINE似の会話ログが面白い!Speech Bubbleの使い方とカスタマイズ方法を公開!”

  1. […] ほうほう早速出来た。今、よっきさんのブログのこの投稿を参考にやっています。 […]

  2. ぴー より:

    初めまして。
    Speechbubbleはスマホからも使用可能でしょうか?
    因みにiPhone使ってます。

    • よっき よっき より:

      初めまして、コメントありがとうございます。
      スマホからでも使用できると思います。
      私の環境からは問題なく表示できます。

      ただ端末によっては画面幅が狭いと変な折り返しをしてしまうので、
      もしかしたらレイアウトが思うようにいかないかもしれません。

コメントを残す




*

このページの先頭へ