吹き出し会話が楽しい！｜WordPressプラグイン『Speech Bubble』

2016.6.32017.9.11

Wi-Fiがおかしくて、えいやっと初期化。主人に迷惑かけたnyanですっ。

WordPressでブログを始めた時期、話題になってたプラグインが『Speech Bubble』。吹き出し式の、会話みたいに表示させることのできるプラグインです。
その使い方をまとめます。

はじめに：見て楽しく！

ブログを飾りたい！
見た目って、だいじだと思います。
読んでくださる人のことはもちろん、自分で見て楽しめなきゃ！と、思ってます。
長く続けたいから、愛着もちたいから。
その点、WordPressは既存の無料ブログサービスより色々遊べて楽しいです。
HTMLとか、CSSとか、PHPとか、はぁ？なんのこと？？？？？　でも、プラグインを入れれば知識ゼロでも遊べる！

プラグイン『Speech Bubble』を使うよ

プラグンは公式なものなので、普通にインストールができます。
けれど、プラグインのフォルダに画像をアップロードせねばならず、FTPクライアントソフトというものを使うハメになりました。
初！クライアントソフト。
Wi-Fiの初期化からでした。

これが『Speech Bubble』です。
プラグインで表示させていたのを、画像に差し替えました。

ショートコードの書き方

インストールして有効化したら、もう使えます。
記事中で使用するには、ショートコードを入力しなきゃなりません。
書き方は下の画像を見てください。

◯付き数字の部分を説明します。

① type

吹き出しの形です。使えるのは９種類！
下線の部分を書き換えると、吹き出しの形も変わります。

画像はクリックで全部をご覧いただけます。

1. drop
2. std
3. fb
4. fb-flat
5. ln
6. ln-flat
7. pink
8. rtail
9. think

② subtype

画像と吹き出しの方向が変わります。
“L1”は左から右手へ。
“R1”は右から左手へ。

type=“pink”で書いてみるとこんなかんじです。

画像と吹き出しの方向が変わります。ちなみに、“L2”と“R2”もあります。

③ icon

デフォルトは２種類。“1”がオレンジ色。“2”が水色。

自分のアイコン使いたいですよね。
ここで私はFTPクライアントソフトを初めて使いました。jpgで用意した画像をアップロードします。
場所は、wp-content → plugins → speech-bubble → img です。

画像サイズは、私は100であげちゃったけど、ジャストは60×60ですね。

そして icon="1.jpg" の部分を 例えば icon="nyan.jpg" にすると

と、なります。

画像の名前を日本語でつけるとエラーになることも。

④ name

“●●●”を好きな文字にします。“Nyan” にしますね。

④ ここに文字を入力

そのまんま、入力した文字が吹き出しのなかに表示されます。これ、画像じゃなくて、ちゃんとテキスト扱いです。
上の例では “Nyanですものっ”と入力しました。

さっ、これで使えますね！

さいごに：楽しいブログライフを！

遊びごころいっぱいのブログって、楽しいですよね！
アレンジのしかたも、作者さんが解説してくれてます。ぜひ、サイトに行ってみてください。Speech Bubble についてまとめられたページは こちら 。

[baloon-line-right img="https://nyanchest.com/wp-content/uploads/2016/06/Nyan.jpg"]このプラグインはAMP対応してにゃいですにゃの。
にゃので、現在はこちらを使っていますですにゃの。 Speech Bubble に頼らなくてもだいじょぶ！「ふきだし」できました[/baloon-line-right]