bg.iconをCSSで描画するUserCSS
bg, ページを切断する
UserCSS.icon
井戸端仕様
from /customize/改ページ記法, /nrem-configs/改ページ記法
参考: hr.iconをCSSで描画するUserCSS
（UserCSSの命名、アイコン記法を置き換えるという発想）
2026-07-08 仮想ページ間隔（--virtual-pagemargin-top）の値を "3行分" → "2行分" に変更
2026-07-06 改ページ記法の実装と不具合修正
記法：[bg.icon][**** title]
詳細は改ページを参照のこと
2026-06-26 疑似背景がbgへのリンクになるように
2026-06-26 :has()を使用しない実装に変更した
code:style.css
htmldata-project-theme=default-minimal {
--card-border-width: 1px;
}
body {
--virtual-page-margin-top: calc(var(--calculated-paragraph-line-height, 24px) * 2); /* 改ページの間隔（＝疑似背景の縦幅） */
--page-padding-top: 42px;
--page-padding-left: 49px;
--page-padding-bottom: 42px;
--page-width: calc(100% + var(--page-padding-left, 49px) * 2);
}
@media(max-width: 767px) {
body {
--page-padding-top: 28px;
--page-padding-left: 21px;
--page-padding-bottom: 42px;
}
}
@media(min-width: 768px) and (max-width: 991px) {
body {
--page-padding-top: 42px;
--page-padding-left: 42px;
--page-padding-bottom: 35px;
}
}
/* bg.icon の直後の text の表示をページタイトルにする */
span:has(> a.iconhref$="/bg") + span:not(.indent *) > span > strong.level-4 {
display: inline-block; font-weight: 400; margin-bottom: 24px;
}
/* bg.iconによる改ページ */
.line:not(.cursor-line) a.iconhref$="/bg":not(.indent *) {
display: inline-block; box-sizing: content-box;
width: 100%;
margin-top: var(--page-padding-bottom);
height: var(--virtual-page-margin-top);
margin-bottom: var(--page-padding-top);
font-size: 0px; line-height: 0px;
& > img.icontitle="bg" { height: 0px !important; }
/* テロメアを隠す */
&::before {
content: ""; display: block; position: absolute;
background-color: var(--page-bg);
top: 0;
left: calc(-1 * var(--page-padding-left, 49px));
width: var(--page-padding-left, 49px);
height: calc(var(--page-padding-bottom) + var(--virtual-page-margin-top) + var(--page-padding-top));
}
/* 疑似背景 */
&::after {
content: ""; display: block; position: absolute;
top: var(--page-padding-bottom);
border-top: 4px solid hsl(0 0 0 / 0.16);
border-bottom: var(--card-border, unset);
height: var(--virtual-page-margin-top);
width: var(--page-width, 100%);
left: calc(-1 * (var(--page-padding-left, 49px) + var(--card-border-width, 0px)) );
background:
radial-gradient(circle, transparent 20%, var(--B) 20%, var(--B) 80%, transparent 80%, transparent),
radial-gradient(circle, transparent 20%, var(--B) 20%, var(--B) 80%, transparent 80%, transparent) 50px 50px,
linear-gradient(var(--A) 8px, transparent 8px) 0 -4px, linear-gradient(90deg, var(--A) 8px, transparent 8px) -4px 0;
background-color: var(--B, var(--body-bg));
background-size: 100px 100px, 100px 100px, 50px 50px, 50px 50px;
}
}
#UserCSS