【コピペOK】吹き出しの色・文字色・装飾を変える！吹き出しパターンサンプル

最終更新日：2020.08.25

会話形式の吹き出しデザインのバリエーションを増やしたい！
無機質なんは嫌や…カラフルにたのしくするんや。
考え中の吹き出しがほしい！

そんな訳で色も形も自分好みにして楽しい会話を演出する為のベースを作成しました。
コピペやダウンロードして改造してつかってくださいね♪

吹き出しを装飾してみよう

今までのナコさん

ナコ

吹き出しで会話方式楽しいけど、もっと遊びが欲しいよな！

生まれ変わったなこさん

なこ

どやろか・・・色も文字色もかえれるぞい

ナコ

いいやん！

↑上みたいなアニメーションアイコンにする方法はこちらで紹介しています

こいつ…動くぞ！会話方式(吹き出し)アイコンがCSSでアニメーションするサンプル

種類は無限大

<div class="balloon__contener">部分に以下のclassを追加するだけでバリエーションが表現できます。

吹き出しノーマル

<div class="balloon__contener">

考え中

<div class="balloon__contener　balloon_thinking">

追加出来る色のパターン

色	背景	文字色
紫	bg__purple	color__purple
緑	bg__green	color__green
ピンク	bg__pink	color__pink
オレンジ	bg__orenge	color__orenge
ベージュ	タグなし	色なし
白	タグなし	color__white

「balloon_pattern_css.zip」の中身

このページでダウンロードできるzipファイルの中身です。

index.html	HTMLのソースファイルです
iconフォルダ	アイコン画像が入っています。
style.css	CSSファイルです。
style.scss	Sass(SCSS)ファイルです。上のCSSと同じ内容になります。

文字コードは【UTF-8】で作っています。

更新履歴

2020/06/11 Ver.1.0

ソースを公開しました

吹き出しのバリエーション画面Ver.1.0をダウンロードする(balloon_pattern_css.zip)

詳しい説明

プロフィール画像を変えてみる

imgタグ内を差し替えます。
画像のサイズは正方形がよいです。

コピー


  <!-- ショック -->
  <div class="balloon__contener">
    <div class="balloon__left">
      <figure>
        <span class="icon_emotion"></span>
        <img src="icon/img_shock.png" /> //ここを変更
        <figcaption>なこ</figcaption>
      </figure>
      <div class="balloon__text">
        しょっくー！！岡田くん結婚するの〜いやーーーー
      </div>
    </div>
  </div>

しょっくー！！岡田くん結婚するの〜いやーーーー

左右を変えてみる

吹き出しコンテナの【balloon__left】クラス部分で左右を切り替えています。

右アイコン表示の場合
【balloon__left】

なこ

右アイコン表示の場合だよー

左アイコン表示の場合
【balloon__right】

なこ

左アイコン表示の場合だよー

コピペしよう！

考え中吹き出し＋紫背景＋白文字

なこ

まじか・・・完全にミスった・・・

コピー


  <div class="balloon__contener bg__purple color__white">
    <div class="balloon__left">
      <figure>
        <img src="icon/img_sweat.png" />
        <figcaption>なこ</figcaption>
      </figure>
      <div class="balloon_thinking">
        まじか・・・完全にミスった・・・
      </div>
    </div>
  </div>

考え中吹き出し＋ピンク背景

なこ

やっちまったな！

コピー


  <div class="balloon__contener bg__pink">
    <div class="balloon__right">
      <figure>
        <img src="https://nakox.jp/wp-content/uploads/icon/img_sweat.png" />
        <figcaption>なこ</figcaption>
      </figure>
      <div class="balloon_thinking color__red">
        やっちまったな！
      </div>
    </div>
  </div>

吹き出し＋緑背景+複数行

なこ

今日はいいことあってわくわくだよ！
複数行もいけるぞな
複数行もいけるぞな

コピー


  <div class="balloon__contener bg__green">
    <div class="balloon__left">
      <figure>
        <img src="https://nakox.jp/wp-content/uploads/icon/img_up.png" />
        <figcaption>なこ</figcaption>
      </figure>
      <div class="balloon__text">
        今日はいいことあってわくわくだよ！<br>複数行もいけるぞな<br>複数行もいけるぞな
      </div>
    </div>
  </div>

吹き出し＋紫背景+緑文字

なこ

