改ページ記法
別名：bg.iconをCSSで描画するUserCSS
UserCSS.icon UserScript.icon
書式：bg(アイコン記法) *
[bg.icon] – 疑似背景の挿入
[bg.icon][**** text] – ページタイトル記法
#ページタイトル #記法
from セクションの最初の行の行頭にある太字＋をセクション見出し化する
to /customize/改ページ記法
to /villagepump/bg.iconをCSSで描画するUserCSS
2026-07-06 ページタイトル記法の実装と不具合修正
記法：[bg.icon][**** title]
2026-06-26 疑似背景がbgへのリンクになるように
2026-06-26 :has()を使用しない実装に変更した
Popup Menu にボタンを追加する #UserScript
code:script.js
scrapbox.PopupMenu.addButton({
title: 'ページタイトル',
onClick: text => text.split('\n').map(line => [bg.icon][**** ${line}]\n).join('\n')
})
code:script.js
scrapbox.PopupMenu.addButton({
title: '改ページ',
onClick: text => text.split('\n').map(line => [bg.icon]\n${line}).join('\n')
})
#UserCSS
code:style.css
htmldata-project-theme=default-minimal {
--card-border-width: 1px;
}
body {
--virtual-page-margin-top: calc(var(--calculated-paragraph-line-height, 24px) * 3); /* 改ページの間隔（＝疑似背景の縦幅） */
--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-color: var(--body-bg);
}
}