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>

CSS

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

/** 吹き出し **/
/* Cocoonのバルーンをリセット */
.speech-balloon,
.speech-balloon .balloon-content,
.speech-balloon .balloon-icon,
.speech-balloon .balloon-text {
  all: unset !important;
  display: revert !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: 50px !important;
  height: 50px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  margin: 0 15px !important;
  flex-shrink: 0 !important;
}


/* 吹き出し本体 */
.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 !important; /* LINE風グリーン */
  color: #000 !important;
  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;
}