ワードプレスの吹き出しはプラグインで簡単設定。画像アイコンの変更も可能で会話を楽しもう!

投稿者: | 2019年10月26日

ワードプレスのSpeech Bubbleプラグインで、会話型の吹き出しデザインを簡単に表示させる方法をご紹介します。

ワードプレスには本当に様々な機能があるんですね。

下記のように、「吹き出し」で会話をしているような表示を見かけることありませんか?

自分のブログでも使ってみたい!と思うことも少なくないはず。

クマ吉
Hello! 今日はいい天気ですね? 

Aki☆
こんにちは☆お洗濯日和ですね。

 

ワードプレス(wordpress)に出会う前までは、HTMLやCSS、画像サイズの変更など色々駆使して・・・色々なことを意識して作ったことを覚えています。時間をかけた割には、見栄えが悪かったりと。

しかし、ワードプレスの「Speech Bubble」とうプラグインツールの存在を知った時、これまでの労力は一体何だったんだろう・・・と感じました。

知らないと、とても高度な技術を使っているような印象を持ちますよね・・。

設定値をちょっとだけ変更するだけで、様々なタイプの吹き出しイメージに変更することができますので、気になる方は是非トライしてみてくださいね。

(2019/10/26 記事追加更新:adQuicktagプラグインで吹き出しコードをいつでも呼び出し可能に)

 

 

吹き出しプラグインSpeech Bubbleのインストール

 

吹き出しを使用するには、「Speech Bubbleプラグイン」をインストールします。

【プラグイン】 ⇒ 【新規追加】のページを表示します。

Speech Bubbleでキーワード検索します。

下記の通りプラグインをインストールします。

 

Speech Bubbleプラグインのインストールが完了したら、忘れずに【有効化】ボタンをクリックします。

 

 

 

Speech Bubbleの簡単設定の方法

 

プラグインのインストールが終わったら、下記のコードを記事に記載するともうそれらしい吹き出しが表示できますよ。

<吹き出しのベースとなる記載方法>

記事に下記のコードを記載します。

[speech_bubble type="●●●" subtype="L1" icon="1.jpg" name="A さん"]  やっほー!! [/speech_bubble]
[speech_bubble type="●●●" subtype="R1" icon="2.jpg" name="B さん"] どうしたの?[/speech_bubble]

 

speech_bubble type=”●●●”

●●●の部分は、吹き出しデザインの設定値となります。

「drop、std、fb、fb-flat、ln、ln-flat、pink、rtail、think」の9種類があるんですね。

それぞれ、デザインに特徴があるので、サイトに合わせて変更してみてください。

ブログデザインに応じたデザインを選んでみましょう。

 


設定値:type=”drop”

A さん
やっほー!

B さん
どうしたの?


設定値:type=”std”

A さん
やっほ!

B さん
どうしたの?


設定値:type=”fb”

A さん
やっほ!

B さん
どうしたの?


設定値:type=”flat”

A さん
やっほ!

B さん
どうしたの?


設定値:type=”ln”

A さん
やっほ!

B さん
どうしたの?


設定値:type=”ln-flat”

A さん
やっほ!

B さん
どうしたの?


設定値:type=”pink”

A さん
やっほ!

B さん
どうしたの?


設定値:type=”rtail”

A さん
やっほ!

B さん
どうしたの?


設定値:type=”think”

A さん
やっほ!

B さん
どうしたの?


 

 

人間の画像アイコンは変更できるの?

 

コードをよく見ると察しがつくかと思いますが、icon=”1.jpg” やicon=”2.jpg”の表示部分がありますよね。

このjpgファイルの中身を変更したり、新しく追加したい画像を追加し、コードに書いてあげればOKです

簡単ですよね?

今回使用したいアイコンを2つ用意します。

【クマ吉】と【Aki☆】です。

ファイル名はそれぞれ、kuma.png とaki.pngという名前にします。

 

自身のサイトのFTPサーバーにログインします。

