文字装飾記法を拡張するUserCSS
from
/help-jp/文字装飾記法
→　/scrasobox/拡張記法がきた！
→　/work4ai/インライン引用記法
インライン引用
code:style.css
.deco-\" {
border-radius: .2em;
padding: 0 .4em;
background-color: rgba(128,128,128,0.1);
font-size: 95%;
}
.line:not(.cursor-line) .deco-\"::before {
color: #a0a0a0;
font-size: 85%;
/* font-family: 'FontAwesome'; */
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: '\f10d';
position: relative;
top: -0.5em;
left: -0.2em;
}
フキダシ
code:style.css
/* フキダシ本体 */
.deco-\{, .deco-\} {
font-size: 1em;
color: #fff;
background-color: #b2bcba;
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;
}
/* 左フキダシ　角 */
.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: #b2bcba 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: #b2bcba transparent;
}
/* 強調フキダシ */
.deco-\! {
color: #fff; /* 白文字 */
background-color: #ee6666; /* 赤背景 */
padding: 0.1em 0.2em 0.1em 0.2em;
}
/* 強調フキダシ　角 */
.deco-\!:before, .deco-\!:after {
border-color: #ee6666 transparent;
}
/* フキダシ内部のリンクの色 */
.deco-\{ a, .deco-\} a {
color: #66F;
}
お試し欄
富、名声、力 かつてこの世の全てを手に入れた男 “海賊王・ゴールド・ロジャー”
彼の死に際に放った一言は全世界の人々を海へと駆り立てた。
おれの財宝か？欲しけりゃくれてやるぜ・・・探してみろこの世の全てをそこに置いてきた
世はまさに大海賊時代！！
kubokawa.icon ほげほげ
kubokawa.icon こんなことができるんだなぁ
#UserCSS