settings
https://gyazo.com/20d6b9c8af9f3f96a8bc7210e1521379
留意事項
⇩
文字装飾記法を UserCSS で拡張する場合、使える特殊文字は !"#%&'()*+,-./{|}<>_~ のみ。
【参考】/help-jp/文字装飾記法
---
CSSのコードは、
自分だけに反映させる場合は
「自分のページ」に
閲覧者全員に反映させる場合は
「settings」に
それぞれ書く必要がある
---
CSSのコードは別ページに書いてインポートすることができない
---
設定の反映は、プロジェクトを開いているページを更新する必要がある
---
UserCSS で使える変数は抽出が可能
【参考】/scrapboxlab/UserCSS で使える変数
⇧ 留意事項
UserCSS: 文字への着色
code:style.css
/* （.deco-\! なら test のように打ち込む */
.deco-\! {
color: #f55; /* 赤 */
font-weight: bold;
}
.deco-\% {
color: #fb4; /* オレンジ */
font-weight: bold;
}
.deco-\# {
color: #6f6; /* 緑 */
font-weight: bold;
}
.deco-\~ {
color: #8cf; /* 青 */
font-weight: bold;
}
UserCSS: セパレータ
【参考】/per-terra/セパレーター記法
code:style.css
/* before: 左の線、after: 右の線 */
/* https://scrapbox.io/villagepump/セパレーター記法 */
.line:not(.cursor-line) .deco:has(.deco-\'):has(.deco-_) {
display: flex;
align-items: center;
text-align: center;
&::after {
flex-grow: 1;
min-width: 30px;
content: "";
border-top: 3px solid #fff;
}
&:has(.deco-\-) {
&::after {
border-style: dashed none none;
}
}
&::after {
margin-left: 10px;
margin-right: 50px;
}
:has(.deco-_) {
text-decoration: none !important;
}
}
UserCSS: インデントマークを縦二重線にし、インデント数によって色を変える
以下のような感じになる
https://gyazo.com/19c9b292a14fa4bcb20b99bf8ff34fd3
【参考】/scrapboxlab/箇条書きのバレットをFontAwesomeにするUserCSS
code:style.css
:root {
--li-color-0: #00c8c8;
--li-color-1: #00c8c8;
--li-color-2: #ff6400;
--li-color-3: #00dc64;
--li-color-4: #c800c8;
--li-color-5: #969696;
}
アイコンは以下から検索して選ぶことができる
https://fontawesome.com/icons
code:style.css
:root {
--ul-bullet: '\f7a5'; /* 二重縦線 */
}
---
フォントサイズ
code:style.css
.line .indent-mark .c-0 + .dot::before {
font-size: 30px;
}
.line .indent-mark .c-1 + .dot::before {
font-size: 30px;
}
.line .indent-mark .c-2 + .dot::before {
font-size: 30px;
}
.line .indent-mark .c-3 + .dot::before {
font-size: 30px;
}
.line .indent-mark .c-4 + .dot::before {
font-size: 30px;
}
---
色の指定
code:style.css
.line .indent-mark .c-0 + .dot::before {
color: var(--li-color-1);
}
.line .indent-mark .c-1 + .dot::before {
color: var(--li-color-2);
}
.line .indent-mark .c-2 + .dot::before {
color: var(--li-color-3);
}
.line .indent-mark .c-3 + .dot::before {
color: var(--li-color-4);
}
.line .indent-mark .c-4 + .dot::before {
color: var(--li-color-5);
}
---
その他細かい設定
code:style.css
.line .indent-mark .dot::before {
display: block;
position: absolute;
right: -5px;
top: -10px;
font-family: 'Font Awesome 5 Free';
/* font-family: FontAwesome; /* old */
font-weight: 900;
font-size: 30px;
content: var(--ul-bullet, '\f7a5');
color: var(--li-color-0);
}
.line .indent-mark .dot {
background-color: transparent;
}
UserCSS: 関連ページを左に表示する
_CSS_related-page-list_left
UserCSS: 行番号を表示する
【参考】/noratetsu/●「行番号を表示する」改良版
code:style.css
/* 行番号を表示 -- ウィンドウ幅768px以上で適用 */
@media screen and (min-width: 768px) {
.editor .lines { counter-reset: line }
/* タイトルから数えるときは :not(.line-title) を消してね */
.editor .line:not(.line-title) { counter-increment: line }
/* タイトルから数えるときは :not(.line-title) を消してね */
.app:not(.presentation) .editor .line:not(.line-title)::before {
content: counter(line);
position: absolute; display: inline-block; left: -110px; z-index: 10;
min-width: 50px; text-align: right; vertical-align: middle;
/* 行番号のフォントとか色とかの指定はここ */
font-family: Papyrus; color: aqua }
/* カーソル行の行番号を濃く表示する */
.editor .line:not(.line-title)::before { opacity: .5 }
.editor .line.cursor-line:not(.line-title)::before { opacity: 1; font-weight: bolder } }
UserCSS: ページに影をつける
【参考】/noratetsu/settings
code:style.css
.page {
box-shadow: 0 0 15px rgba(255,255,255,0.8);
}
#Scrapbox #CSS