コピペでできるチャット風吹き出しデザインいろいろ

コピー&ペーストでできる吹き出しデザイン集です。

共通CSS

全デザイン共通のCSSです。導入デザイン数のいかんを問わず必ず必要な内容です。

/* 共通CSS */
:root {
  --chat-width-max: 500px;/* 吹き出しの横幅最大値, 不要ならこの一行削除 */
  --chat-margin: 20px;/* 前後要素との距離 */

  --chat-icon-size: 80px;/* アイコン画像のサイズ */

  --chat-text-padding: 10px 15px;/* テキスト内余白 (上下10px 左右15px) */
  --chat-text-font-size: 14px;/* テキスト文字大きさ */
}

.chat {
  display: flex;
  align-items: flex-start;
  width: 100%;
  margin: var(--chat-margin) auto;
}

.chat__r {
  justify-content: flex-end;
}

.chat__r .chat__icon {
  order: 1;
}

.chat__icon {
  flex-shrink: 0;
  width: var(--chat-icon-size);
  height: var(--chat-icon-size);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.chat__text {
  position: relative;
  max-width: var(--chat-width-max, initial);
  padding: var(--chat-text-padding);
  font-size: var(--chat-text-font-size);
}

カスタムプロパティ(--xxx)以外はカスタマイズ非推奨です。全デザインに共通する内容は以下の通り。

  • アイコン画像のサイズ(『コーナー』を除く)
  • 前後要素との距離
  • テキスト周りの余白(『オーバル』『シフト』除く)
  • テキストの大きさ

テキストは12〜16pxを推奨。個人的には14pxが適していると思います。アイコン画像のサイズは 160〜200pxの正方形 が推奨です。

シンプル

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet libero sed augue molestie scelerisque vitae tincidunt nunc.
Nunc dignissim vulputate erat, eu mollis lorem maximus at.
<!-- シンプル -->
<!-- 左 -->
<div class="chat noborder__chat">
  <div class="chat__icon"></div>
  <div class="chat__text">文章</div>
</div>

<!-- 右 -->
<div class="chat noborder__chat chat__r">
  <div class="chat__icon"></div>
  <div class="chat__text">文章</div>
</div>
/* シンプル */
:root {
  --noborder-chat-item-distance: 8px;/* アイコン画像〜吹き出し間の距離, 0以上の数値のみ可(吹き出し角分は自動で空きます) */

  --noborder-chat-icon-radius: 50%;/* アイコン円形, 四角形角丸は px で指定 */
  --noborder-chat-icon-bgcolor: rgb(240,240,240);/* アイコン背景色(透過PNGへの配慮) */
  --noborder-chat-icon-bgimage-left: url(画像URL);/* 左画像 */
  --noborder-chat-icon-bgimage-right: url(画像URL);/* 右画像 */

  --noborder-chat-text-radius: 6px;/* テキスト角丸 */
  --noborder-chat-text-bgcolor: rgb(240,240,240);/* テキスト背景色 */
  --noborder-chat-text-color: rgb(51,51,51);/* テキスト文字色 */

  --noborder-chat-triangle-size: 20px;/* 吹き出し角大きさ */
  --noborder-chat-triangle-position-top: 15px;/* 吹き出し角位置(上から) */
}

.noborder__chat {
  gap: 0 calc(var(--noborder-chat-item-distance) + calc(var(--noborder-chat-triangle-size) / 1.5));
}

.noborder__chat .chat__icon {
  border-radius: var(--noborder-chat-icon-radius);
  background-color: var(--noborder-chat-icon-bgcolor);
  background-image: var(--noborder-chat-icon-bgimage-left);
}

.noborder__chat.chat__r .chat__icon {
  background-image: var(--noborder-chat-icon-bgimage-right);
}

.noborder__chat .chat__text {
  border-radius: var(--noborder-chat-text-radius);
  background: var(--noborder-chat-text-bgcolor);
  color: var(--noborder-chat-text-color);
}

.noborder__chat .chat__text::after {
  content: "";
  display: block;
  position: absolute;
  top: var(--noborder-chat-triangle-position-top);
  right: calc(100% - 1px);
  clip-path: polygon(100% 100%, 100% 0, 0 50%);
  width: calc(var(--noborder-chat-triangle-size) / 1.5);
  height: var(--noborder-chat-triangle-size);
  background: var(--noborder-chat-text-bgcolor);
}

.noborder__chat.chat__r .chat__text::after {
  right: auto;
  left: calc(100% - 1px);
  clip-path: polygon(100% 50%, 0 0, 0 100%);
}

ボーダー

おっかさんは前なっがいるた。ばは二給えトォテテテテテイのようをつまんがいまし。セロはゴーシュ扉だりみんなにひいといだ。
それなど泣き声をだまっがっ方たでし。つれすぎおまえはマッチにありがたいまして前のゴーシュのセロどもにはいっ第二首めのかっかとついてしまっでした。
<!-- ボーダー -->
<!-- 左 -->
<div class="chat border__chat">
  <div class="chat__icon"></div>
  <div class="chat__text">文章</div>
</div>

<!-- 右 -->
<div class="chat border__chat chat__r">
  <div class="chat__icon"></div>
  <div class="chat__text">文章</div>
</div>
/* ボーダー */
:root {
  --border-chat-item-distance: 8px;/* アイコン画像〜吹き出し間の距離(吹き出し角分は自動で空きます) */

  --border-chat-icon-radius: 50%;/* アイコン円形, 四角形角丸は px で指定 */
  --border-chat-icon-bgcolor: rgb(240,240,240);/* アイコン背景色(透過PNGへの配慮) */
  --border-chat-icon-bgimage-left: url(画像URL);/* 左画像 */
  --border-chat-icon-bgimage-right: url(画像URL);/* 右画像 */

  --border-chat-triangle-size: 16px;/* 吹き出し角大きさ */
  --border-chat-triangle-position-top: 15px;/* 吹き出し角位置(上から) */

  --border-chat-text-radius: 6px;/* テキスト角丸 */
  --border-chat-text-border-width: 3px;/* テキストボーダー太さ */
  --border-chat-text-border-color: rgb(161,172,191);/* テキストボーダー色 */
  --border-chat-text-bgcolor: rgb(225,236,255);/* テキスト背景色 */
  --border-chat-text-color: rgb(51,51,51);/* テキスト文字色 */
}

.border__chat {
  gap: 0 calc(var(--border-chat-item-distance) + calc(calc(var(--border-chat-triangle-size) / 1.5) + calc(var(--border-chat-text-border-width) * 2) - calc(var(--border-chat-text-border-width) - 1px)));
}

.border__chat .chat__icon {
  border-radius: var(--border-chat-icon-radius);
  background-color: var(--border-chat-icon-bgcolor);
  background-image: var(--border-chat-icon-bgimage-left);
}

.border__chat.chat__r .chat__icon {
  background-image: var(--border-chat-icon-bgimage-right);
}

.border__chat .chat__text {
  border-radius: var(--border-chat-text-radius);
  border: var(--border-chat-text-border-width) solid var(--border-chat-text-border-color);
  background: var(--border-chat-text-bgcolor);
  color: var(--border-chat-text-color);
}

.border__chat .chat__text::before,
.border__chat .chat__text::after {
  content: "";
  display: block;
  position: absolute;
  clip-path: polygon(100% 100%, 100% 0, 0 50%);
}

.border__chat .chat__text::before {
  top: calc(var(--border-chat-triangle-position-top) - var(--border-chat-text-border-width));
  right: 100%;
  width: calc(calc(var(--border-chat-triangle-size) / 1.5) + calc(var(--border-chat-text-border-width) * 2) - calc(var(--border-chat-text-border-width) - 1px));
  height: calc(var(--border-chat-triangle-size) + calc(var(--border-chat-text-border-width) * 2));
  background: var(--border-chat-text-border-color);
}

.border__chat .chat__text::after {
  top: var(--border-chat-triangle-position-top);
  right: calc(100% - 1px);
  width: calc(var(--border-chat-triangle-size) / 1.5);
  height: var(--border-chat-triangle-size);
  background: var(--border-chat-text-bgcolor);
}

.border__chat.chat__r .chat__text::before,
.border__chat.chat__r .chat__text::after {
  right: auto;
  clip-path: polygon(100% 50%, 0 0, 0 100%);
}

.border__chat.chat__r .chat__text::before {
  left: 100%;
}

.border__chat.chat__r .chat__text::after {
  left: calc(100% - 1px);
}

シャープ

Nullam rutrum dolor eu luctus placerat. Nulla maximus vel velit pretium efficitur.
Etiam feugiat leo et nibh venenatis, ut dapibus velit molestie. Suspendisse interdum eleifend tellus, rhoncus mollis velit tempor et.
<!-- シャープ -->
<!-- 左 -->
<div class="chat sharp__chat">
  <div class="chat__icon"></div>
  <div class="chat__text">文章</div>
</div>

<!-- 右 -->
<div class="chat sharp__chat chat__r">
  <div class="chat__icon"></div>
  <div class="chat__text">文章</div>
</div>
/* シャープ */
:root {
  --sharp-chat-item-distance: 2px;/* アイコン画像〜吹き出し間の距離, 0以上の数値のみ可(吹き出し角分は自動で空きます) */

  --sharp-chat-icon-radius: 50%;/* アイコン円形, 四角形角丸は px で指定 */
  --sharp-chat-icon-bgcolor: rgb(220,220,220);/* アイコン背景色(透過PNGへの配慮) */
  --sharp-chat-icon-bgimage-left: url(画像URL);/* 左画像 */
  --sharp-chat-icon-bgimage-right: url(画像URL);/* 右画像 */

  --sharp-chat-text-margin-top: 20px;/* テキスト位置下げ */
  --sharp-chat-text-bgcolor: rgb(255,184,11);/* テキスト背景色 */
  --sharp-chat-text-color: rgb(51,51,51);/* テキスト文字色 */

  --sharp-chat-triangle-size: 16px;/* 吹き出し角大きさ */
}

.sharp__chat {
  gap: 0 calc(var(--sharp-chat-item-distance) + var(--sharp-chat-triangle-size));
}

.sharp__chat .chat__icon {
  border-radius: var(--sharp-chat-icon-radius);
  background-color: var(--sharp-chat-icon-bgcolor);
  background-image: var(--sharp-chat-icon-bgimage-left);
}

.sharp__chat.chat__r .chat__icon {
  background-image: var(--sharp-chat-icon-bgimage-right);
}

.sharp__chat .chat__text {
  margin-top: var(--sharp-chat-text-margin-top);
  background: var(--sharp-chat-text-bgcolor);
  color: var(--sharp-chat-text-color);
}

.sharp__chat .chat__text::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 100%;
  clip-path: polygon(0 0, 100% 100%, 100% 0);
  width: var(--sharp-chat-triangle-size);
  height: calc(var(--sharp-chat-triangle-size) / 1.5);
  background: var(--sharp-chat-text-bgcolor);
}