むきーーーー！！！ゆるすまし！！！

コピー


<div class="balloon__contener bg__purple color__green">
    <div class="balloon__left">
      <figure>
        <img src="https://nakox.jp/wp-content/uploads/icon/img_angry.png" />
        <figcaption>なこ</figcaption>
      </figure>
      <div class="balloon__text">
        むきーーーー！！！<b>ゆるすまし！！！</b>
      </div>
    </div>
  </div>

吹き出し＋ピンク背景+白文字

なこ

めっちゃおいしいやん。幸せ

コピー


<div class="balloon__contener bg__pink color__white">
    <div class="balloon__right">
      <figure>
        <img src="https://nakox.jp/wp-content/uploads/icon/img_heart.png" />
        <figcaption>なこ</figcaption>
      </figure>
      <div class="balloon__text">
        めっちゃおいしいやん。幸せ
      </div>
    </div>
  </div>

吹き出し＋オレンジ背景+白文字

なこ

しょっくー！！岡田くん結婚するの〜いやーーーー

コピー


  <div class="balloon__contener bg__orenge color__white">
    <div class="balloon__left">
      <figure>
        <img src="https://nakox.jp/wp-content/uploads/icon/img_shock.png" />
        <figcaption>なこ</figcaption>
      </figure>
      <div class="balloon__text">
        しょっくー！！岡田くん結婚するの〜いやーーーー
      </div>
    </div>
  </div>

WordPressで使う時

CSS、icon画像の配置

index.html	HTMLのソースファイルです
iconフォルダ	アイコン画像が入っています。【/wp-content/themes/お使いのテーマ】内にUPしてください。
style.css	CSSファイルです【/wp-content/themes/お使いのテーマ】内style.cssに追加してください。
style.scss	Sass(SCSS)ファイルです。上のCSSと同じ内容になります。

文字コードは【UTF-8】で作っています。

CSSの追加

【/wp-content/themes/お使いのテーマ】内style.cssに追加してください。

コピー


/*/////////////////////////////////////////////////
//吹き出しのパターン色々
/////////////////////////////////////////////////*/
.balloon__contener {
  clear: both;
  width: 100%;
  padding: 10px 0;
}

.balloon__contener:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

.balloon__contener figure {
  width: 60px;
  position: absolute;
  padding: 0;
  margin: 0;
  top: 0;
  /* 正方形を用意 */
}

.balloon__contener figure img {
  border-radius: 50%;
  width: 60px;
  height: 60px;
  border: solid 1px #dddddd;
}

.balloon__contener figure figcaption {
  color: #000000;
  width: 60px;
  position: absolute;
  top: 63px;
  text-align: center;
  font-size: 70%;
  line-height: 100%;
}

.balloon__contener .balloon__left {
  width: 100%;
  position: relative;
  display: block;
  max-width: 80%;
  clear: both;
}

.balloon__contener .balloon__left figure {
  left: 0;
}

.balloon__contener .balloon__left .balloon_thinking {
  margin-left: 100px;
  position: relative;
  padding: 20px;
  border-radius: 10px;
  background-color: #F2EDD0;
}

.balloon__contener .balloon__left .balloon_thinking:before {
  content: "";
  position: absolute;
  left: -38px;
  width: 13px;
  height: 12px;
  top: 10px;
  background: #F2EDD0;
  border-radius: 50%;
}

.balloon__contener .balloon__left .balloon_thinking:after {
  content: "";
  position: absolute;
  left: -24px;
  width: 20px;
  height: 18px;
  top: 13px;
  background: #F2EDD0;
  border-radius: 50%;
}

.balloon__contener .balloon__left .balloon__text {
  margin-left: 80px;
  position: relative;
  padding: 20px;
  border-radius: 10px;
  background-color: #F2EDD0;
}

