(WIP)拡張吹き出し記法のUserCSS

動機

よくあるキャラクター同士が会話するようなコンテンツを想定

Aさんの吹き出しとBさんの吹き出しを色分けで識別したい

実装

フォントサイズを固定して、大きくする機能を抑制する

すべて同じフォントサイズにする

できていないこと（やりたいこと）

強調の文字の大きさの分だけ、隙間が空いてしまう

原因わかった

これ簡単に直せないのか

回避策

強調以外を使って色分けする

試しにLv.10に相当する吹き出しに↑を適用してみました

特に、大きな強調文字は、隙間が大きく、レイアウトが崩れてしまう

吹き出しに見えない

これなら隙間が目立たなそうです

code:style.css

:root {

--main-color: DarkGray; /* 主調色 */

--assort-color: White; /* 従属色 */

--base-color: WhiteSmoke; /* 背景色 */

--accent-color: BlueViolet; /* 強調色 */

--text-color: Black; /* 文字色 */

--l1-color: hsl(0,100%,90%);

--l2-color: hsl(30,100%,90%);

--l3-color: hsl(60,100%,90%);

--l4-color: hsl(90,100%,90%);

--l5-color: hsl(150,100%,90%);

--l6-color: hsl(180,100%,90%);

--l7-color: hsl(210,100%,90%);

--l8-color: hsl(270,100%,90%);

--l9-color: hsl(300,100%,90%);

--l10-color: hsl(330,100%,90%);

}

code:style.css

.deco-\{, .deco-\} {

text-decoration: none; /* init */

font-size: 18px; /* 固定長 */

font-weight: lighter; /* */

height: 26px; /* 固定長 */

line-height: 24px; /* 固定長 */

color: var(--assort-color) ;

background-color: var(--main-color);

padding: 0.1em 0.2em 0.1em 0.3em; /* */

/* border-style: solid; /* for test*/

/* border-width: 2px; /* for test*/

border-radius: 0.4em; /* */

margin: auto 0.3em; /* */

display: inline-block; /* */

max-width: calc(100% - 100px);

vertical-align: top; /* */

}

.deco-\{:before {

position: absolute;

margin: 0;

padding: 0;

transform: translateX(-100%) translateY(calc(1em - 80%));

width: 0;

content: "";

border-width: 0 0 0.6em 0.6em;

border-style: solid;

border-color: var(--main-color) transparent;

}

.deco-\}:after {

position: absolute;

margin: 0;

padding: 0;

transform: translateY(calc(1em - 80%));

width: 0;

content: "";

border-width: 0 0.6em 0.6em 0;

border-style: solid;

border-color: var(--main-color) transparent;

}

code:style.css

.line strong.level.level-1 ,

.line strong.level.level-2 ,

.line strong.level.level-3 ,

.line strong.level.level-4 ,

.line strong.level.level-5 ,

.line strong.level.level-6 ,

.line strong.level.level-7 ,

.line strong.level.level-8 ,

.line strong.level.level-9 ,

.line strong.level.level-10 {

line-height: 24px; /* 固定長 */

height: 22px; /* 固定長 */

}

code:style.css

.level-1 > .deco-\{ , .level-1 > .deco-\} ,

.level-2 > .deco-\{ , .level-2 > .deco-\} ,

.level-3 > .deco-\{ , .level-3 > .deco-\} ,

.level-4 > .deco-\{ , .level-4 > .deco-\} ,

.level-5 > .deco-\{ , .level-5 > .deco-\} ,

.level-6 > .deco-\{ , .level-6 > .deco-\} ,

.level-7 > .deco-\{ , .level-7 > .deco-\} ,

.level-8 > .deco-\{ , .level-8 > .deco-\} ,

.level-9 > .deco-\{ , .level-9 > .deco-\} ,

.level-10 > .deco-\{ , .level-10 > .deco-\} ,

.deco-\{.deco-\|, .deco-\}.deco-\|

{

text-decoration: none; /* init */

text-shadow: none; /* init */

font-size: 18px; /* 固定長 */

font-weight: 500 ; /* 固定長 */

line-height: 20px; /* 固定長 */

height: 22px; /* 固定長 */

color: var(--text-color);

/* border-style: solid; /* for test*/

/* border-width: 2px; /* for test*/

/* border-color: var(--text-color); /* for test*/

}

code:style.css

.level-1 > .deco-\{ , .level-1 > .deco-\} {

background-color: var(--l1-color);

}

.level-1 > .deco-\{:before , .level-1 > .deco-\}:after {

border-color: var(--l1-color) transparent;

}

.level-2 > .deco-\{ , .level-2 > .deco-\} {

background-color: var(--l2-color);

}

.level-2 > .deco-\{:before , .level-2 > .deco-\}:after {

border-color: var(--l2-color) transparent;

}

.level-3 > .deco-\{ , .level-3 > .deco-\} {

background-color: var(--l3-color);

}

.level-3 > .deco-\{:before , .level-3 > .deco-\}:after {

border-color: var(--l3-color) transparent;

}

.level-4 > .deco-\{ , .level-4 > .deco-\} {

background-color: var(--l4-color);

}

.level-4 > .deco-\{:before , .level-4 > .deco-\}:after {

border-color: var(--l4-color) transparent;

}

.level-5 > .deco-\{ , .level-5 > .deco-\} {

background-color: var(--l5-color);

}

.level-5 > .deco-\{:before , .level-5 > .deco-\}:after {

border-color: var(--l5-color) transparent;

}

.level-6 > .deco-\{ , .level-6 > .deco-\} {

background-color: var(--l6-color);

}

.level-6 > .deco-\{:before , .level-6 > .deco-\}:after {

border-color: var(--l6-color) transparent;

}

.level-7 > .deco-\{ , .level-7 > .deco-\} {

background-color: var(--l7-color);

}

.level-7 > .deco-\{:before , .level-7 > .deco-\}:after {

border-color: var(--l7-color) transparent;

}

.level-8 > .deco-\{ , .level-8 > .deco-\} {

background-color: var(--l8-color);

}

.level-8 > .deco-\{:before , .level-8 > .deco-\}:after {

border-color: var(--l8-color) transparent;

}

.level-9 > .deco-\{ , .level-9 > .deco-\} {

background-color: var(--l9-color);

}

.level-9 > .deco-\{:before , .level-9 > .deco-\}:after {

border-color: var(--l9-color) transparent;

}

.level-10 > .deco-\{ , .level-10 > .deco-\},

.deco-\{.deco-\|, .deco-\}.deco-\| {

background-color: var(--l10-color);

}

.level-10 > .deco-\{:before , .level-10 > .deco-\}:after,

.deco-\{.deco-\|:before, .deco-\}.deco-\|:after {

border-color: var(--l10-color) transparent;

}

何気に吹き出しの矢印もカスタムされてる

いいデザインだ

パステルカラー！

めっちゃ好きな色

（このへんの隙間が気になる）

アイコンに合わせる

動作例

UserCSS.icon