settings
Scrapboxのcssをカスタマイズしたい場合はstyle.cssに追加記述後、リロードでおk
ここに書くCSSは記事の閲覧者全員に見せたいものを書く。
Scrapbox本体の外観の変更などは自分のページに同じようにstyle.cssを定義して書く。
code:style.css
/* テーブルのセルをわかりやすくする */
.table-block table { background-color: transparent; border-collapse: separate; border-spacing: 2px }
.table-block table tr td { padding: .1em; background-color: rgba(0,0,0,0.04) }
.table-block table tr:nth-child(even) td { background-color: rgba(0,0,0,0.06) } /* 偶数行を濃くする */
.table-block table tr:first-child td { font-weight: bolder; text-align: center } /* 1行目だけ太字&中央揃え */
.table-block table tr td:first-child { padding: 0; background-color: transparent; border-width: 0 }
.deco-\# { /* 正しい部分は#を付ける */
color: #4caf50; /* 緑文字 */
}
.deco-\% { /* 警告部分は?を付ける */
color: #f9a825; /* 黄色文字　*/
}
.deco-\! { /* 間違った部分は!を付ける */
color: #d32f2f; /* 赤文字　*/
}
.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;
}
.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;
}
.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;
}
/* 吹き出しの背景を赤くする */
.deco-\&.deco-\! {
color: #fff;
background-color: #ee6666;
padding: 0.1em 0.2em 0.1em 0.2em;
}
.deco-\&.deco-\!:before, .deco-\&.deco-\!:after {
border-color: #ee6666 transparent;
}
/* 吹き出しの背景を緑にする */
.deco-\&.deco-\# {
color: #fff;
background-color: #8bc34a;
padding: 0.1em 0.2em 0.1em 0.2em;
}
.deco-\&.deco-\#:before, .deco-\&.deco-\#:after {
border-color: #8bc34a transparent;
}
/* 吹き出しの背景をオレンジにする */
.deco-\&.deco-\% {
color: #fff;
background-color: #ffac33;
padding: 0.1em 0.2em 0.1em 0.2em;
}
.deco-\&.deco-\%:before, .deco-\&.deco-\%:after {
border-color: #ffac33 transparent;
}
/* 吹き出しの背景を青にする */
.deco-\&.deco-\< {
color: #fff;
background-color: #4dabf5;
padding: 0.1em 0.2em 0.1em 0.2em;
}
.deco-\&.deco-\<:before, .deco-\&.deco-\<:after {
border-color: #4dabf5 transparent;
}
/* 吹き出しの背景をピンクにする */
.deco-\&.deco-\> {
color: #fff;
background-color: #ed4b82;
padding: 0.1em 0.2em 0.1em 0.2em;
}
.deco-\&.deco-\>:before, .deco-\&.deco-\>:after {
border-color: #ed4b82 transparent;
}
/* 吹き出しの背景を紫にする */
.deco-\&.deco-\* {
color: #fff;
background-color: #af52bf;
padding: 0.1em 0.2em 0.1em 0.2em;
}
.deco-\&.deco-\*:before, .deco-\&.deco-\*:after {
border-color: #af52bf transparent;
}
/* 吹き出しの背景を黄色にする */
.deco-\&.deco-\+ {
color: #212121;
background-color: #ffef62;
padding: 0.1em 0.2em 0.1em 0.2em;
}
.deco-\&.deco-\+:before, .deco-\&.deco-\+:after {
border-color: #ffef62 transparent;
}
.deco-\{ a,
.deco-\} a {
color: #66F;
}