CSSだけで作るシンプルな吹き出しバルーン｜WordPress対応

吹き出しの構造をシンプルにしたい

ブログあるある会話ふきだし用のプラグイン使ってて思ったけど、HTML構造が複雑じゃない？

コード汚れる。正直もっとシンプルに使いたい

それなー

画像、丸く抜けるようにもしとこー

というわけで作った。

プラグインじゃないから、WordPressでもアメブロでも使えるよ

吹き出しだけCocoonから乗り換える

Cocoonの吹き出しが…何か…あの…ツライ画像をWordPressのメディア管理でUPしなきゃだし何か見た目アレだし…それはCSSを編集するとか方法はあるけど、めんどくさい。でも結局作っちゃったなので、手っ取り早く別にプラグインを入れて使...

qooga.jb-jk.net

使い方

HTML

通常

画像まるっと出す『通常版』

<div class="speech-balloon left">
  <img alt="アイコン" src="画像のURL">
  <div class="text">フキダシにだしたい内容</div>
</div>

画像丸く抜く

画像を丸く切り抜く版

<div class="speech-balloon left">
  <img alt="アイコン" src="画像のURL" class="round">
  <div class="text">フキダシにだしたい内容</div>
</div>

CSS

お使いのテーマなりウィジットなりに追記してください。

/** 吹き出し **/
/* Cocoonのバルーンをリセット */
.speech-balloon,
.speech-balloon .balloon-content,
.speech-balloon .balloon-icon,
.speech-balloon .balloon-text {
  all: unset !important;
  display: revert !important;
}
.speech-balloon::before,
.speech-balloon::after{
  content: none !important;
  display: none !important;
}


/* 吹き出し全体 */
.speech-balloon {
  display: flex !important;
  align-items: flex-start !important;
  margin: 10px 0 !important;
  box-sizing: border-box !important;
}

/* 方向指定 */
.speech-balloon.right {
  flex-direction: row-reverse !important;
  margin-left: auto !important;
}

.speech-balloon.left {
  flex-direction: row !important;
  margin-right: auto !important;
}

/* アイコン画像 */
.speech-balloon > img {
  width: 70px !important;
  height: 70px !important;
  object-fit: cover !important;
  margin: 0 15px !important;
  flex-shrink: 0 !important;
}

.speech-balloon > img.round {
  border-radius: 50% !important;
  border:1px solid #ccc;
}


/* 吹き出し本体 */
.speech-balloon .text {
  padding: 10px 15px !important;
  border-radius: 15px !important;
  position: relative !important;
  max-width: 100% !important;
  word-break: break-word !important;
  background-color: #dcf8c6; /* LINE風グリーン */
  color: #000;
  box-sizing: border-box !important;
  margin-top: 5px !important; /* アイコンとの縦位置調整 */
}

/* 三角形（右寄せ） */
.speech-balloon.right .text::after {
  content: "" !important;
  position: absolute !important;
  top: 10px !important;
  right: -20px !important;
  border: 12px solid transparent !important;
  border-left-color: #dcf8c6 !important;
}

/* 三角形（左寄せ） */
.speech-balloon.left .text::after {
  content: "" !important;
  position: absolute !important;
  top: 10px !important;
  left: -20px !important;
  border: 12px solid transparent !important;
  border-right-color: #dcf8c6 !important;
}

右側でも自動的には『画像の反転』はしないよ

そのまま使いたいことが多いからねー

カスタマイズ

自分がした範囲のやつ。

フキダシの色の追加する

classに『yellow』を追加するだけ

こんな感じで、フキダシ三角の色が変わらなくてもいいなら『background-color』を変えるだけでできるよ

HTML

<div class="speech-balloon left yellow">
  <img alt="アイコン" src="画像のURL">
  <div class="text">フキダシにだしたい内容</div>
</div>

CSS

先程CSS追加した下に追加。

.speech-balloon.yellow .text {
  background-color: #ffdd90!important;
}
.speech-balloon.yellow.left .text::after {
  border-right-color: #ffdd90!important;
}
.speech-balloon.yellow.right .text::after {
  border-left-color: #ffdd90!important;
}

フキダシの画像を反転させる

画像の反転を指定したよ

HTML

<div class="speech-balloon right">
  <img alt="アイコン" src="画像のURL" class="flip-horizontal">
  <div class="text">フキダシにだしたい内容</div>
</div>

CSS

先程CSS追加した下に追加。

.speech-balloon > img.flip-horizontal{
  transform: scale(-1, 1);
}