.balloon__contener .balloon__left .balloon__text::after {
  content: "";
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -10px;
  top: 12px;
  border-right: 15px solid #F2EDD0;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}

.balloon__contener .balloon__right {
  width: 100%;
  position: relative;
  display: block;
  float: right;
  max-width: 80%;
  clear: both;
}

.balloon__contener .balloon__right figure {
  right: 0;
}

.balloon__contener .balloon__right .balloon_thinking {
  margin-right: 100px;
  position: relative;
  padding: 20px;
  border-radius: 10px;
  background-color: #eeeeee;
}

.balloon__contener .balloon__right .balloon_thinking:before {
  content: "";
  position: absolute;
  right: -38px;
  width: 13px;
  height: 12px;
  top: 10px;
  background: #eeeeee;
  border-radius: 50%;
}

.balloon__contener .balloon__right .balloon_thinking:after {
  content: "";
  position: absolute;
  right: -24px;
  width: 20px;
  height: 18px;
  top: 13px;
  background: #eeeeee;
  border-radius: 50%;
}

.balloon__contener .balloon__right .balloon__text {
  margin-right: 80px;
  position: relative;
  padding: 20px;
  border-radius: 10px;
  background-color: #eeeeee;
}

.balloon__contener .balloon__right .balloon__text::after {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  right: -10px;
  top: 12px;
  border-left: 15px solid #eeeeee;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}

.balloon__contener.bg__purple .balloon_thinking,
.balloon__contener.bg__purple .balloon__text,
.balloon__contener.bg__purple figure img {
  background: #513961;
}

.balloon__contener.bg__purple .balloon_thinking:before {
  background: #513961;
}

.balloon__contener.bg__purple .balloon_thinking:after {
  background: #513961;
}

.balloon__contener.bg__purple .balloon__right .balloon__text:after {
  border-left: 15px solid #513961;
}

.balloon__contener.bg__purple .balloon__left .balloon__text:after {
  border-right: 15px solid #513961;
}

.balloon__contener.bg__pink .balloon_thinking,
.balloon__contener.bg__pink .balloon__text,
.balloon__contener.bg__pink figure img {
  background: #F52F6C;
}

.balloon__contener.bg__pink .balloon_thinking:before {
  background: #F52F6C;
}

.balloon__contener.bg__pink .balloon_thinking:after {
  background: #F52F6C;
}

.balloon__contener.bg__pink .balloon__right .balloon__text:after {
  border-left: 15px solid #F52F6C;
}

.balloon__contener.bg__pink .balloon__left .balloon__text:after {
  border-right: 15px solid #F52F6C;
}

.balloon__contener.bg__green .balloon_thinking,
.balloon__contener.bg__green .balloon__text,
.balloon__contener.bg__green figure img {
  background: #11C2BA;
}

.balloon__contener.bg__green .balloon_thinking:before {
  background: #11C2BA;
}

.balloon__contener.bg__green .balloon_thinking:after {
  background: #11C2BA;
}

.balloon__contener.bg__green .balloon__right .balloon__text:after {
  border-left: 15px solid #11C2BA;
}

.balloon__contener.bg__green .balloon__left .balloon__text:after {
  border-right: 15px solid #11C2BA;
}

.balloon__contener.bg__orenge .balloon_thinking,
.balloon__contener.bg__orenge .balloon__text,
.balloon__contener.bg__orenge figure img {
  background: #F5594E;
}

.balloon__contener.bg__orenge .balloon_thinking:before {
  background: #F5594E;
}

.balloon__contener.bg__orenge .balloon_thinking:after {
  background: #F5594E;
}

.balloon__contener.bg__orenge .balloon__right .balloon__text:after {
  border-left: 15px solid #F5594E;
}

.balloon__contener.bg__orenge .balloon__left .balloon__text:after {
  border-right: 15px solid #F5594E;
}

.balloon__contener.color__purple .balloon_thinking,
.balloon__contener.color__purple .balloon__text {
  color: #513961;
}

.balloon__contener.color__pink .balloon_thinking,
.balloon__contener.color__pink .balloon__text {
  color: #F52F6C;
}

.balloon__contener.color__orenge .balloon_thinking,
.balloon__contener.color__orenge .balloon__text {
  color: #F5594E;
}

.balloon__contener.color__green .balloon_thinking,
.balloon__contener.color__green .balloon__text {
  color: #11C2BA;
}

.balloon__contener.color__white .balloon_thinking,
.balloon__contener.color__white .balloon__text {
  color: white;
}

@media only screen and (max-width: 767px) {
  .balloon__contener .balloon__left,
  .balloon__contener .balloon__right {
    max-width: 100%;
  }
}

./icon/icon_down.svgの部分はUPした画像までのパスに変更してください♪

AddQuicktagプラグインを使ってボタン

こんな感じのショートコード化しちゃいます。

ボタン一つでなんでも追加してくれるクイックタグ、便利です！！

ビジュアルエディタ側で表示させるにはJSを読ませたり結構な手間がかかります。
そのあたりを簡単に実現したい時はAddQuicktagプラグインのインストールをオススメします！

このブログでもよく使うタグはクイックタグにしています。
めんどくさがりマンの私でもポチれば表示されるので、とっても助かっています。

AddQuicktagプラグインの設定画面でボタン要素それぞれに以下を追加

プラグインの説明はこちら

WordPressプラグインAddQuicktagの使い方！おすすめ設定も！

まとめ

アイコンの気持ちを形で表現してみました！
バリエーションUPで楽しいブログ生活になりそうですね。

なこ

めっちゃ楽しいわぁ〜

シンプルな吹き出し表示はこちらで記事を書いています〜

WordPress(ワードプレス)　プラグインなし！１クリックでアイコン付き吹き出しを表示する方法

その他関連する記事

centos/7+Vagrant+VirtualBoxでrsyncが失敗する解決法(There was an error when attempting to rsync a synced folder.) 2020.07.31

centos/7+Vagrant+VirtualBoxでローカル環境中にrsyncでエラーが出て詰まったので解決法です。なんとも毎回なんだかのエラー[…]
CSSでanimation指定したSVGアニメーションをスクロールで画面内に入った時に動かす方法 2020.08.06

CSSのアニメーションで動かしたSGVアニメーションをスクロール連動させてみました！複数ページにも対応しています。目次 1. 今回の困った問題点2[…]
glupしたらcompassエラー「Error: spawn /usr/local/bin/compass ENOENT」で動かないときの解決法 2020.12.24

古いBOXから生成したプロジェクトのglupが動かなかったので解決法のメモです。久しぶりに起動したプロジェクトのSCSSをビルドしようとすると以下の[…]
こいつ…動くぞ！会話方式(吹き出し)アイコンがCSSでアニメーションするサンプル 2019.07.10

ブログをみていると度々登場する会話形式の吹き出しデザイン。ライターの気持ちを代弁している事が多いのこのアイコンさんに喜怒哀楽を表すアニメーションを追[…]
webpackをアップデートしたらgulpfile.jsにautoprefixerの設定書いてるとエラー出るようになったのでpackage.jsonへ移動する 2019.06.17

webpackを入れ直してコンパイルするとautoprefixerでエラーが出るようになったので解決方法です。目次 1. エラー内容2. 解決方法 […]

かいたひと：ナコ投稿一覧

WEB制作会社で16年、WEBデザイナーとして勤務中！娘が2人居るママワーカー。2019年10月から全社員在宅勤務となり、絶賛リモートワーク中。デザイン・コーディング・WordPress組み込みまでトータルで受け持っております。WEBの事以外にも子供が小さい時の働き方やランチ、在宅ワーカーに向けたハック等を書けたらいいなぁと思っております。

2024年4月
月	火	水	木	金	土	日
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

【コピペOK】吹き出しの色・文字色・装飾を変える！吹き出しパターンサンプル

【コピペOK】吹き出しの色・文字色・装飾を変える！吹き出しパターンサンプル

吹き出しを装飾してみよう

こいつ…動くぞ！会話方式(吹き出し)アイコンがCSSでアニメーションするサンプル

種類は無限大

吹き出しノーマル

考え中

追加出来る色のパターン

「balloon_pattern_css.zip」の中身

更新履歴

詳しい説明

プロフィール画像を変えてみる

左右を変えてみる

コピペしよう！

考え中吹き出し＋紫背景＋白文字

考え中吹き出し＋ピンク背景

吹き出し＋緑背景+複数行

吹き出し＋紫背景+緑文字

吹き出し＋ピンク背景+白文字

吹き出し＋オレンジ背景+白文字

WordPressで使う時

CSS、icon画像の配置

CSSの追加

AddQuicktagプラグインを使ってボタン

AddQuicktagプラグインの設定画面でボタン要素それぞれに以下を追加

まとめ

WordPress(ワードプレス) プラグインなし！１クリックでアイコン付き吹き出しを表示する方法

【コピペOK】吹き出しの色・文字色・装飾を変える！吹き出しパターンサンプル

【コピペOK】吹き出しの色・文字色・装飾を変える！吹き出しパターンサンプル

WordPress(ワードプレス)　プラグインなし！１クリックでアイコン付き吹き出しを表示する方法