settings
プロジェクトのCSSが書ける
/help-jp/UserCSS
自分用のCSS
自分のページを作成し、コードブロックでcode:style.cssというCSSを書く
自分にだけ有効なCSSを適用できます
例：kouno#67d94d12ce7e260000db96f7
結果を反映するにはブラウザリロードが必要です。
project全体に有効なCSS
ProjectCSSとも呼ぶ
settingsというページを作り、コードブロックでcode:style.cssというCSSを書く
そのプロジェクト内の全員に有効なCSSとなります。
公開プロジェクトの場合、ログインしていないゲストに対しても有効です。
結果を反映するにはブラウザリロードが必要です。
code:style.css
/* 外部リンクにiconをつける */
.line span:not(.modal-image):not(.pointing-device-map)>a.link:not(.icon):not([href^="https://scrapbox.io"])::after {
font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands';
font-weight: 900;
font-size: 0.8rem;
content: ' \f35d';
display: inline-block;
}
/* コードブロック行頭の空白の色を変えるCSS */
.code-block .indent-mark {
height: 100%;
}
.code-block .indent-mark .pad {
height: 100%;
overflow: unset;
}
.code-block .indent-mark span:last-child .pad {
background-color: rgba(0, 0, 0, 0.05);
}
/* コードブロックに行番号を追加する */
htmldata-project-theme="paper-dark-dark",
htmldata-project-theme="defaut-dark" {
--code-line-number-color: #D181FF;
}
.section-title,
.code-block-start {
counter-reset: codeline
}
.code-block .indent-mark>span.char-index:last-child {
counter-increment: codeline
}
body:not(.presentation) .code-block .indent-mark>span.char-index:last-child::before {
content: counter(codeline);
position: absolute;
}
.code-block .indent-mark>span.char-index:last-child::before {
color: var(--code-line-number-color, #3f3f3f);
}
/* カーソル選択時の行番号の色 */
.cursor-line .code-block .indent-mark>span.char-index:last-child::before {
color: var(--cursor-code-line-number-color, #FF00F0);
font-weight: bolder;
}
/* ピン留めされたページを独立した段に表示する */
.page-list-item.pin+.page-list-item:not(.pin) {
grid-column-start: 1;
}
/* 注意書き記法 */
.deco-\! {
padding: 0.5em 0.25em;
margin: 2em 0;
color: #232323;
background: #fff8e8;
border-left: solid 5px #ffc06e;
}
.deco-\!::before {
color: #ff6b00;
font-size: 85%;
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: '\f071';
margin-right: 0.5rem;
}
/* コメント記法 */
.deco-\# {
color: green;
font-size: smaller;
padding: 0 .2em
}
/* <ruby>相当 */
.line:not(.cursor-line) .deco-\' {
display: inline-flex;
flex-direction: column-reverse;
vertical-align: bottom; /* Chrome 108で表示が乱れる場合の対応 */
}
/* <rb>相当 */
.line:not(.cursor-line) .deco-\' > span:nth-child(1) {
display: inline-flex;
justify-content: space-around;
width: 100%;
}
/* <rt>相当 */
.line:not(.cursor-line) .deco-\' > span:nth-child(2) {
line-height: 0;
font-size: 50%;
}
/* <rt>相当 */
.line:not(.cursor-line) .deco-\' > span:nth-child(2) > a {
display: inline-flex;
justify-content: space-around;
width: 100%;
pointer-events: none;
color: var(--page-text-color, #4a4a4a);
}
/* 水平線の誤クリックを防ぐ */
a.iconhref$="/hr" { pointer-events: none; }
a.iconhref$="/hr1" { pointer-events: none; }
a.iconhref$="/hr2" { pointer-events: none; }
a.iconhref$="/hr3" { pointer-events: none; }
a.iconhref$="/hr4" { pointer-events: none; }
/* ＃で始まるタグをラベル風にする */
atype="hashTag"{
display: inline-block;
padding: 2px 8px;
margin: 0 8px 10px 0;
background: #fff;
color: #f27e48;
font-size: 0.8em;
border: 1px solid #f27e48;
border-radius: 3px;
transition: .3s;
-webkit-transform: scale(1);
transform: scale(1);
}
atype="hashTag":hover{
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
独自記法：注意書き：[! 独自記法：注意書き]を追加
独自記法：コメント：[# 独自記法：コメント]を追加
ルビるび：[' ルビ[るび]]