<wordPressプラグイン>Speech bubbleを使ってブログに吹き出しを使う方法

スポンサーリンク

ブログを継続していく上で僕が大切にしているのが楽しんで書くということです。ブログに問わず何に関しても楽しくなければ続かないと思いませんか?

僕はものすごく大事だと思うんですね!

ブログと言えばアクセス数と思われがちですが、ブログの世界にはプロもアマチュアも無いんです。だから、どれだけ楽しんで書くかが醍醐味なわけで、それ以上に楽しんで書くことが大切です。

楽しく書く為には自身のブログを客観的に見て、「これはつまんねなぁー」と思えば演出を付け加える。それだけで面白いブログが作れるのだから、やらなきゃ損ですよ!

そこでおすすめのwordPressプラグインが「Speech bubble」です。

Speech bubbleの使い方

[speech_bubble type=”std” subtype=”L1″ icon=”teku.jpg” name=”太郎”]いつもと雰囲気が違うね[/speech_bubble] [speech_bubble type=”std” subtype=”R1″ icon=”yuki1.jpg” name=”イクミヤ”]このプラグインを使うとワクちゃんと会話が出来るんだよ[/speech_bubble]

このようにブログで会話風の吹き出しを作成できるプラグインです。どうでしょうか?すごいプラグインですよね?

これがあれば殺風景なブログも漫画読んでいる感覚で気軽に読むことができます。

それでは早速インストールしましょう。

Speech bubbleをインストール

ワードプレスの管理画面でプラグインをクリックします。新規追加をクリック。

画面上部の「プラグインの検索…」にSpeech bubbleと入力します。

検索結果に表示されたらインストールします

有効化をクリックしてインストール完了です

画像をアップロード

Speech bubbleはデフォルトのままでも使えますが、画像を設定していた方が吹き出しとしても面白くなるので画像の設定方法を説明します。

FTPを使った方法でのアップロードになります。今回はエックスサーバーを使った方法を紹介しますが、エックスサーバーとFTPソフトでのアップロードの方法は基本的に同じですので、ご参考にしてください。

画像のサイズはリサイズされるので大きくても問題ありません。ファイル名がアルファベット表記で小文字じゃないと正しく動作しないので、その点は気を付けましょう。

エックスサーバーのサーバーパネルにログインしてFTPアカウント設定をクリックします。

FTPアカウントを選択します。FTPアカウントを作成していない方はアカウント追加より作成してください。

ログインを選択します。

アップロードするドメインを選択します。

public htmlを選択します。

wp-contentをクリックします。

pluginsをクリックします。

スポンサーリンク

プラグインのファイルの中からSpeech bubbleを探してクリックします。

imgファイルをクリックします。

ここではファイル名はクリックせずにアップロードしたい画像ファイルを選び「ファイルのアップロード」から「ファイルを選択」してアップロードして画像のアップロードは完了となります。

AddQuicktagを活用しよう

Speech bubbleを使うにはテキスト入力にしてコードを打ち込まないと表示されません。そこで便利なのがAddQuicktagです。

相性が良いプラグインなので活用必須です。

吹き出しの種類!

Speech bubbleではコードを変更すると、いろんな吹き出しを作成することができます。

全部で9種類drop・std・ fb・ fb-flat・ln・ ln-flat・ pink・ rtail・ thinkの中からお選びください。

赤字の部分を好きなデザインのコードに変更するだけです。type=”drop

スポンサーリンク

下記コードがSpeech bubbleで使うコードになります。コピペすれば表示できるので参考にしてください。AddQuicktagを使えば楽に入力できます。

AddQuicktag使い方-記事作成の効率がアップするwordPressプラグイン

2017年7月16日

※コピペする時は”変更箇所”の部分にデザインコードを挿入して下さい。

[speech_bubble type=”drop” subtype=”L1″ icon=”1.jpg” name=”a”]これはデフォルトのdrop[/speech_bubble] [speech_bubble type=”std” subtype=”R1″ icon=”1.jpg” name=”a”]これはstd[/speech_bubble] [speech_bubble type=”fb” subtype=”L1″ icon=”1.jpg” name=”a”]これはfb[/speech_bubble] [speech_bubble type=”fb-flat” subtype=”R1″ icon=”1.jpg” name=”a”]これはfb-flat[/speech_bubble] [speech_bubble type=”ln” subtype=”L1″ icon=”1.jpg” name=”a”]これはln[/speech_bubble] [speech_bubble type=” ln-flat” subtype=”R1″ icon=”1.jpg” name=”a”]これはln-flat[/speech_bubble] [speech_bubble type=” ln-flat” subtype=”L1″ icon=”1.jpg” name=”a”]これは ln-flat[/speech_bubble] [speech_bubble type=” pink” subtype=”R1″ icon=”1.jpg” name=”a”]これは pink[/speech_bubble] [speech_bubble type=”rtail” subtype=”L1″ icon=”1.jpg” name=”a”]これはrtail[/speech_bubble] [speech_bubble type=”think” subtype=”R1″ icon=”1.jpg” name=”a”]これはthink[/speech_bubble]

アイコンを変更してみよう

アイコンの変更は[speech_bubble type=”drop” subtype=”L1″ icon=”1.jpg”赤字の部分にエックスサーバーからアップロードしたファイル名に変更すればアップロードした画像が表示されます。

吹き出しの位置を変える

subtype=”L1“この赤字の部分を変更します。

L1 R1

[speech_bubble type=”std” subtype=”L1″ icon=”teku.jpg” name=”ワクちゃん”]左に使うと質問する時に使えるよ[/speech_bubble] [speech_bubble type=”std” subtype=”R1″ icon=”yuki1.jpg” name=”YUKI”]右に配置すれば答えを出すときに使えるよ[/speech_bubble]

L2 R2

[speech_bubble type=”std” subtype=”L2″ icon=”teku.jpg” name=”太郎”]L2R2変更すれば考えている感じになるよ[/speech_bubble] [speech_bubble type=”std” subtype=”R2″ icon=”yuki1.jpg” name=”イクミヤ”]便利だなぁ[/speech_bubble]

名前の変更

[speech_bubble type=”drop” subtype=”L1″ icon=”1.jpg” name=”A さん“]name=”A さん“この部分にお好きな名前に変更します。

この記事が気に入ったら
いいね ! しよう

Twitter で

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です