LIQUID SPEECH BALLOONの吹き出しの枠をちゃんと縁取りする

LIQUID SPEECH BALLOONはWordPressで会話形式の吹き出しを作成できる、いいプラグインです。

ただ一つ気になるところがあって、吹き出しの根本の三角形が塗りつぶしされています。

吹き出しの三角形がグレーで塗りつぶしされている
LIQUID-SPEECH-BALLOONの標準の吹き出し

枠が縁取りされていた方が見た目が綺麗なので、ちょちょいとCSSを直します。

修正作業

前提

吹き出しはCSSで作られています。吹き出しのCSSには定石のコードがあって、問題の部分は「枠の色で塗りつぶした三角形」と「背景色で塗りつぶした三角形」を少しずらして重ねることで表現します。

考慮スべきプラグインの仕様

三角形の向き

吹き出しの向きを左右、位置を縦横から選ぶことができるので、それぞれのパターンを考慮してCSSを書く必要があります。

背景色

背景色を指定した場合、吹き出しの枠と中身の背景が同一の色になります(同じ色で塗りつぶされる)。なので背景色を指定しない場合は今回の対応は不要です。

背景色を指定すると、divにstyle属性に直接埋め込まれます。

コード

上記の仕様をまとめて実装したのが以下です。

/* 共通 */
.liquid-speech-balloon-wrap:not([style])
  .liquid-speech-balloon-arrow:not([style]):after {
  position: absolute;
  content: ".";
  line-height: 1;
  width: 0;
  height: 0;
  color: transparent;
}

/* 右向き横並び */
.liquid-speech-balloon-wrap:not(.liquid-speech-balloon-vertical):not(.liquid-speech-balloon-right):not([style])
  .liquid-speech-balloon-arrow:not([style]):after {
  top: -7px;
  left: 2px;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 10px solid #fff;
}

/* 左向き横並び */
.liquid-speech-balloon-wrap.liquid-speech-balloon-right:not(.liquid-speech-balloon-vertical):not([style])
  .liquid-speech-balloon-arrow:not([style]):after {
  top: -7px;
  right: 2px;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 10px solid #fff;
}

/* 縦並び(左右関係なし) */
.liquid-speech-balloon-wrap.liquid-speech-balloon-vertical:not([style])
  .liquid-speech-balloon-arrow:not([style]):after {
  bottom: 2px;
  left: -7px;
  border-top: 10px solid #fff;
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
}

afterの疑似要素で白い三角形を作って重ねてあげて、否定擬似クラスでパターン分けする感じです。位置調整は自力。

完成形

いい感じ!

修正してちゃんと縁取りされた吹き出し
ちゃんと枠が縁取りされた吹き出し