吹き出し36種類が簡単!ロリポップサーバーでのワードプレスプラグインSpeech bubbleの設置方法

ブログの中に漫画のような吹き出しが入っているコンテンツ、よく見かけませんか?
例えばこんな風に…。

エプロンママ
最近ブログで見かける漫画の吹き出しみたいなの、どうやってやるか知ってる?
パソコンママ
知ってるわよ!
ワードプレスのプラグイン『Speech bubble(スピーチバブル)』で作るあれよね。
エプロンママ
プラグイン…。なんか難しそう…。
パソコンママ
吹き出しは36種類もあって、アイコンには画像も入れられるのよ!
ばっちり解説するから誰にでもできるわよ!
ベビちゃん
あたちも、でちまちゅか?
(訳:私も、出来ますか?)
パソコンママ
えっ!ええ、大きくなれば…。

LIN(ライン)では見慣れたこんな吹き出しをブログサイトで作る方法を解説していきます。このページでは、ロリポップサーバーを利用しているので、ロリポップサーバーでの方法を解説します。

 

アイコン画像は正方形、ファイル名は英数字で作る

画像は正方形で作っておき、ファイル名は英数字で付けます。例えば、『mama1』とか『baby1』などが良いです。『まま1』『ベイビー1』などの日本語表記では、サーバーに上手くアップロードすることが出来ないのでつけないようにしましょう。

  • 〇 良いファイル名 …『mama1』『baby1』などの英数字表記
  • ✕ 悪いファイル名 …『まま1』『ベイビー1』などの日本語表記

 

ロリポップサーバーに画像をアップロードする

正方形の画像が出来たら、それぞれのお使いのサーバーに画像をアップロードします。ここでは、ロリポップサーバーに画像をアップロードする方法を解説します。

ロリポップのユーザー専用ページを開きます。『サーバーの管理・設定』から『ロリポップ!FTP』をクリックします。

 

『ロリポップ!レンタルサーバーFTP』という画面が開きます。その一覧の中のファイル名から、吹き出しを表示させたいファイル名をクリックします。

 

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

 

『plugins』をクリックします。

 

『speech-bubble』をクリックします。

 

『img』をクリックします。

 

左上の書類のマークをクリックします。

 

『ファイルを選択する』という赤いボタンが表示されるので、クリックします。

 

アップロードしたい画像をあなたのパソコンのファイルから選択します。

 

『ファイル名.jpg』
アップロード待ちです。「アップロードする」ボタンを押してください。

と表示されています。赤いボタン『アップロードする』をクリックします。

 

選択した画像がアップロードされました。

これで、サーバーに画像をアップロードすることが出来ました。複数のファイルをアップロードする場合には、『ファイルを選択する』をクリックして、画像選択します。

 

WordPressプラグイン『Speech bubble』をインストール

次に、Wordpressプラグイン『Speech bubble』をインストールします。

Speech bubble

ワードプレスの管理画面、ダッシュボードを開き、『プラグイン』をクリックします。右上の検索窓に Speech bubble と入力します。

『Speech bubble(ふきだしプラグイン)』と表示されますので、『今すぐインストール』をクリックします。

インストールが完了したら、『有効化』をクリックします。

これで、コードを入力することでワードプレスサイトに吹き出しが表示されるようになりました。

 

吹き出しの表示方法

『Speech bubble(スピーチバブル)』のプラグインをインストール出来たら、下記のようなコードを入力することで、吹き出しが表示されるようになります。

実際の画面ではこのように表示されます。

A san
Ask something.
B san
Answer something.
A san
Think something.
A san
Think something, too.

 

吹き出しタイプ36種類のアイコン画像や表示名・位置の変更方法は?

スピーチバブルの吹き出しのタイプは、全部で36種類あります。大きく分けると9種類。その9種類の中に右側からの吹き出しタイプ、左からの吹き出しタイプ。心の声を右側から吹き出しにするタイプと左側から吹き出しにするタイプとあります。

吹き出し方向の変更方法

左からの吹き出しは、『subtype=“a”』『subtype=”c”』『subtype=”L1″』『subtype=”L2″』で表示されます。『”〇〇”』の〇〇を変更します。『L』は、Left(左)という意味ですね。

A san
『タイプ:std、サブタイプ:L1』の吹き出しだよ!
A san
『タイプ:std、サブタイプ:L2』の吹き出しだよ!

 

右からの吹き出しは、 『subtype=“b”』『subtype=“d”』『subtype=”R1″』『subtype=”R2″』で表示されます。『”〇〇”』の〇〇を変更します。『R』は、Right(右)という意味ですね。

A san
『タイプ:std、サブタイプ:R1』の吹き出しだよ!
A san
『タイプ:std、サブタイプ:R2』の吹き出しだよ!

アイコン画像の変更方法

