Speech Bubbleで会話風ページを作成

Speech Bubbleをインストールする

[speech_bubble type=”std” subtype=”a” icon=”10.png” name=”よしお” ]プラグインとかそんな簡単にインストールできるの?[/speech_bubble] [speech_bubble type=”std” subtype=”b” icon=”9.png” name=”れいこ” ]プラグイン入れるだけなら初心者でも簡単にできるのよ[/speech_bubble] [speech_bubble type=”std” subtype=”b” icon=”4.jpg” name=”まりこ” ]わからない時はね、くまはちさんに聞いてみるといいよ[/speech_bubble] [speech_bubble type=”std” subtype=”b” icon=”3.jpg” name=”まさお” ]プラグイン入れるだけなら聞くまでもないんじゃない[/speech_bubble] [speech_bubble type=”std” subtype=”a” icon=”10.png” name=”よしお” ]そうなんだ、ぼぼくも挑戦してみようかな[/speech_bubble] [speech_bubble type=”std” subtype=”b” icon=”4.jpg” name=”まりこ” ]そうね、やってみてわからないところを聞く方がいいからね[/speech_bubble]

Speech Bubbleインストール

簡単に検索できてインストールして有効化しておきます。

「Speech Bubble」で検索すると上記のように表示されるのですぐに見つかります。

 

Speech Bubbleの使い方

Speech Bubble使い方サンプル

使い方のサンプルです。

アイコンに関しては、初期設定では2個しか入っていません。

上記の2つがインストールしたままの状態で入っているアイコンです。

大きさは、77ピクセルの正方形の画像を用意しておきます。

サーバー/wp-content/plugins/speech-bubble/img/

上記の場所に作成したアイコンをFTPソフトでアップロードしておきます。

FTPの使い方などは、下記のページを参考にしてください。

FTPソフトの使い方
FTPソフトとは? 基本的にパソコン側のファイルとサーバー側のファイルを同期させるソフトです。

 

FFFTP接続するサーバーを設定する
FFFTP接続するサーバーを設定する 起動したら赤丸の「新規ホスト」をクリックして 接続するサーバーを設定します。

 

肝心の使い方と言うよりも投稿画面への記載方法なのですが・・・

ショートコードの書き方を覚えておく必要があります。

ショートコード

上記のようなショートコードになります。

最初の書き出しは、同じですが・・・

type=”” subtype=”” icon=”” name=””の部分は、それぞれ違います。

 

type=””

typeは、全部で9種類用意されています。

std, fb, fb-flat,ln,ln-flat,pink, rtail,drop, thinkの中で選択します。

くまはちが使用した中でln,ln-flatは、あまり使いたくないって思いましたね。

逆に女子キャラでpinkは、いいと思います。

type=”pink”

type="pink"

type=”std”

subtype

 

type=”fb”

type fb

type=”fb-flat”

type fb-flat

type=”rtail”

type rtail

type=”drop”

type="drop"

type=”think”

type think

 

 

subtype=””

subtypeは、吹き出しのパターンの指定になります。

用意されている値は、a,b,c,dの4つ

subtype

上からabcdの順に並んでいます。

 

icon=””

iconは、イラスト画像のファイル名になります。

こちらは、アイコンに使えるサイズに加工してあります。

FacebookやTwitterなどのプロフィール画像をサイズダウンして使うというのもアリかもですね。

 

name=””

名前

nameは、名前が表示されてる部分です。

これは、自由な名前を設定してください。

 

くまはちからの活用提案

このSpeech Bubbleは、WordPressの中でボタンなどによる挿入ができません。

よって活用には、ちょっとした工夫が必要です。

Google Chromeで記事作成される方は、拡張機能でInsertTextを使われてはいかがでしょうか?

Firefoxの方は、Clippingsというプラグインが似たような機能があります。

右クリックだけで定型文化しておけば簡単に使いやすくなるでしょう。

セリフの部分だけ後で編集できれば簡単ですね。

このショートコードは、はさむことができるのでAmecareに登録するのもアリかもですね。

ちょっと最後に気になったことに対しての結果を・・・

link

セリフの中でリンクが使えるのかやってみたが・・・

HTMLタグがそのまま表示されるみたいで使えないですね。

というのは、間違いで・・・

コレよくあるミスなのです。

何がミスなのか?

このリンクは、ビジュアルで貼り付けられているからそのまま表示されているのです。

テキストでリンクタグを入れると表示されますよ。

リンク表示

Cocoonのテーマを使われる方は、このプラグインは、必要ないです。

テーマの中にあらかじめ吹き出しの機能が設定されていますので・・・

 

追記

WordPress公式プラグインページ

上記画像にある通りクリックしてしまうと詐欺みたいなページに飛びます。

回避するためには再起動しかありません。

これがWordPressの公式プラグインのページにあるってことに驚きでした。

 

WEBのことならくまはちLABにお任せください。

サービス 制作事例
お問い合わせ

フォローお願いします!