.sharp__chat.chat__r .chat__text::after {
  right: auto;
  left: 100%;
  clip-path: polygon(0 0, 0 100%, 100% 0);
}

オーバル

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet libero sed augue molestie scelerisque vitae tincidunt nunc.
Nunc dignissim vulputate erat, eu mollis lorem maximus at.
  • テキスト内余白は自動計算です
  • アイコンと文章が下揃えのため、長文には向きません
<!-- オーバル -->
<!-- 左 -->
<div class="chat oval__chat">
  <div class="chat__icon"></div>
  <div class="chat__text">文章</div>
</div>

<!-- 右 -->
<div class="chat oval__chat chat__r">
  <div class="chat__icon"></div>
  <div class="chat__text">文章</div>
</div>
/* オーバル */
:root {
  --oval-chat-item-distance: 5px;/* アイコン画像〜吹き出し間の距離 */

  --oval-chat-icon-radius: 50%;/* アイコン円形, 四角形角丸は px で指定 */
  --oval-chat-icon-bgcolor: rgb(240,240,240);/* アイコン背景色(透過PNGへの配慮) */
  --oval-chat-icon-bgimage-left: url(画像URL);/* 左画像 */
  --oval-chat-icon-bgimage-right: url(画像URL);/* 右画像 */

  --oval-chat-text-border-width: 3px;/* テキストボーダー太さ, ボーダー不要ならこの一行削除 */
  --oval-chat-text-border-color: rgb(50,50,50);/* テキストボーダー色 */
  --oval-chat-text-bgcolor: rgb(253,203,179);/* テキスト背景色 */
  --oval-chat-text-color: rgb(51,51,51);/* テキスト文字色 */
}

