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

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

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

【コピペOK】吹き出しの色・文字色・装飾を変える!吹き出しパターンサンプル
最終更新日:2020.08.25

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

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

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

今までのナコさん

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

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

生まれ変わったなこさん
なこ
どやろか・・・色も文字色もかえれるぞい

ナコ
いいやん!

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

種類は無限大

<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プラグインを使ってボタン

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

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

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

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

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

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

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

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

まとめ

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

なこ
めっちゃ楽しいわぁ〜

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