ワードプレスの記事に吹き出しを入れたい!プラグイン「Speech bubble」の設定方法と使い方

WRITER
 
この記事を書いている人 - WRITER -
こんにちはNAHOです。 自分で選択できる人生を歩みたい、家族や大好きな人たちと豊かに暮らしたい。 そう思った私は、ネットビジネスの道へと歩み始めます。
詳しいプロフィールはこちら

LINEやFacebookのメッセージのように会話形式でブログが描けるプラグイン「Speech bubble」。

読むのが億劫になりそうな記事も、かわいい吹き出しがあるだけで興味がそそられ一気に見やすくなりますよね。

今回は「Speech bubble」の設定と使い方を説明していきます!

Speech bubbleのインストール

まずは、「Speech bubble」をインストールしましょう。

左のメニューから「プラグイン」→「新規追加」をクリックし、新規インストール画面を表示します。

右上の「キーワード」欄に「Speech bubble」と入力すると、下の検索結果に「Speech bubble」が表示されるので、「今すぐインストール」をクリックします。

インストールが終了するとボタンが「有効化」に変わりますので、そのボタンをクリックしてプラグインを有効にします。

これでインストールは完了です。

 

Speech bubbleの使い方

「speech bubble」ではショートコードを使って吹き出しを作っていきます。

吹き出しに使う画像やセリフ、名前はその都度変更することができます。

吹き出しの種類とショートコード

まずは、吹き出しの種類とそれに該当するショートコードを紹介します。

吹き出しの種類は、ショートコードの「type=」の後に設定されています。

基本はこれをコピペすればOK。

画像やセリフなどの変更方法についてはこの後に説明していきますね。

std型

〇〇くん
これがstd型
△△さん
シンプルね

drop型

〇〇くん
これがdrop型
△△さん
涙みたいね

rtail型

〇〇くん
これがrtail型
△△さん
tailって「尾」っていう意味?

pink型

〇〇くん
これがpink型
△△さん
キュート!

fb型

〇〇くん
これがfb型
△△さん
Facebookぽい!

fb-flat型

〇〇くん
これがfb-flat型
△△さん
これもFacebookみたい!

ln型

〇〇くん
これがIn型
△△さん
LINE風ね!

ln-flat型

〇〇くん
これがIn-flat型
△△さん
フラットなLINE風ね!

キャラクター画像や名前の設定の仕方

デフォルトの画像ではちょっと殺風景なので、好きな画像を設定してみましょう。

画像を設定するにはサーバーにアクセスして、画像をアップロードする必要があります。

今回はFFFTPというツールを使って、画像をアップロードしていきます。

FFFTPのツールのインストール方法と使い方はこちらから。

FFFTPのインストール方法と設定方法は?簡単に動画や画像をアップロードできる!

それではFFFTPを起動します。

左側に自分のPCの画像のあるフォルダを選択、右側にサーバーの以下のフォルダを選択します。

「編集するドメイン」>「public_html」>「wp-content」>「plugins」>「speech-bubble」>「img」

の順番にフォルダをクリックしていけばたどり着けます。

アップロードしたい画像を選択して、サーバー側にドロップ&ドラッグ(もしくは「青い矢印」をクリック)すると、画像がアップロードされます。

 

そして、ショートコードにアップロードした画像ファイルを指定していきます。

ショートコードの「icon=」の後に、アップロードしたファイル名を指定します。

例えば、「a.jpg」の場合は、「icon=“a.jpg”」になります。

 

名前の設定は「name=」の後に、好きな名前を指定します。

例えば、「naho」の場合は、「name=“naho”」になります。

std型で表示してみましょう。

naho
画像と名前を変えてみました
 

吹き出しの位置を変えるには

吹き出しの位置(左、右)を変えるには「subtype=」を設定します。

  • 左の場合は「L1」
  • 右の場合は「R1」

になります。

例えば「右」の場合は、「subtype=“R1”」になります。

naho
右向きです
 

セリフを変えるには

セリフを変えるには、ショートコードの「[speech_bubble (省略)]」と「[/speech_bubble]」の間に設定していきます。

こんな感じですね。

[speech_bubble (省略)]ここにセリフを設定します。[/speech_bubble]

naho
もっと喋りたいな~
 

Speech bubbleを簡単に設定する方法

「Speech bubble」のショートコードをいちいち記述するのはとても面倒なので、私はワードプレスのプラグイン「AddQuicktag」を使っています。

ワードプレスのプラグイン「AddQuicktag」の設定方法と使い方!タグの貼り付けがワンクリックで便利!

例えば、

  • ボタン名:std型
  • 開始タグ:[speech_bubble type=”std” subtype=”L1″ icon=”1.jpg” name=”〇〇くん”]
  • 終了タグ:[/speech_bubble]
  • 順番:(任意)
  • チェックボックス:表示したいエディタを選択

のように登録しておくと、ビジュアルエディタならリスト内にテキストエディタならボタンが表示されるので、簡単に吹き出しを使うことができます。

画像や名前、セリフなどは適宜変更してくださいね。

まとめ

吹き出しプラグイン「speech_bubble」を紹介しました。

面白い画像を使ってみると記事がすごく楽しくなるので、ぜひプラグインも使ってみてくださいね!

この記事を書いている人 - WRITER -
こんにちはNAHOです。 自分で選択できる人生を歩みたい、家族や大好きな人たちと豊かに暮らしたい。 そう思った私は、ネットビジネスの道へと歩み始めます。
詳しいプロフィールはこちら

- Comments -

メールアドレスが公開されることはありません。

Copyright© トラベラーズサロン , 2018 All Rights Reserved.