Zenn
💥

吹き出しのWordPressプラグインを4つ紹介！プラグインなしのhtmlコードも紹介

2024/12/17に公開
AI
WordPress
plugin
生成 AI
idea

「WordPressで吹き出しを作れるプラグインはどれ？」

よく私運営のちょい足しAIサービスでもお問い合わせをいただきます。
そのため、WordPressで吹き出しを作れるプラグインをまとめてみました！

【すぐ見たい人▼】

吹き出しプラグイン 特徴
LIQUID SPEECH BALLOON 一番人気。簡単に直感的に作れる
Word Balloon デザインが豊富。アニメーションもつけられる
WP-Speech-Balloon ショートコードで吹き出しを作る。
番外編
ちょい足しAI		 WordPressに生成AIを簡単導入。
AI機能を買えるECサイト

本記事では、吹き出し作れるプラグインの紹介もしますが、
プラグインなしでコードを作る方法も紹介いたします！

では早速以下から、ご覧ください。

吹き出しを作れるWordPressのプラグインおすすめ4選！入れ方まで紹介

吹き出しを作れるワードプレスプラグインを以下4つ紹介していきます。

LIQUID SPEECH BALLOONは右側など左右自由に吹き出し設定できるWordPressのプラグイン

LIQUID SPEECH BALLOONは、WordPressユーザーに人気の高い吹き出しプラグインです。吹き出しの向きを左右自由に変更できます。
そのため、会話のやりとりをより自然に表現が可能です。

さらに、このプラグインはWordPressの最新エディターであるGutenbergに完全対応しています。ブロックエディター上で直感的に操作できるため、HTMLやCSSの知識がなくても簡単に吹き出しを作成できます。デザインも豊富で、標準、バブル、四角、破線、シャドウ、枠なしなど、様々なスタイルから選択可能です。

また、LIQUID SPEECH BALLOONはAMP対応しているため、モバイルフレンドリーなサイト作りにも貢献します。さらに、アバターの設定数に制限がないため、多くのキャラクターを使った会話形式のコンテンツも作成できます。

このプラグインの使いやすさと機能の豊富さは、多くのユーザーから高く評価されています。WordPressで吹き出しを使いたい方にとって、LIQUID SPEECH BALLOONは非常に魅力的な選択肢となるでしょう。

Word Balloonはデザイン豊富のワードプレスの吹き出しプラグイン

Word Balloonは、WordPressユーザーにとって非常に魅力的な吹き出しプラグインです。その最大の強みは、豊富なデザインバリエーションにあります。

28種類もの吹き出しデザインが用意されているため、ブログやウェブサイトの雰囲気に合わせて最適な吹き出しを選択することができます。

さらに、Word Balloonの特筆すべき機能として、20種類のアニメーション効果があります。これにより、静的な吹き出しだけでなく、動きのある吹き出しを作成することが可能となり、読者の注目を集めることができます。

また、このプラグインは吹き出しに音声を付加する機能も備えています。例えば、吹き出しのセリフを自分で読んで録音し、それをサウンドとして登録することもできます。これにより、より臨場感のある会話表現が可能となり、読者の興味を引き付けることができます。

Word Balloonは無料版でも3種類のアバターを登録できるため、少人数での会話表現には十分対応できます。また、操作も非常に直感的で、WordPressの投稿画面から簡単に吹き出しを挿入することができます。

このように、Word Balloonはデザインの豊富さ、アニメーション機能、音声機能など、他のプラグインにはない特徴を持っています。これらの機能を活用することで、より魅力的で読者を引き付けるコンテンツを作成することができるでしょう。

WP-Speech-Balloonは吹き出しを作れるプラグインだがブロックエディターに非対応

WP-Speech-Balloonは、WordPressで吹き出しを作成するためのプラグインですが、少し利用に注意が必要です。

WP-Speech-Balloonは専用のショートコードを使用して吹き出しを使用します。あらかじめ用意されたデザインの異なる「ショートコードテンプレート」を投稿画面に貼り付けることで吹き出しを作成します。

現在、左右各5種類ずつ、計10種類の吹き出しパターンが用意されています。吹き出しの種類を変更する際も、テンプレートコードの数字を変えるだけで簡単に行えるため、HTMLやCSSの知識がなくても使いこなすことができます。

しかし、WP-Speech-Balloonにはちょっとした注意点があります。それは、最新のWordPressエディターであるブロックエディター（Gutenberg）に対応していないという点です。これは、他の多くの吹き出しプラグインがブロックエディターに対応している中で、大きなデメリットとなっています。

