Quantcast
Channel: ワードプレステーマTCD
Viewing all articles
Browse latest Browse all 1404

吹き出しの会話を手軽に使えるプラグイン「Speech Bubble」

$
0
0

本日は面白いプラグインを見つけましたのでご紹介します。LINEやFacebookメッセージのように会話形式でブログを表示できる、プラグイン「Speech Bubble」です。このプラグインを使うとこのような表示ができるようになります。

デザインプラス
今日もブログを読んでいただきありがとうございます。
ユーザー
今日はどんなプラグインなんだい!?

このように、Lineのように会話風にブログ記事を書く事ができるようになります。それではインストール方法や設定方法を解説していきます。

「Speech Bubble」のインストール

管理画面から「Speech Bubble」を検索してインストールして下さい。

bubble01

もしくは、下記のサイトからプラグインをダウンロードし、wp-content/pluginsディレクトリにインストールしてください。
bubble

Speech Bubble

「Speech Bubble」の使い方

プラグインを有効化するだけで細かい設定は必要ないのもこのプラグインのいいところです。どのように表示するのかというと、いつも記事を書くように、「投稿」⇒「新規投稿」へ移動してください。

そこに、下記の記入をするだけです。

[speech_bubble type=”ln” subtype=”L1″ icon=”1.jpg” name=”デザインプラス”] 今日もブログを読んでいただきありがとうございます。[/speech_bubble]

[speech_bubble type=”ln” subtype=”R1″ icon=”2.jpg” name=”ユーザー”] 今日はどんなプラグインなんだい!?[/speech_bubble]

上記のショートコードを記事に記載いただくと、最初に表示したものがでるかと思います。

ショートコードの解説

それではショートコードの中身を解説していきます。

セリフ変更

セリフを変更するには、下記の●の部分を変更いただくだけで変更可能です。
[speech_bubble type=”ln” subtype=”L1″ icon=”1.jpg” name=”デザインプラス”] ●●●●[/speech_bubble]

デザインプラス
会話を変更するのはこのように簡単にできます。

名前の変更

名前を変更するには、下記のデザインプラスとなっている部分をを変更いただくだけで変更可能です。
[speech_bubble type=”ln” subtype=”L1″ icon=”1.jpg” name=”デザインプラス”]今日もブログを読んでいただきありがとうございます。 [/speech_bubble]

[speech_bubble type=”ln” subtype=”L1″ icon=”1.jpg” name=”夏男”]もうすぐ夏休みですね。デザインプラスは8月13日(土)〜8月16日(火)が夏期休業になります。
8月16日(火)が夏期休業になります。 [/speech_bubble]

夏男
もうすぐ夏休みですね。デザインプラスは8月13日(土)〜8月16日(火)が夏期休業になります。

吹き出しの種類の変更方法

「Speech Bubble」には吹き出しの種類が9種類用意されています。変更にはショートコードの【type=”In”】の部分を変更すれば変更できます。現在使っているLine風ものはInですが、9種類のコードとしてはdrop・std・ fb・ fb-flat・ln・ ln-flat・ pink・ rtail・ thinkがあります。それでは紹介していきます。

drop

デザインプラス
dropはデフォルト設定です。

ユーザー
見やすくていいですね。
std

デザインプラス
stdはシンプルなデザインになっています。

ユーザー
どんなデザインのサイトにも合わせやすいですね。
fb

デザインプラス
fbはFacebookメッセージのようなデザインになっています。

ユーザー
友達申請しました!
fb-flat

デザインプラス
fb-flatはFacebookをフラットデザインにした形になっています。

ユーザー
TCDのFacebookもいつもみてますよ〜!
ln

デザインプラス
lnはLineのようなデザインになっています。

ユーザー
TCDのスタンプ作って下さい♪
ln-flat

デザインプラス
ln-flatもLine風のフラットデザインになっています。

ユーザー
問い合わせを既読スルーしないでくださいね。
pink

デザインプラス
pinkはピンク色のデザインになっています。女性向けですね。

ユーザー
可愛らしい吹き出しですね。Chill (tcd016)に合いそうです♪
rtail

デザインプラス
rtailもセンスのいいデザインになっています。男性向けですかね。

ユーザー
かっこいい吹き出しですね。こちらは、Cubey (tcd023)に合いそうです♪
think

デザインプラス
thinkは名前のとおり「考える」デザインになっています。

ユーザー
次はどのTCDテーマにしようかな〜

と、こんな形で様々な吹き出しがありますのでお好みのものをお使いください。

人物の向きと、吹き出しの種類の変更

【type=”L1”】を変更することで向きを変更出来ます。
デザインプラス
L1をR1に変更してみました。
【type=”L2”】を変更することで考える吹き出しに変更出来ます。
デザインプラス
L1をL2に変更してみました。

アイコン画像の変更

デフォルトの設定では、こんなシンプルな感じのアイコンになっていますが、設定の変更によって好きな画像や写真に変更することができます。
変更方法ですが、FTPツールを利用して、直接画像をアップロードします。

また、おすすめのFTPソフトの紹介はこちらでしています。
初心者におすすめの無料FTPソフトベスト3

それでは変更方法について解説します。
①使用しているサーバーのWordPressのフォルダの中の「speech-bubble」の中の「img」フォルダを探します。
例:ドメイン>public_html>wp-content>plugins>speech-bubble>img

②使用したい画像(jpg, png, gif, svg, tif)を、imgフォルダ内にアップロードします。(ファイル名は半角英数字を使ってください)

③Speech Bubbleのショートコードの【icon=” ○○.jpg“】の部分で、先ほどアップロードしたファイル名を指定します。

これでお好みのアイコンで会話風のブログを作成することができます。

まとめ

本日はちょっと面白いプラグイン「Speech Bubble」を紹介しました。ちなみにこのプラグインの優れているもうひとつの点は、会話風の内容の部分がテキスト表示ということです。テキスト表示になることで検索ワードとしてSEOに関係してきます。非常にありがたいですね。最後に、この記事を書いてみて思うのは、会話風のブログを書く場合センスが必要かもしれませんね。実は非常に設定は簡単なプラグインなのですが、記事の解説以上に会話を作る事に苦労しました。。。


Viewing all articles
Browse latest Browse all 1404

Trending Articles