ブログ記事に吹き出し 会話を表示する Speech bubble

プラグイン
スポンサーリンク

ブログ内に「吹き出し」や「会話」を表示したいことってありませんか?
そんな時に役立つプラグインが「Speech bubble」です。

Speech bubble をインストールすれば、簡単に吹き出しの挿入が可能です。

WordPress で吹き出しや会話を挿入したい場合は「Speech bubble」を利用しましょう。

スポンサーリンク

Speech bubble のインストール

ダッシュボードから「プラグイン → 新規追加」をクリックし、
検索窓で「Speech bubble」と検索しましょう。

検索後、Speech bubble の今すぐインストールをクリック。

Speech bubble

インストール後「プラグインを有効化」をクリックすれば完了です。

Speech bubble 基本コード

Speech bubble は、設定の必要はありません。
インストール後、記事内にコードを入力するだけで表示されます。

コードには複数の種類があるため、自分が使いたいコードを選ぶ前に、まずは「基本」のコードを知っておきましょう。

※基本コードの○には [ を、△には ] を入れて、[ ]でコードを囲んでください。
当ブログはCocoonを利用しており、Cocoonではデフォルトで
吹き出し機能があるため、この記事の吹き出しは画像で紹介しています。
○speech_bubble type="drop" subtype="L1" icon="1.jpg" name="M男"△久しぶりーーー!!!○/speech_bubble△
○speech_bubble type="drop" subtype="R1" icon="2.jpg" name="S子"△どちら様ですか?○/speech_bubble△

上の吹き出しは Speech bubble  デフォルトの形です。

コード内は4つに分類されています。

  1. type=”drop”
  2. subtype=”L1″
  3. icon=”1.jpg”
  4. name=”M男”

①は「吹き出しのデザイン」を指定しています。
吹き出しのデザインを変更したい場合は “drop” を変更します。

②は「アイコン位置」を指定しています。
左に表示したい場合は “L1” 右に表示したい場合は “R1” で指定します。

③は「アイコン画像」を指定しています。
デフォルトでは “1.jpg”  “2.jpg” しかありません。
アイコン画像を変更したい場合は、サーバーに画像をアップロードする必要があります。
(アップロード方法は下に記載)

④は「名前」を指定しています。”M男” “S子” を変更して使用しましょう。

Speech bubble 吹き出しデザイン一覧

コードは9種類あります。

"drop"  "std"  "fb"  "fb-flat"  "ln"  "ln-flat"  "pink"  "rtail"  "think"

drop(デフォルト)

【”drop”】

○speech_bubble type="drop" subtype="L1" icon="1.jpg" name="M男"△久しぶりーーー!!!○/speech_bubble△
○speech_bubble type="drop" subtype="R1" icon="2.jpg" name="S子"△どちら様ですか?○/speech_bubble△

std(スタンダード)シンプル

【”std”】

○speech_bubble type="std" subtype="L1" icon="1.jpg" name="M男"△俺だよー。M男だよー。○/speech_bubble△
○speech_bubble type="std" subtype="R1" icon="2.jpg" name="S子"△だから誰?○/speech_bubble△

fb(Facebook系)

【”fb”】

○speech_bubble type="fb" subtype="L1" icon="1.jpg" name="M男"△ほらー高校で一緒だったM男だよー。覚えてない?○/speech_bubble△
○speech_bubble type="fb" subtype="R1" icon="2.jpg" name="S子"△あー。豚?○/speech_bubble△

fb-flat(Facebook フラット)

【”fb-flat”】

○speech_bubble type="fb-flat" subtype="L1" icon="1.jpg" name="M男"△久しぶりの会話で豚はないでしょー。○/speech_bubble△
○speech_bubble type="fb-flat" subtype="R1" icon="2.jpg" name="S子"△どちら様ですか?○/speech_bubble△

ln(LINE系)

【”ln”】

○speech_bubble type="ln" subtype="L1" icon="1.jpg" name="M男"△いや、だからー…○/speech_bubble△
○speech_bubble type="ln" subtype="R1" icon="2.jpg" name="S子"△え?だから豚でしょ?○/speech_bubble△

ln-flat(LINE フラット)

【”ln-flat”】

○speech_bubble type="ln-flat" subtype="L1" icon="1.jpg" name="M男"△もう豚でいいよー。最近なにしてるのー?○/speech_bubble△
○speech_bubble type="ln-flat" subtype="R1" icon="2.jpg" name="S子"△豚に関係ありますか?○/speech_bubble△

pink(ピンク系)

【”pink”】

○speech_bubble type="pink" subtype="L1" icon="1.jpg" name="M男"△昔から冷たいよねー…。○/speech_bubble△
○speech_bubble type="pink" subtype="R1" icon="2.jpg" name="S子"△好きな人には冷たくしちゃうの…。○/speech_bubble△

rtail(ブルー系)

【”rtail”】

○speech_bubble type="rtail" subtype="L1" icon="1.jpg" name="M男"△え?あ…、俺昔からS子ちゃんの事が○/speech_bubble△
○speech_bubble type="rtail" subtype="R1" icon="2.jpg" name="S子"△それ以上しゃべるな豚。ピンクの吹き出しだったから女子感出してみただけだから。○/speech_bubble△

think(思考)

【”think”】

○speech_bubble type="think" subtype="L1" icon="1.jpg" name="M男"△あーゾクゾクする♪○/speech_bubble△
○speech_bubble type="think" subtype="R1" icon="2.jpg" name="S子"△キモ豚乙。○/speech_bubble△

デザインは以上計9つです。

記事作成の際に、毎回コピー&ペーストでは面倒なので、
AddQuicktag をインストールし、簡単に挿入できるようにしておきましょう。

AddQuicktag コードや固定文をボタン一つで挿入する
WordPress のブログ記事内に特定の html コードを挿入したい場合や、毎回一緒のリンク、固定文を挿入する場合など、一から作成していると面倒で時間が掛かります。そんな時に便利なのが「AddQuicktag」です。AddQuicktag は記事編集のツールバーに自分独自のボタンを作成できるプラグイン…

アイコン画像のアップロード方法

デフォルト以外のアイコン画像を使用したい場合は、
サーバーに画像をアップロードしなければいけません。

私は Xserver を利用しているので、Xserver でのアップロード方法を記載しています。
(他のレンタルサーバーでも、手順はあまり変わらないと思います)

 

まず、エックスサーバーにログインし「ファイルマネージャ」にログインしましょう。

ファイルマネージャーには「サーバーURL」と「独自ドメインのURL」があると思います。
画像をアップロードしたいURL(独自ドメイン)をクリックし「public_html」をクリック。

Speech bubble

クリック後、wp-content → plugins → speech-bubble → img の順に進みます。

進んだら、画像をアップロードしましょう。
「ファイルを選択」から、アップロードしたい画像を選択し「アップロード」をクリック。

Speech bubble

ファイル名の一覧に表示されたらアップロード完了です。

あとは、吹き出しを挿入する際に、
デフォルトの “1.jpg” を、アップロードした “○○○.jpg” に変更すれば反映されます。

○speech_bubble type="drop" subtype="L1" icon="087.jpg" name="087"△アフィリエイト&ビジネスで稼ぐ!No.087ブログ○/speech_bubble△

まとめ

  • Speech bubble とは、吹き出しを挿入できるプラグイン。
  • 吹き出しの変更は「4つのコード」を変更する。
  • 画像はレンタルサーバーからアップロードする。
  • AddQuicktag をインストール、設定し、挿入を簡単にしておく。

コメント