Cosenseでピン留めしたページの段を分けるUserCSS

Cosenseのトップ画面で、ピン留めされたページと通常ページを区切りたい場合、 grid 向けのプロパティを用いて区切り位置を操作することで実現できる。

https://scrapbox.io/files/6915ea64e1725cc23864a8b8.png

方法

以下のスタイルをUserCSSもしくはProjectCSSとしてプロジェクトに適用する

code:style.css

.page-list-item.pin + .page-list-item:not(.pin) {

grid-column-start: 1;

}

この CSS はピン留めされた最後のカードの次に来るカードを 1 列目に強制的に戻すことで「段を変える」効果を得る。

具体的には、.pinの直後にある .pin ではないページについて、grid の 1 列目から始める」という意味である。

注意

他のCSS が .page-list-item の位置指定を上書きしていないか確認しておくと安心である。

補足

web上には clear: both; を使う方法も紹介されているが、2025年11月時点では float ベースではなく grid レイアウトに移行しているため、この方法は機能しない。

code:css

.page-list-item.pin + .page-list-item:not(.pin) {

clear: both;

}