Cosenseでピン留めされたページの左側に色をつけるUserCSS

Cosenseでピン留めされたページを、通常ページと視覚的に区別できるようにするためのCSS。

背景色や左側の色帯をつけることで、ピン留めが一目で分かるようになる。

https://scrapbox.io/files/69175b6c7d4ef2dc4c2f40d5.png

code:style.css

/* ピン留めされたページ全体の背景色を変える */

.page-list-item.pin {

background: black; /* 好きな色 */

}

/* ピン留めを視覚的に分けたいなら枠線も有効 */

.page-list-item.pin {

border-left: 4px solid orange;

padding-left: 8px;

}

背景色の変更

code:css

.page-list-item.pin {

background: black; /* 好きな色 */

}

ピン留めされたリスト項目 .page-list-item.pin 全体の背景色を変更する。

表示上もっとも単純な強調方法。

左側の強調線

code:css

.page-list-item.pin {

border-left: 4px solid orange;

padding-left: 8px;

}

同じ .page-list-item.pin に対して、左側に線を追加して視覚的に区切る設定。

padding-left は線とテキストが重ならないための余白。

関連：Cosenseでピン留めされたページの下側に色をつけるUserCSS

leftをrightやbottom，topに変えると色の場所を変えられる．

複数つけることもできる．

https://scrapbox.io/files/69196a855c866a3947a40800.png

code:style.css

/* ピン留めされたページ全体の背景色を変える */

.page-list-item.pin {

background: gray;

}

/* ピン留めを視覚的に分けたいなら枠線も有効 */

.page-list-item.pin {

border-left: 2px solid gray;

padding-left: 2px;

border-bottom: 2px solid gray;

padding-bottom: 2px;

}