吹き出し記法
[*/- 太字斜体取り消し線]の左側部分に、!や?や{など10種類ぐらいの記号も使えるように追加した
左辺の記号はDOMにcss classとして出てくるので、UserCSSで見た目を自由に作れる つまり吹き出し専用の機能ではない
たぶんもっと色々できる
感想
shokai.icon 吹き出しは使い分けが難しい
目立ちすぎる
心の中を表しているのに、本文よりも目立ってしまう
見た目は面白い
テキストの中身が面白いわけではない
実際には面白くない物が面白そうに見えてしまうと、判断を間違えてしまう
本当に重要なテキストよりも目立つと良くないと思う
使い分けが難しい
こういう使い分け方になると良くないだろうな
事実は普通のテキスト、意見は吹き出しで使い分けましょう！ shokai.icon
事実への共感、匿名の意見が吹き出しでは表現しづらい
匿名の意見
使いづらいと思う人もいると思います
アイコン記法を書かずに誰だかわからないようにしてみた例
すごく目立つ。そこまで自分の意見を目立たせたいわけではない
事実への共感
このライブラリ読み込むと、多少古いブラウザでも新しいJavaScriptが使えて便利 shokai.icon
ただの一般的な説明で、「便利で良いよね」程度の気持ちなのだが
「便利！ウオオオオオオオオ！！」みたいに興奮しているように見えなくもない
そんなに強調したいのか？と感じる
引力が強すぎる
無駄に目立つ
引力が強すぎず、弱すぎず
目立ち過ぎもせず、目立たないわけでもなく、主張の程度がちょうどいいと思う
吹き出しが便利な場合とは
web小説
脚本・台本の共同執筆には便利そう
登場人物の発言と、台本の製作者同士の相談とを分けて表現しやすい
自分の感想をすごく目立たせたい時に使うぐらいが良さそう shokai.icon
あとは、◯◯語録を作りたい時とか
吹き出し本体
css selectorでは、{等の記号は\でエスケープする必要がある
code:style.css
.deco-\{, .deco-\} {
font-size: 1em;
padding: 0.1em 0.2em 0.1em 0.2em;
border-radius: 0.4em;
margin: auto 0.3em;
display: inline-block;
max-width: calc(100% - 100px);
vertical-align: top;
}
shokai.icon 左吹き出しの角
code:style.css
.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;
}
右吹き出しの角 shokai.icon
code:style.css
.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;
}
強調吹き出しの角
code:style.css
.deco-\!:before, .deco-\!:after {
}
吹き出し内のリンク色の調整
code:style.css
.deco-\{ a,
.deco-\} a {
}
重要な部分を赤くする
code:style.css
.deco-\! {
padding: 0.1em 0.2em 0.1em 0.2em;
}