スピーチバブル使って吹き出しの作成

文章の中で吹き出しがあると読みやすくなる事が分かりました。

そこで、早速吹き出しを作ることにしました。

先ずはプラグインとしてスピーチバブル(speech bubble)のインストール
これは、プラグインからspeech bubbleを検索して導入するだけなので意外と簡単でした。

ここで、テキストからショートコードを入力します。

[speech bubble type=“ln” subtype=“L1” icon=“1.jpg’ name=“左側さん“]左側の吹き出しです。[/speech_bubble]

こんなショートコードをテキストで記入すると

左側さん

左側の吹き出しです。

こんな感じで出来ました。ここまではめちゃ簡単だったのですが、ここから吹き出しのキャラを変えるのが大変でした。

右側さん

右側の吹き出しです。

ちなみに、右側はこんな感じです。

タイプの種類は8種類あります。

type=“ln

ライン風 ln
ラインフラット ln-flat
ドロップ drop
フェースブック風 fb
フェースブックフラット fb-flat
スタンダード std
ドロップ drop
ピンク pink
サブタイプの種類は2種類

subtype=“L1” 

赤い字のL1が左側これをR1にすると右側になります。

当初入っているアイコンは2つ

icon=”1.jpg

アイコンは1.jpg2.jpgの2種類が登録されています。

アイコンのキャラクターを変更する方法

このアイコンのキャラクターを変えるのが一苦労します。

まず、スピーチバブルの中に1.jpgと2.jpgの2つは最初から入っているので、そこに自分で作ったアイコンをアップデートする必要があります。

これが思いのほか大変でした。

まず、こんな画像を作って名前をa.jpgとしました。これをスピーチバブルの中にアップロードします。

FTPサーバーの中に

wp-content

plugins

speech-bubble

img

と入っていくとその中に

1.jpgと2.jpgがあります。そこに、このファイルをアップロードします。

そして、テキストからショートコードを入力すれば出来上がりです。

1.jpgのところをa.jpgに変更するとこんな感じで出来上がります。

 

みのるくん

左側の吹き出しです。

 

ついでに名前もみのるくんに変えました。やったー

 

 


右側の吹き出しです。

左側の吹き出しです。

何とか出来ました。しかし、この方法はFTP の知識が必要でした。契約しているサーバーによってアップロードの仕方は変わります。

それでは、頑張ってください。

コメントを残す

This site uses Akismet to reduce spam. Learn how your comment data is processed.