(WIP)拡張吹き出し記法のUserCSS
吹き出し記法の拡張機能
動機
よくあるキャラクター同士が会話するようなコンテンツを想定
Aさんの吹き出しとBさんの吹き出しを色分けで識別したい
実装
文字を大きくする記法の
* の数ごとに吹き出しの背景色を割り当てる（10色）フォントサイズを固定して、大きくする機能を抑制する
すべて同じフォントサイズにする
[**{ セリフ] や [****} セリフ] というような書式できていないこと（やりたいこと）
強調の文字の大きさの分だけ、隙間が空いてしまう
なんで隙間ができるんだろう？
原因わかった
.line span.strong.level-* の line-height を消せば直りそうこれ簡単に直せないのか
span.deco-\{ を子にもつ .line span.strong.level-* というのをselectorだけでは指定できない回避策
強調以外を使って色分けする
!"#%&'()*+,-./|<>_~ に割り当てるとか span.deco-\{.deco-\| のように指定できる試しにLv.10に相当する吹き出しに↑を適用してみました
特に、大きな強調文字は、隙間が大きく、レイアウトが崩れてしまう
吹き出しに見えない
（と、ここで力尽きてしまいました。直せる人がいたら直して 
）
2020/12/11 19:11:43 修正してみました。どうかな？
隙間の大きさをできるだけ小さくしたんですね
これなら隙間が目立たなそうです
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%);
}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-color: #111; /* 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;
}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; /* 固定長 */
}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*/
}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;
}表示テストtest
何気に吹き出しの矢印もカスタムされてる
いいデザインだ
パステルカラー！
めっちゃ好きな色
Lv1test
Lv2test
Lv3test
Lv4 test
Lv5 test
Lv6 test
Lv7 test
Lv8test
（このへんの隙間が気になる）
Lv9test
Lv10test
Lv10 alt test
アイコンに合わせる
動作例
おや、どうしたんすか
そうですねー
寒いですねー
間に説明を入れてみたり
test です これもtestです