スポンサーリンク

【WordPress】吹き出しプラグイン『speech bubble』

2018年7月1日便利なプラグイン

今回は吹き出しプラグイン『Speech bubble』をご紹介します。

きらり
吹き出しプラグイン!?
結耶
そうだよ。この会話形式にできるプラグインだよ♪
きらり
あっ!このプラグインね!

このプラグインを使うと上記のような会話形式にすることができます。
会話形式にすると表現が豊かになり、記事を読みやすくなります。記事を書く側も読んでくれている人も楽しくなるプラグインです。

スポンサーリンク

吹き出しプラグイン『Speech bubble』

インストール

Speech bubble(ふきだしプラグイン)

インストール方法

1 WordPress管理画面から[プラグイン][新規追加]
2 『Speech bubble』を検索
3 [今すぐインストール]して[有効化]

設定(アイコンのアップロード)

会話で使うアイコン画像をアップロードします。
アイコン画像はプラグインフォルダに入れなければならないので、FTPツールを使ってアイコン画像をアップロードしてください。

アイコン画像をアップロードする場所

wp-content
plugins
    ├ speech-bubble
       └ img    ここにアップロード

画像ファイルを[img]フォルダに入れてください。

FTPツールはいろいろありますので使い方は各FTPツールで確認してください。
FTPツールでのサーバーの設定をする際にはお使いのレンタルサーバーで確認してください。

スポンサーリンク

使い方(吹き出しの設定)

ショートコード

[speech_bubble type="吹き出しの種類" subtype="アイコンの位置と吹き出し" icon="アイコン画像" name="名前"]会話文[/speech_bubble]
吹き出しの種類

吹き出しの種類を設定します。吹き出しの種類は後で説明します。

アイコンの位置と吹き出し

アイコンの位置と種類の設定

subtypeの値

a・・・アイコン左 通常の吹き出し
b・・・アイコン右 通常の吹き出し
c・・・アイコン左 考えごとの吹き出し
d・・・アイコン右 考えごとの吹き出し

L1・・・アイコン左 通常の吹き出し
R1・・・アイコン右 通常の吹き出し
L2・・・アイコン左 考えごとの吹き出し
R2・・・アイコン右 考えごとの吹き出し

アイコン画像

表示したいアイコン画像のファイル名を設定してください。

名前

表示させる名前を設定してください。

会話文(セリフ)

会話(セリフ)を入れてください。

[speech_bubble type="pink" subtype="L1" icon="yuuya.PNG" name="結耶"]こんにちは。結耶です。[/speech_bubble]
[speech_bubble type="pink" subtype="R2" icon="dog.PNG" name="きらり"]こんにちは。ボクはきらりだよ![/speech_bubble]
結耶
こんにちは。結耶です。
きらり
こんにちは。ボクはきらりだよ!

下の『吹き出しの種類』と上に書いた『アイコンの位置と吹き出し』の組み合わせによって、キャラクターが喋っていたり、考えごと(心の声)しているような感じにしたりすることができます。

確認方法

ショートコートを記事内に挿入した後、表示の確認をする場合は『テキストエディタ』の[プレビュー]でおこなってください。

ビジュアルエディタでみても、ショートコードが表示されるだけです。

吹き出しの種類

以下の『吹き出しの種類(デザイン)』のサンプルの『アイコンの位置と吹き出し(ーsubtype)』は全てL1とR1にしています。

drop
きらり
これがdropだね!
結耶
そうだよ~♪
std
きらり
これがstdだね。
結耶
シンプルでしょ~♪
rtail
きらり
これがrtailだね!これ好き~
結耶
きらりこれ好きなの?メモしとくねw
pink
きらり
このpinkは結耶がいつも使ってるのだね!
結耶
そうそう!私が一番好きな吹き出しかな!?
fb
結耶
このfbはFacebook風の吹き出しだよ。
きらり
これFacebook風ななんだぁ。
fb-flat
結耶
これがfb-flatだよ!
きらり
これもFacebook風?…なんかすごいね。
ln
結耶
このlnはなに風かわかる?
きらり
LINEでしょ~♪
ln-flat
結耶
このln-flatもLINE風だね。
きらり
おぉ~♪LINE風だ~!
think
結耶
このthinkは考えことしているような吹き出しだけど、きらりはわかるかな?
きらり
???

プラグインを使わずに会話風吹き出し

プラグインを使わずにHTMLとCSSを使って会話風吹き出しを作ることもできます。
HTMLとCSSで吹き出しを作ってみました。「プラグインを使いたくない」という方やWordPress以外のブログサービスをお使いの方はこちらの記事を参考にしてください。

最後に

このプラグインを使って吹き出し形式にすると表現が豊かになり、わかり易い記事が書けると思います。 吹き出しの種類も8種類あります。
組み合わせは自由にできるので、記事に合わせて使ってくださいね。

きらり
結耶、今回この記事書いたの自分が吹き出しの種類忘れそうだからでしょ!?
結耶
それはどうかな~!?www
スポンサーリンク
応援よろしくお願いします。
      ブログランキング・にほんブログ村へ

お問い合わせはこちら
この記事を書いた人

結耶(ゆうや)

2017年9月からブログ、アフィリエイトを知識ゼロから始めたまだまだ駆け出しです。ブログやWordPress、アフィリエイトを勉強しています!
多発性硬化症(MS)という難病と闘っています。