アイコン画像を変えるには『icon=”〇〇〇〇.jpg”』の〇〇〇〇を変更します。

表示される名前の変更方法

サイト上に表示される名前を変更するには、『name=”〇〇△〇〇”』の〇〇△〇〇を変更します。

吹き出しタイプの変更方法

吹き出しタイプは、『speech_bubble type=”〇〇〇”』の〇〇〇を変更します。吹き出しのタイプは、下記の9種類があります。

  1.  std
  2.  fb
  3.  fb-flat
  4.  ln
  5.  ln-flat
  6.  pink
  7.  rtail
  8.  drop
  9.  think

 

std

A san
『タイプ:std、サブタイプ:a』の吹き出しだよ!
B san
『タイプ:std、サブタイプ:b』の吹き出しだよ!
A san
『タイプ:std、サブタイプ:c』の吹き出しだよ!
A san
『タイプ:std、サブタイプ:d』の吹き出しだよ!
 

fb

A san
『タイプ:fb、サブタイプ:a』の吹き出しだよ!
B san
『タイプ:fb、サブタイプ:b』の吹き出しだよ!
A san
『タイプ:fb、サブタイプ:c』の吹き出しだよ!
A san
『タイプ:fb、サブタイプ:d』の吹き出しだよ!
 

fb-flat

A san
『タイプ:fb-flat、サブタイプ:a』の吹き出しだよ!
B san
『タイプ:fb-flat、サブタイプ:b』の吹き出しだよ!
A san
『タイプ:fb-flat、サブタイプ:c』の吹き出しだよ!
A san
『タイプ:fb-flat、サブタイプ:d』の吹き出しだよ!
 

ln

A san
『タイプ:ln、サブタイプ:a』の吹き出しだよ!
B san
『タイプ:ln、サブタイプ:b』の吹き出しだよ!
A san
『タイプ:ln、サブタイプ:c』の吹き出しだよ!
A san
『タイプ:ln、サブタイプ:d』の吹き出しだよ!
 

ln-flat

A san
『タイプ:ln-flat、サブタイプ:a』の吹き出しだよ!
B san
『タイプ:ln-flat、サブタイプ:b』の吹き出しだよ!
A san
『タイプ:ln-flat、サブタイプ:c』の吹き出しだよ!
A san
『タイプ:ln-flat、サブタイプ:d』の吹き出しだよ!
 

pink

A san
『タイプ:pink、サブタイプ:a』の吹き出しだよ!
B san
『タイプ:pink、サブタイプ:b』の吹き出しだよ!
A san
『タイプ:pink、サブタイプ:c』の吹き出しだよ!
A san
『タイプ:pink、サブタイプ:d』の吹き出しだよ!
 

rtail

A san
『タイプ:rtail、サブタイプ:a』の吹き出しだよ!
B san
『タイプ:rtail、サブタイプ:b』の吹き出しだよ!
A san
『タイプ:rtail、サブタイプ:c』の吹き出しだよ!
A san
『タイプ:rtail、サブタイプ:d』の吹き出しだよ!
 

drop

A san
『タイプ:drop、サブタイプ:a』の吹き出しだよ!
B san
『タイプ:drop、サブタイプ:b』の吹き出しだよ!
A san
『タイプ:drop、サブタイプ:c』の吹き出しだよ!
A san
『タイプ:drop、サブタイプ:d』の吹き出しだよ!
 

think

A san
『タイプ:think、サブタイプ:a』の吹き出しだよ!
B san
『タイプ:think、サブタイプ:b』の吹き出しだよ!
A san
『タイプ:think、サブタイプ:c』の吹き出しだよ!
A san
『タイプ:think、サブタイプ:d』の吹き出しだよ!
 

【まとめ】吹き出し36種類が簡単!ロリポップサーバーでワードプレスプラグインSpeech bubleの設置方法

『吹き出し36種類が簡単!ロリポップサーバーでワードプレスプラグインSpeech bubleの設置方法』としてまとめてきました。

コード入力を簡単にするには、ワードプレスプラグイン『AddQuicktag』がおすすめです。『AddQuicktag』にコードを設定しておくことで、簡単に様々なタイプの登場人物をコンテンツの中に登場させることが出来ますね。

様々なサイトがあるインターネットのブログの中でも、エンターテイメントとして楽しめる要素を入れることで、読者の方の離脱を防ぎたいですね。

最後までお読みいただきまして、誠にありがとうございました。

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

Twitter で

ABOUTこの記事をかいた人

ご覧いただき、ありがとうございます。 私は、3人の子供を持つ主婦です。結婚退職し、子供が生まれ育児に専念しながら、空き時間を見つけては縫製の仕事をしていました。 ネットショップで販売するようになり、月々10万円ほどの売上げを得られるように。 これまでの自分の経験を活かしながら、人の役にも立ちたい。 そう思うようになり、ブログを書く仕事もしています。