吹き出し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』にコードを設定しておくことで、簡単に様々なタイプの登場人物をコンテンツの中に登場させることが出来ますね。

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

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

スポンサーリンク

関連記事一覧

  1. 写真 加工
  2. wix adi
  3. ワードプレス
  4. ブログ 書き方 テンプレート
  5. ワードプレス
  6. ワードプレス

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

プロフィール

ソーイングデザイナー&フォトスタイリスト
はしば まいこです。
幼少のころから、注文服を縫う母のそばで洋裁に親しむ。
服飾専門学校でデザイン、パターンを学び、アパレルデザイナーとして従事。
結婚退職後、子育てのかたわらエプロン・布バッグ・布小物などの縫製の仕事に従事、これまでに縫製した枚数は2万枚を超える。
自らデザインしたエプロンや洋服・布バッグのネット販売を始め、写真の大切さを知りフォトスタイリングを学び始める。
デザイン・パターン製作、縫製、動画編集まで自らの手で行い、ブログやYoutubeチャンネルにて、『型紙なしで手軽に作れるお洋服』から、『型紙を使って作る本格的な大人服』、『布小物などの作り方』などを発信している。
Youtubeチャンネルの総視聴回数は139.8万回、チャンネル登録者数1.6万人を超える(2021/9月現在)。
お仕事の依頼は、 お問い合わせからお願いいたします。

アーカイブ

PAGE TOP