【コピペ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(ワードプレス)　プラグインなし！１クリックでアイコン付き吹き出しを表示する方法

その他関連する記事

compassをバージョンアップしたらDEPRECATION WARNINGが出るようになったときに対処法 2021.05.25

さてさて、今日もコーディングがんばりますか！とタスクランナーを動かすと見慣れぬエラーが…。どうやらcompasのベース部分の書き方で怒られているみ[…]
Microsoft AI labが開発してる手書きのワイヤーからHTML5コーディングしてくれる「Sketch 2 Code」がすごそうなので試してみた 2018.09.03

まずは見てください！引用Sketch2Codeでホワイトボードのスケッチを数秒で作業コードに変換「Sketch 2 Code」で手書きのワイヤフレ[…]
「npm ERR! A complete log of this run can be found in:」と表示されnpm installが出来ない。 2021.03.03

「npm ERR! A complete log of this run can be found in:」のようなエラーが出てnpm install[…]
【コピペOK】１分で完成！「ScrollReveal.js」ライブラリを使って憧れのスクロールアニメーションを実装しよう！ 2021.02.02

１分で実装できる「ScrollReveal.js」。「ScrollReveal.js」ライブラリを使ってコピペで簡単に今流行のスクロールアニメーション[…]
VirtualBoxをアップデートしたらvagrant upエラーが出たときの解決法 2020.06.16

VirtualBoxを起動したら催促されるアップデートの誘い…しかしvagrantのバージョンと相性があるようです。わたしは最新の 6.1.10へア[…]

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

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

月	火	水	木	金	土	日
						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	31

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

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

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

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

種類は無限大

吹き出しノーマル

考え中

追加出来る色のパターン

「balloon_pattern_css.zip」の中身

更新履歴

詳しい説明

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

左右を変えてみる

コピペしよう！

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

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

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

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

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

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

WordPressで使う時

CSS、icon画像の配置

CSSの追加

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

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

まとめ

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

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

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

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