一方で、ショートコードを使用する方式には独自の利点もあります。投稿や固定ページの本文だけでなく、ウィジェットエリアなど、ショートコードが使用可能な場所であればどこにでも吹き出しを配置できるという柔軟性があります。これにより、サイドバーやフッターなど、通常のブロックでは配置が難しい場所にも吹き出しを表示が可能です。

ちょい足しAIは吹き出しなど色んなWordPressプラグインを購入できる日本産サービス


番外編です。
競合よりもオリジナルのあるサイト運営がしたい！

そんな希望があるなら、ちょい足しAIを使ってみませんか？

ちょい足しAIは、WordPress専用生成AI機能を買えるECサイトです。
関連記事に要約ボタン/リアルタイムチャットなど、生成AIを搭載したプラグインが買えます。

導入は超簡単で、[ショートコード]のみです。
以下からサイトご覧になれますので、ぜひ。

https://tyoitashi.gym-ai-top.com/

【完全コピペ】プラグインなしで吹き出し？htmlコードを大紹介！WordPress完全対応

**「プラグイン解説が全然詳しくない...」**となったと思います。

まずすみません。
ですが、私は吹き出しはプラグインよりも独自実装する方法をおすすめしています。

【なぜプラグインなしをおすすめするのか。】

  • プラグインはあるが解説がイマイチでわかりにくい
  • プラグインの利用方法を学ぶのは効率が悪い
  • 独自実装をコピペした方が楽ちん

以下からは、プラグインなしで吹き出しを作成する方法を具体的に書いていきます。

htmlとcssコードでWordPressの吹き出しを作る方法

この場合は、『毎回HTMLを操作して吹き出しの作成』をします。

WordPressで毎回＋ > カスタムhtmlを選び該当する吹き出しコードを入れます。

実際に入れてみると・・・

プレビューを押せば、実際の吹き出しスタイルになります。

では、以下から完全コピペOKの吹き出しデザインを紹介します。

基本デザイン | WordPressプラグインなしで吹き出しを作成

カスタムHTML
<!--吹き出しはじまり-->
<div class="balloon5">
  <div class="faceicon">
    ★ここに画像を入れる <img~>★
  </div>
  <div class="chatting">
    <div class="says">
      <p>★文章を入れる★</p>
    </div>
  </div>
</div>
<!--吹き出し終わり-->
style.css
.balloon5 {
  width: 100%;
  margin: 1.5em 0;
  overflow: hidden;
}

.balloon5 .faceicon {
  float: left;
  margin-right: -90px;
  width: 80px;
}

.balloon5 .faceicon img{
  width: 100%;
  height: auto;
  border: solid 3px #d7ebfe;
  border-radius: 50%;
}

.balloon5 .chatting {
  width: 100%;
}

.says {
  display: inline-block;
  position: relative; 
  margin: 5px 0 0 105px;
  padding: 17px 13px;
  border-radius: 12px;
  background: #d7ebfe;
}

.says:after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 18px; 
  left: -24px;
  border: 12px solid transparent;
  border-right: 12px solid #d7ebfe;
}

.says p {
  margin: 0;
  padding: 0;
}

このコードはサルワカさんのサイトを引用しています。
詳しいコードはサルワカさんをご覧ください。
https://saruwakakun.com/html-css/reference/speech-bubble

プラグインなしでそもそも吹き出し機能のあるWordPressテーマを使う

最初から吹き出し機能が組み込まれているテーマを選ぶ方法もあります。

吹き出し機能内蔵テーマのメリット

  • サイトの読み込み速度が向上（プラグインによる負荷がない）
  • テーマ全体とデザインの統一感が保てる
  • プラグインの更新や互換性の心配が不要
  • 追加費用が発生しない（有料プラグインの場合）

おすすめの吹き出し機能内蔵テーマ：
・SANGO（サンゴ）
デザイン性が高く、豊富な吹き出しバリエーションを提供しています。管理画面からカスタマイズが容易で、初心者でも扱いやすい設計になっています。
・JIN
人気の高いテーマで、シンプルながら必要十分な吹き出し機能を搭載。アイコンの変更や色の調整も簡単に行えます。
・THE THOR（ザ・トール）
プロフェッショナルな印象を与える吹き出しデザインが特徴。ビジネスサイトやコーポレートブログに適しています。

Discussion