最近よく読んでいただいてるページはこちら

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

2016.6.3

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

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

2017年8月現在、どうやら作者さんのサイトがなくなっています。プラグインはインストール可能で、今のところ問題ないようですが、いつ使えなくなるとも限りません。ご注意ください。
プラグインを使わなくても ふきだしを使う方法をご紹介しているのはこちら → Speech Bubble に頼らなくてもだいじょぶ!「ふきだし」できました

Speech Bubble

はじめに:見て楽しく!

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

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

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

 

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

ショートコードの書き方

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

sb1

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

① type

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

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

sb2
  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”で書いてみるとこんなかんじです。

sp3

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

sp3-1

③ icon

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

sp4 sp4−1

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

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

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

sp5

 

と、なります。

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

④ name

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

sp5-1

 

④ ここに文字を入力

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

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

さいごに:楽しいブログライフを!

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

このプラグインはAMP対応してにゃいですにゃの。
にゃので、現在はこちらを使っていますですにゃの。 Speech Bubble に頼らなくてもだいじょぶ!「ふきだし」できました
無料のサービスを使って、作ったアイコンを使用することにしました。
ブログの「マイキャラ」自分で作れる無料サービス6種