.oval__chat {
  align-items: flex-end;
  gap: 0 var(--oval-chat-item-distance);
}

.oval__chat .chat__icon {
  border-radius: var(--oval-chat-icon-radius);
  background-color: var(--oval-chat-icon-bgcolor);
  background-image: var(--oval-chat-icon-bgimage-left);
}

.oval__chat.chat__r .chat__icon {
  background-image: var(--oval-chat-icon-bgimage-right);
}

.oval__chat .chat__text {
  padding: 3em 2em;
  border-top-right-radius: 9999px;
  border-top-left-radius: 9999px;
  border-bottom-right-radius: 9999px;
  border: var(--oval-chat-text-border-width, 0) solid var(--oval-chat-text-border-color);
  background: var(--oval-chat-text-bgcolor);
  color: var(--oval-chat-text-color);
}

.oval__chat.chat__r .chat__text {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 9999px;
}

.oval__chat .chat__text::before,
.oval__chat .chat__text::after {
  content: none;
}

コーナー

なるすぎ何はゴーシュをよくまして今の銀の一心たちを仕上げ第一ゴーシュ汁のかっかに云いていました。東は前まげてやるです。
狸も頭の話セロ汁をゴーシュを鳴らしヴァイオリンましまし。ところがどういいかげんだたという町まします。愉快ましたいことではたまた糸の俄団のときがはがたがた愉快たらますて、何まで下へしれのたまし
  • アイコンと文章が下揃えのため、長文には向きません
  • アイコンサイズは80pxの円形で固定です
  • アイコンとテキストの距離は10pxで固定です
