文字装飾記法
太字や斜体などの文字装飾のための記法です
太字
[* 太字] ⇒ 太字
[**** もっと太字] => もっと太字
斜体文字
[/ 斜体文字] ⇒ 斜体文字
[/* 太字斜体文字] => 太字斜体文字
打ち消し線
[- 打ち消し] ⇒ 打ち消し
[-***/ 斜体太字打ち消し] ⇒ 斜体太字打ち消し
https://gyazo.com/00ab07461d502db91c8ae170276d1396
以下、上級者向けの危険な機能です
文字装飾記法をUserCSSで拡張する
*や/だけでなく、!"#%&'()*+,-./{|}<>_~などの記号も使用できます
注意：2021年3月時点から=も使えますが、後で別の用途に使うので使わないでくださいshokai.icon
記号はdeco-{ deco-! deco-*のように、css classとして出力されるので
UserCSSを使って自由な見た目を与える事ができます
なお、記号は予告なく増減します
数式等、他の特殊な記法に必要になる為です
例：漫画の様な吹き出しを作る
deco-{にUserCSSで吹き出しスタイルにする例
/wakaba-manga/第1話：Scrapboxってなあに？でも活用しています
shokai.icon 吹き出した
右吹き出しもできる rakusai.icon
!を付けると赤い吹き出しにする、などの組み合わせが可能です
shokai.icon すごい rakusai.icon
shokai.icon 見た目は面白い
見た目がキャッチーなだけで、実際の文章の面白さ・情報の価値とは無関係である
心の中を表しているようでいて、文章本体よりも目立っている
吹き出し本体
css selectorでは、{等の記号は\でエスケープする必要がある
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;
}
左吹き出しの角
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;
border-color: #b2bcba transparent;
}
右吹き出しの角
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;
border-color: #b2bcba transparent;
}
強調吹き出しの角
code:style.css
.deco-\!:before, .deco-\!:after {
border-color: #ee6666 transparent;
}
吹き出し内のリンク色の調整
code:style.css
.deco-\{ a,
.deco-\} a {
color: #66F;
}
もっと簡単な例
重要な部分を赤くする
deco-!をUserCSSで赤くする
code:style.css
.deco-\! {
color: #fff; /* 白文字 */
background-color: #ee6666; /* 赤背景 */
padding: 0.1em 0.2em 0.1em 0.2em;
}