FTPサーバーに初めてログインする方は、FFFTPソフトをダウンロードしてください。

ダウンロードすると下記の画面が表示されるので、自身のFTPサーバーの情報を入力してください。

【ホスト名の設定名】:任意の名称
【ホスト名】:自身のFTPサーバー名を入力
【ユーザー名】:自身のFTPユーザー名を入力
【パスワード】:自身のパスワードを入力
【ローカル初期フォルダ】:空白でOK
【ホストの初期フォルダ】:空白でOK

設定を入力したら【OK】ボタンをクリックして【接続】ボタンをクリックします。

 

FTPサーバーにログインします。

下記のフォルダ名まで進みます。
public_html/wp-content/plugins/speech-bubble/img

そうすると、1.jpや2.jpgとうファイル名が見つかります。
この中に、kuma.png とaki.pngファイルをドラックしコピーします。

 


 

それでは、下記のコードを貼り付けます。
変更点は、
1.jpg ⇒ kuma.png Aさん ⇒ クマ吉
2.jpg ⇒ aki.png  Bさん ⇒ AKi☆

 

[speech_bubble type="drop" subtype="L1" icon="kuma.png" name="クマ吉"] Aki☆さん、ちゃんと設定できた? [/speech_bubble]
[speech_bubble type="drop" subtype="R1" icon="aki.png" name="Aki☆ "] 私でもできたよっ☆。[/speech_bubble]

 

クマ吉
Hello! 今日はいい天気ですね? 

Aki☆
こんにちは☆お洗濯日和ですね。

 

 

 

adQuicktagプラグインで吹き出しコードをいつでも呼び出し可能に

 

今回の吹き出しコードを必要な時に、ワードプレスに追加することで会話形式のスタイルが実現できます。

しかし、記事を書いていくとき、毎回このコードを追加登録していくのは少々疲れるときがあります。

 

・あれっ、コードの書き方を忘れた・・・。

・前回の記事をもう一度開いて、コードをコピペするのが面倒。。

などが考えられます。

addQuicktagプラグインに忘れがちなコードや、複雑な覚えていられないようなコードを事前に登録しておけば、必要な時に、ワンタッチで呼び出せます。

作業効率がグーンとアップしますので、試してみてくださいね。

addquicktagで吹き出しや蛍光マーカーも設定!おすすめの使い方とは?作業効率をアップ」で詳しく解説していますので、合わせてご参考にしていただけると嬉しいです。

Aki☆
ブログを書くことに慣れてきたら、このaddQuickTagの機能がとても便利に感じるようになります。

最初はこの良さに気付かなかったけどね・・

 

(2019/10/26 記事追加)

 

 

 

最後にまとめ

 

あれこれと説明を記載しまたが、上手く吹き出しアイコンが表示できましたでしょうか?

会話形式の質疑応答スタイルの記事を記載したい場合は、この機能を使うと見やすいですね。

このサイトの英語カテゴリの記事で、今後このツールを活用して分かり易い記事を作成しようと思ってます。

この記事が参考にしていただけると嬉しいです。

 

関連記事を簡単に表示できるプラグインWordPress Related Postsの利用方法とは

 

 

 

 

ワードプレスの吹き出しはプラグインで簡単設定。画像アイコンの変更も可能で会話を楽しもう!」への2件のフィードバック

  1. ミラ

    はじめまして。
    ランキングからきましたミラです。
    まさしく!ブログに吹き出しで会話を入れたかったので、とても参考になりました。
    ありがとうございました。

    返信
    1. kuma 投稿作成者

      ミラさん、訪問ありがとうございます。
      お役に立ててこちらも、大変うれしいです。
      私も最初、吹き出しってどうやればいいんだろう・・って悩みましたし、きっと難しいことしているんだろうなぁ
      と思ってました。

      試行錯誤しながら作っているので、まだまだ恥ずかしい限りです。
      中々更新頻度も頻繁にできないけど、よろしくね。

      ミラさんのサイトにも是非、訪問したいです。

      返信

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です