<!-- コーナー -->
<!-- 左 -->
<div class="chat corner__chat">
  <div class="chat__icon"></div>
  <div class="chat__text">文章</div>
  <div class="corner__tail"><svg xmlns="http://www.w3.org/2000/svg" width="16.32" height="15.68" viewBox="0 0 51 49"><path fill="currentColor" stroke="none" d="M48 0h3v49H2c24.02-2.02 44.12-26 46-49Zm2.5 88.5"/></svg></div>
</div>

<!-- 右 -->
<div class="chat corner__chat chat__r">
  <div class="chat__icon"></div>
  <div class="chat__text">文章</div>
  <div class="corner__tail"><svg xmlns="http://www.w3.org/2000/svg" width="16.32" height="15.68" viewBox="0 0 51 49"><path fill="currentColor" stroke="none" d="M48 0h3v49H2c24.02-2.02 44.12-26 46-49Zm2.5 88.5"/></svg></div>
</div>
/* コーナー */
:root {
  --corner-chat-icon-bgcolor: rgb(240,240,240);/* アイコン背景色(透過PNGへの配慮) */
  --corner-chat-icon-bgimage-left: url(画像URL);/* 左画像 */
  --corner-chat-icon-bgimage-right: url(画像URL);/* 右画像 */

  --corner-chat-text-radius: 12px;
  --corner-chat-text-bgcolor: rgb(150,212,30);/* テキスト背景色 */
  --corner-chat-text-color: rgb(51,51,51);/* テキスト文字色 */
}

.corner__chat {
  align-items: flex-end;
  gap: 0 10px;
  position: relative;
}

.corner__chat .chat__icon {
  width: 80px;
  height: 80px;
  margin-bottom: 6px;
  border-radius: 50%;
  background-color: var(--corner-chat-icon-bgcolor);
  background-image: var(--corner-chat-icon-bgimage-left);
}

.corner__chat.chat__r .chat__icon {
  background-image: var(--corner-chat-icon-bgimage-right);
}

.corner__chat .chat__text {
  min-height: 60px;
  border-radius: var(--corner-chat-text-radius);
  border-bottom-left-radius: 0;
  background: var(--corner-chat-text-bgcolor);
  color: var(--corner-chat-text-color);
}

