当サイトには広告が含まれております

吹き出しを表示するプラグインSpeech bubbleでブログに漫画風の会話を表示する!

この記事は最終更新日から6年経過しています。内容が古い可能性があります。

いろいろブログなどを見ていると、イラストの顔と吹き出しで漫画風のやりとりでわかりやすく解説しているものがあります。WordPressだとそのような漫画風の吹き出し会話をプラグインで簡単に作ることができます!そのプラグインSpeech bubbleの使い方についてご紹介します。

記事をざっと見る

Speech bubbleを使うとこんな感じの会話が書けます

Speech bubbleを使うとどんな感じになるか?こちらに書いてみますね。

山田さん
Speech bubbleを使うと、どんなことができるのか、試してみたんですよ。

佐藤さん
それは面白そうですね!是非やり方おしえてください~

この形が一番基本的なものです。左右に人を配置して会話しているように見せています。アイコンに使っている画像はSpeech bubbleにもともと入っているものです。

Speech bubbleのインストール

Speech bubbleのインストールは、

ダッシュボード プラグイン>新規追加 をクリック

speech bubbleと入力すると、

このプラグインが見つかりますので、今すぐインストールをクリック

有効化をクリック。これでインストールが終了です。

Speech bubbleの基本的な使い方

Speech bubbleショートコードを投稿や固定ページのコンテンツのところに書くだけで吹き出し付きの会話を表示することができます。

最初に例として表示したものを表示をするために書いたコードは、

山田さん
Speech bubbleを使うと、どんなことができるのか、試してみたんですよ。
佐藤さん
それは面白そうですね!是非やり方おしえてください~

これです。

ショートコードの中身は、

このように構成されています。

type タイプ

タイプは9種類あり、種類によってアイコンや吹き出しの表示方法アイコンに付ける文字の位置が変わったりします。

type=’std’

山田さん
Speech bubbleを使うと、どんなことができるのか、試してみたんですよ。
山田さん
Speech bubbleを使うと、どんなことができるのか、試してみたんですよ。

type=’fb’

山田さん
Speech bubbleを使うと、どんなことができるのか、試してみたんですよ。
山田さん
Speech bubbleを使うと、どんなことができるのか、試してみたんですよ。

type=’fb-flat’

山田さん
Speech bubbleを使うと、どんなことができるのか、試してみたんですよ。
山田さん
Speech bubbleを使うと、どんなことができるのか、試してみたんですよ。

type=’ln’

山田さん
Speech bubbleを使うと、どんなことができるのか、試してみたんですよ。
山田さん
Speech bubbleを使うと、どんなことができるのか、試してみたんですよ。

type=’ln-flat’

山田さん
Speech bubbleを使うと、どんなことができるのか、試してみたんですよ。
山田さん
Speech bubbleを使うと、どんなことができるのか、試してみたんですよ。

type=’pink’

山田さん
Speech bubbleを使うと、どんなことができるのか、試してみたんですよ。
山田さん
Speech bubbleを使うと、どんなことができるのか、試してみたんですよ。

type=’rtail’

山田さん
Speech bubbleを使うと、どんなことができるのか、試してみたんですよ。
山田さん
Speech bubbleを使うと、どんなことができるのか、試してみたんですよ。

type=’drop’

山田さん
Speech bubbleを使うと、どんなことができるのか、試してみたんですよ。
山田さん
Speech bubbleを使うと、どんなことができるのか、試してみたんですよ。

type=’think’

山田さん
Speech bubbleを使うと、どんなことができるのか、試してみたんですよ。
山田さん
Speech bubbleを使うと、どんなことができるのか、試してみたんですよ。

subtype 左右と枠線

subtypeの指定方法は沢山あるのですが同じ意味の指定方法が3種類ずつあるので一番分かりやすい方法で説明します。

L1 左、枠線実線

山田さん
Speech bubbleを使うと、どんなことができるのか、試してみたんですよ。
山田さん
Speech bubbleを使うと、どんなことができるのか、試してみたんですよ。

L2 左、枠線点線

山田さん
Speech bubbleを使うと、どんなことができるのか、試してみたんですよ。
山田さん
Speech bubbleを使うと、どんなことができるのか、試してみたんですよ。

R1 右、枠線実線

山田さん
Speech bubbleを使うと、どんなことができるのか、試してみたんですよ。
山田さん
Speech bubbleを使うと、どんなことができるのか、試してみたんですよ。

R2 右、枠線点線

山田さん
Speech bubbleを使うと、どんなことができるのか、試してみたんですよ。
山田さん
Speech bubbleを使うと、どんなことができるのか、試してみたんですよ。

icon 画像名

iconのところに画像名を入れます。ここで使える画像はサーバーの wp-content/plugins/speech-bubble/img/ にあるファイルとなります。インストール直後はここに 1.jpg 2.jpg という2つの画像があるのでこれを使うことができます。

オリジナルの画像が使いたい場合は wp-content/plugins/speech-bubble/img/ に画像ファイルをアップロードすれば使うことができます。

例えば いらすとや さんの画像をダウンロードして、 wp-content/plugins/speech-bubble/img/ にアップロードすれば

インターン
今日からインターンとして働くことになりました、よろしくお願いします。
大先輩
まずは雑用から始めて先輩の手技をよく観察してね。

インターン
今日からインターンとして働くことになりました、よろしくお願いします。

大先輩
まずは雑用から始めて先輩の手技をよく観察してね。

と、こんな風にかわいいアイコンで会話をすることができるようになります!

name 画像に付ける文字

nameには主にそのアイコン下もしくは上に表示される文字で、アイコンの名前などに使います。

山田さん、と思ったら佐藤さん
Speech bubbleを使うと、どんなことができるのか、試してみたんですよ。
山田さん、と思ったら佐藤さん
Speech bubbleを使うと、どんなことができるのか、試してみたんですよ。

吹き出しの中のセリフ

ショートコードの間に、吹き出しの中のセリフを入力します。

山田さん
療も窓の演奏児げにゴーシュをわらいパンたまし。またしばらく生意気だましにとってねどこましでし。愉快ましませのだはましするとセロのまじめあたりのときにもにわかに生意気ただって、どこほど舌がはじいれ方なた。 おろしすぎおれも楽長でむずかしいたてたくさんの晩のぎてしまいはもうじぶんがらを笑っ第六床会のかっかがこすりていだじ。パチパチパチッは明方つまずくがくれます。かっこうは一あいゴーシュのようをふんて来で。
山田さん
療も窓の演奏児げにゴーシュをわらいパンたまし。またしばらく生意気だましにとってねどこましでし。愉快ましませのだはましするとセロのまじめあたりのときにもにわかに生意気ただって、どこほど舌がはじいれ方なた。

おろしすぎおれも楽長でむずかしいたてたくさんの晩のぎてしまいはもうじぶんがらを笑っ第六床会のかっかがこすりていだじ。パチパチパチッは明方つまずくがくれます。かっこうは一あいゴーシュのようをふんて来で。

長い文章だと、こんな感じになるようです。

まとめ:Speech bubbleを使うと漫画風の分かりやすいコンテンツが作れると思います!

このようにSpeech bubbleを使うと、漫画風の分かりやすい親しみやすいコンテンツが作れると思います。画像はイラストだけでなくて、

うもと
写真も使えますので!

色々工夫して面白いコンテンツが作れそうです!

この記事が気に入ったら
いいね または フォローしてね!

あなたのシェアが励みになります!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントを残す

記事をざっと見る