_CSS_Deco
UserCSS設定のための管理者用ページです。
文字修飾記法まとめ。
方針
無闇に増やさない。
table:使用記号
記号 役割 文字色 背景色 太字 備考
* Strong - - - default
/ Italic - - - default
- Strike - - - default
_ Underline - - - default
! 重要 白 赤 -
,! アイコン風 白 f6ad48 - 属性の表示
,+ ブロック化 - - - ブロックにして中央に表示
~ 脚注用 #448 - -
& カメレオン 白 - - サムネイル制御に使用
"
#
+
.
|
, - - - - 拡張用
' 画像並列用に使うかも
() はんこ記法で使うかも
{ 吹き出しに使うかも
} 吹き出しに使うかも
< 中央寄せに使うかも
右寄せに使うかも
% ScrapCalcを使うかも
重要 属性
code:style.css
.deco-\! {
color: #fff;
background-color: #ee6666; /* 赤背景 */
padding: 0 0.2em; /* 0.1em 0.2em 0.1em 0.2em */
}
.line class^="deco-\, deco-\!" {
background-color: #f6ad48;
margin: 0 0.1em 0 -0.2em;
border-radius: 6px;
}
●アウトラインの階層が深くなり過ぎるときに仕切り直す記号を用意してみる
code:style.css
.deco-\~ {
font-size: 10px;
vertical-align: 0.4em;
color: #448;
}
●囲んだ範囲をボックスにする拡張書式（←ご利用の際は必ずこのページをご一読ください）
code:style.css
.line .deco > .empty-char-index {
display: none;
}
@media screen and (min-width: 768px){
:root {--wordbox-width: calc(calc(55vw + 60px) * 0.7);}
}
@media screen and (max-width: 767px){
:root {--wordbox-width: 90%;}
}
.line class^="deco-\, deco-\+" {
display: block;
width: var(--wordbox-width);
border: 1px solid rgba(0,0,0,0.2);
box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
margin: 10px auto;
padding: 10px;
}
code:style.css
.line:not(.cursor-line) .deco-\& .image {
width: 20px;
height: auto;
filter: none;
}
.line:not(.cursor-line) .deco-\& a{
text-decoration: none;
color: #FFFFFF;
pointer-events: none;
}
#_import