.corner__chat.chat__r .chat__text {
  border-radius: var(--corner-chat-text-radius);
  border-bottom-right-radius: 0;
}

.corner__tail {
  display: flex;
  align-items: flex-end;
  position: absolute;
  bottom: 0px;
  left: 54px;
  width: 38px;
  height: 38px;
  color: var(--corner-chat-text-bgcolor);
  overflow: hidden;
}

.corner__tail svg {
  width: 100%;
  height: auto;
  margin-bottom: -1px;
}

.chat__r .corner__tail {
  left: auto;
  right: 54px;
}

.chat__r .corner__tail svg {
  transform: scale(-1,1);
}

シフト

Maecenas luctus at felis dapibus sodales.
Donec dapibus dui nec dignissim blandit. Phasellus nec nulla nec sapien faucibus pharetra id at justo. Morbi eu velit efficitur, varius est quis, vulputate massa.
  • テキスト内余白は自動計算です
<!-- シフト -->
<!-- 左 -->
<div class="chat shift__chat">
  <div class="chat__icon"></div>
  <div class="chat__text">文章</div>
</div>

<!-- 右 -->
<div class="chat shift__chat chat__r">
  <div class="chat__icon"></div>
  <div class="chat__text">文章</div>
</div>
/* シフト */
:root {
  --abs-chat-icon-radius: 6px;/* 円形は 50% を指定 */

  --abs-chat-icon-bgcolor: rgb(240,240,240);/* アイコン背景色(透過PNGへの配慮) */
  --abs-chat-icon-bgimage-left: url(画像URL);/* 左画像 */
  --abs-chat-icon-bgimage-right: url(画像URL);/* 右画像 */

  --abs-chat-text-radius: 4px;
  --abs-chat-text-bgcolor: rgb(207,194,255);/* テキスト背景色 */
  --abs-chat-text-color: rgb(51,51,51);/* テキスト文字色 */
}

.shift__chat .chat__icon {
  position: relative;
  z-index: 1;
  border-radius: var(--abs-chat-icon-radius);
  background-color: var(--abs-chat-icon-bgcolor);
  background-image: var(--abs-chat-icon-bgimage-left);
}

.shift__chat.chat__r .chat__icon {
  background-image: var(--abs-chat-icon-bgimage-right);
}

.shift__chat .chat__text {
  margin: calc(var(--chat-icon-size) / 2) 0 0 calc(var(--chat-icon-size) / 2 * -1);
  padding: calc(var(--chat-icon-size) / 2) 1em calc(var(--chat-icon-size) / 2) calc(var(--chat-icon-size) / 2);
  border-radius: var(--abs-chat-text-radius);
  background: var(--abs-chat-text-bgcolor);
  color: var(--abs-chat-text-color);
}

.shift__chat.chat__r .chat__text {
  margin: calc(var(--chat-icon-size) / 2) calc(var(--chat-icon-size) / 2 * -1) 0 0;
}

.shift__tail {
  display: flex;
  align-items: flex-end;
  position: absolute;
  bottom: 0px;
  left: 54px;
  width: 38px;
  height: 38px;
  color: var(--abs-chat-text-bgcolor);
  overflow: hidden;
}

.shift__tail svg {
  width: 100%;
  height: auto;
  margin-bottom: -1px;
}

.chat__r .shift__tail {
  left: auto;
  right: 54px;
}

.chat__r .shift__tail svg {
  transform: scale(-1,1);
}

その他デザイン

以下のページでご覧頂けます。

CSS 吹き出し(balloon)などワンポイント装飾色々

CSS 吹き出し(balloon)などワンポイント装飾色々

「point」「check」や「会話形式吹き出し」など、コピペで使えるデザイン集。テンプレートに含めようかなぁ、と考えていたものなども併せて放出しようと思います。つまりもうテンプレートデザインとしては使わないのでみなさんの記事で使えそうならどうぞ (ノ゚ェ゚)...

まとめ

HTML内容の記録は以下のページで紹介しているツールが便利です。

