自分用とproject全体

『自分のページ』にCSSを書くことで自分にだけ有効なCSSを適用できます。

project全体に有効にする場合は『settings』というページを作りCSSを書きます。そのプロジェクト内の全員に有効なCSSとなります。公開プロジェクトの場合、ログインしていないゲストに対しても有効です。

　参考　UserCSS – Scrapbox ヘルプ

僕が使っているUserCSS

イタリック（斜体）にマーカー

イタリック（斜体）にマーカーを引きます。緑色のマーカーです。 #ABFF4Fのところを変更すればマーカーの色を変えることができます。

code:style.css
/* イタリックによる強調をマーカーっぽくする */

.line .deco-\/{

background: linear-gradient(transparent 10%, #ABFF4F 25%, #ABFF4F 70%, transparent 90%)

}

code:style.css

/* イタリックによる強調をマーカーっぽくする */

.line .deco-\/{

background: linear-gradient(transparent 10%, #ABFF4F 25%, #ABFF4F 70%, transparent 90%)

}

斜体をせずにマーカーを引きたい場合はどうすればいいのでしょうか？

強調文字にマーカーを引く

Scrapboxは*の数で文字をどんどん大きくすることができます。

*を1回の場合、強調文字にマーカーを引くCSSです。

code:style.css
/* ストロングをマーカーっぽくする */

.line strong.level-1{

background: linear-gradient(transparent 10%, #FAE2E1 25%, #FAE2E1 70%, transparent 90%)

}

code:style.css

/* ストロングをマーカーっぽくする */

.line strong.level-1{

background: linear-gradient(transparent 10%, #FAE2E1 25%, #FAE2E1 70%, transparent 90%)

}

小見出し

[*** ]を小見出しにするCSSです。

code:style.css
/* [*** ]&lt;-これを小見出しに */

.line strong.level-3{

padding: 0.5em;/*文字周りの余白*/

color: #494949;/*文字色*/

background: #fffaf4;/*背景色*/

border-left: solid 5px #ffaf58;/*左線（実線 太さ 色）*/

font-size:1.3em

}

code:style.css

/* [*** ]<-これを小見出しに */

.line strong.level-3{

padding: 0.5em;/*文字周りの余白*/

color: #494949;/*文字色*/

background: #fffaf4;/*背景色*/

border-left: solid 5px #ffaf58;/*左線（実線太さ色）*/

font-size:1.3em

}

#で始まるタグをラベル風にする

ではじまるタグをラベル風にします。これ、結構かわいくてお気に入りです。

code:style.css
/* ＃で始まるタグをラベル風にする */

a[type="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);

}

a[type="hashTag"]:hover{

-webkit-transform: scale(1.1);

transform: scale(1.1);

}