/help-jp/文字装飾記法

generated at 10/17/2024, 5:16:16 AM
文字装飾記法

太字や斜体などの文字装飾のための記法です

太字
 [* 太字]  ⇒ 太字
 [**** もっと太字]  => もっと太字

斜体文字
 [/ 斜体文字]  ⇒ 斜体文字
 [/* 太字斜体文字]  => 太字斜体文字

打ち消し線
 [- 打ち消し]  ⇒ 打ち消し
 [-***/ 斜体太字打ち消し]  ⇒ 斜体太字打ち消し


以下、上級者向けの危険な機能です

文字装飾記法をUserCSSで拡張する

 * や / だけでなく、 !"#%&'()*+,-./{|}<>_~ などの記号も使用できます
注意：2021年3月時点から = も使えますが、後で別の用途に使うので使わないでください

記号は deco-{ deco-! deco-* のように、css classとして出力されるので
UserCSSを使って自由な見た目を与える事ができます

なお、記号は予告なく増減します
数式等、他の特殊な記法に必要になる為です


例：漫画の様な吹き出しを作る

 deco-{ にUserCSSで吹き出しスタイルにする例
/wakaba-manga/第1話：Scrapboxってなあに？でも活用しています

 吹き出した

右吹き出しもできる 


 ! を付けると赤い吹き出しにする、などの組み合わせが可能です

  すごい  

 見た目は面白い
見た目がキャッチーなだけで、実際の文章の面白さ・情報の価値とは無関係である
心の中を表しているようでいて、文章本体よりも目立っている


吹き出し本体
css selectorでは、 { 等の記号は \ でエスケープする必要がある
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;
}

左吹き出しの角
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;
}

右吹き出しの角
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;
}

強調吹き出しの角
style.css.deco-\!:before, .deco-\!:after {
  border-color: #ee6666 transparent;
}


吹き出し内のリンク色の調整
style.css.deco-\{ a,
.deco-\} a {
  color: #66F;
}



もっと簡単な例

重要な部分を赤くする

 deco-! をUserCSSで赤くする
style.css.deco-\! {
  color: #fff; /* 白文字 */
  background-color: #ee6666; /* 赤背景 */
  padding: 0.1em 0.2em 0.1em 0.2em;
}