【Clipy】HTMLモードで記事を書くときの強力な助っ人アプリ

【Clipy】HTMLモードで記事を書くときの強力な助っ人アプリ

FC2ブログの管理画面のデザインが刷新されまして、これまで以上に WYSIWYG(見たまま編集)とHTML編集の選択 がはっきりするようになったのではないかと思います。今回はHTML編集モードでの記事作成に便利なツールをご紹介します。...

CSSは通常の方法では テンプレートのスタイルシートの末尾 に記載します。テキスト下広告を 非表示 (画像高速表示OFF)に設定している方はCSSを以下のJSで差し込むこともできます。

<script>
var styleElm = document.createElement('style');
styleElm.type = 'text/css';
styleElm.innerText = 'ここにCSS内容(コード改行不可)';
document.getElementsByTagName('head').item(0).appendChild(styleElm);
</script>

CSS内容は圧縮してから記載しましょう。JSコード(script要素)の記載位置は記事作成(or 編集)画面の 『追記』の最終 です。

CSS Minify

CSS minifier to optimize your CSS code to make your website faster by decreasing the file size.

* 本記事は予約投稿です。

-
2024/02/08 (Thu) 12:34

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

vanillaice (Akira)
vanillaice (Akira)
2024/02/08 (Thu) 16:33

To これまた素敵 内緒さん

こんにちは ('0')/

CSSの圧縮はJS内に記載するためなので、通常のスタイルシートはその必要は無いですよ。圧縮してしまうとメンテナンスが大変だし ^^;
でも内緒さんみたいに腕に覚えのある方へは勧めても良いですよね。

最近なんでか知らないが『desperate housewives』を見直したくなっちゃって。なんでそんなこと思ったんだろう。色々しんどい(笑)
やっぱスーザン腹立つなぁ。もうあのキャラほんと大嫌い(笑)

-
2024/02/09 (Fri) 14:19

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

vanillaice (Akira)
vanillaice (Akira)
2024/02/16 (Fri) 22:12

To DHの件 内緒さん

こんばんは ('0')/

それなんですけども、今回は日本語吹き替え版で見ています。最初は「???」だったんですが、聞いているうちに「あれ?こっちが正解じゃない?」と思うようになっちゃって。
この吹き替えだと苛つき度3割増しって感じで逆に良い(笑)

柴田侊彦さん、残念ながら全く存じないです。そう言えば『のっぽさん』ってわかりますか。日本の子供番組に出ていたそうなんだけど。この方を何かで見たときに「チャールズやん」と思った記憶が。

-
2024/02/17 (Sat) 10:36

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

vanillaice (Akira)
vanillaice (Akira)
2024/02/20 (Tue) 17:15

To 知ってますよ(^ー^) 内緒さん

こんにちは ('0')/

「大秦帝国-QIN EMPIRE-」観たことないです。三国志にはやたら詳しいんですがその前後の中国の歴史は全く知らない。なので人気の『キングダム』とかも観てない ^^;

鬼滅そろそろ稽古編始まりますね。楽しみー。『ファブル』もアニメ化されるとかでそれも待ち遠しい。

でもってhousewives視聴やめました(笑)
長丁場すぎてこのままだと秋とかまでずっと観なきゃいけないと思って。なので私は決心しました。
『金田一耕助』をできる限りたくさん観ようと。まともに観たことが一度も無いんです。『スケキヨ』はわかります。マスクだけ。でもどの話かは知らない。
かなり古いみたいだけど頑張る。今『悪霊島』というのを途中まで観ました。あれ?主人公の俳優さん違うくね?と戸惑っている ^^;
いろんな方が演じているのですね。比較とかできるね。頑張ってたくさん観ます (o'ω')ノ

-
2024/02/21 (Wed) 12:19

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

コメントに関する注意事項
  • テンプレートに関するご質問は各テンプレート専用記事でのみ受付致します。また、よくある質問をまとめているページも事前にご参照ください。
  • 専門的なご質問の場合、記事内容と明らかに関連の無い内容はお控えください(雑談の場合はその限りではありません)
  • 第三者が不快と感じる内容や論調でのコメントはお控えください(性的,高圧的,暴力的など)