.section-title の太字を見出しにするUserCSS

UserCSS.icon

（テロメアの寸法を除いて）表示を完全に一致させる

https://gyazo.com/ddfedae7c1995d304aa83425c0d2e60c

見出しによる一定以上のネストのページ内階層化を無効化することができる

Scrapboxには見出しを作る機能はありません

code:style.css

@import url("./import.css");

@import url("./line-title.css");

@import url("./level-4.css");

@import url("./level-3.css");

@import url("./level-2.css");

@import url("./var.css");

変数宣言

code:var.css

html {

--line-title-font-size: 1.73em;

--line-title-font-weight: 550;

--line-title-font-weight: 400;

--line-title-line-height: var(--page-line-height, 42px);

--line-title-latin: "Zilla Slab", "EB Garamond", "Source Sans Pro", "Roboto Serif", -apple-system, "Segoe UI Variable Display", "Atkinson Hyperlegible Next", "Roboto Flex", "Roboto", "Helvetica", "Arimo";

--line-title-ja: "UD Digi Kyokasho NK", "Noto Sans CJK JP", "Noto Sans JP", "Yu Gothic Medium";

--line-title-font-feature-settings: 'tnum', 'lnum', 'liga', 'clig';

--line-title-text-align: center;

--line-title-text-wrap: balance;

--section-title-level-3-font-size: calc(21em / 15);

--section-title-level-3-font-weight: ;

--section-title-level-3-line-height: var(--page-line-height);

--section-title-level-3-latin: -apple-system, "Segoe UI Variable Display", Helvetica, "Arimo", "Inter Variable", "Roboto Flex";

--section-title-level-3-ja: var(--h2-ja);

--section-title-level-3-font-feature-settings: '';

--section-title-level-2-font-size: calc(18em / 15);

--section-title-level-2-font-weight: 400;

--section-title-level-2-font-feature-settings: '';

--section-title-level-2: "Google Sans Flex", "Google Sans", "Roboto Flex", "Roboto", -apple-system, "Segoe UI Variable Display", "Segoe UI Variable", "Segoe UI Variable Text", "Segoe UI", Helvetica, "Arimo", "Yu Gothic Medium", var(--line-title-ja, "Noto Sans JP", "Noto Sans CJK JP");

--section-title-level-2-border-width: min(3.5px, (var(--quote-border-width, 1px) * 2));

}

html {

--section-border-color: hsl(from var(--navbar-bg, gray) h 15% l / 85%);

}

.page {

--virtual-page-margin-top: calc(var(--calculated-paragraph-line-height) * 2);

--section-title-level-3-box-shadow:

0 0 4px rgba(0, 0, 0, 0.12),

0 0 6px rgba(0, 0, 0, 0.12),

0 8px 16px rgba(0, 0, 0, 0.14);

}

h1 / ページタイトル

ページタイトルの上下の余白はちょうど本文テキストの一行分

code:line-title.css

:is(.page, .stream .page) :where(.line).line-title {

line-height: var(--line-title-line-height, var(--page-line-height, 42px));

font-size: var(--line-title-font-size, 1.73em);

font-weight: var(--line-title-font-weight, inherit);

font-size-adjust: var(--line-title-font-size-adjust, inherit);

font-family:

var(--line-title, var(--line-title-latin, "Google Sans Flex", "Google Sans", "Roboto Flex", "Roboto", Helvetica, Arial, "Arimo")), var(--paragraph-latin), var(--sans-serif-latin),

var(--line-title, var(--line-title-ja, "Hiragino Sans", "Yu Gothic Medium", "Noto Sans JP")), var(--paragraph-ja), var(--sans-serif-ja),

var(--icons, "AppIcons"), var(--fallback, sans-serif);

font-feature-settings: var(--line-title-font-feature-settings);

font-variant-numeric: tabular-nums;

& > .text {

padding-bottom: var(--calculated-paragraph-line-height, 24px);

text-align: var(--line-title-text-align, start) !important;

text-wrap: var(--line-title-text-wrap, pretty) !important;

}

}

h1 / 見出し太字*4

2026-07-15 セレクターの厳格化

2026-07-15 位置ズレを修正

:has() 疑似セレクターを使用しない実装に変更

code:level-4.css

--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;

}

}

.line.section-title .c-0.empty-char-index + strong:not(.indent *).level-4 {

display: inline-block; box-sizing: content-box; width: 100%;

margin-top: calc(var(--page-padding-bottom) + var(--virtual-page-margin-top) + var(--page-padding-top) - var(--calculated-paragraph-line-height, 24px));

height: auto;

padding-bottom: var(--calculated-paragraph-line-height, 24px);

text-align: var(--line-title-text-align, start) !important;

text-wrap: var(--line-title-text-wrap, pretty) !important;

line-height: var(--line-title-line-height, var(--page-line-height, 42px));

font-size: var(--line-title-font-size, 1.73em);

font-weight: var(--line-title-font-weight, inherit);

font-size-adjust: var(--line-title-font-size-adjust, inherit);

font-family:

var(--line-title, var(--line-title-latin, "Google Sans Flex", "Google Sans", "Roboto Flex", "Roboto", Helvetica, Arial, "Arimo")), var(--paragraph-latin), var(--sans-serif-latin),

var(--line-title, var(--line-title-ja, "Hiragino Sans", "Yu Gothic Medium", "Noto Sans JP")), var(--paragraph-ja), var(--sans-serif-ja),

var(--icons, "AppIcons"), var(--fallback, sans-serif);

font-feature-settings: var(--line-title-font-feature-settings);

font-variant-numeric: tabular-nums;

/* テロメアを隠す */

&::before {

content: ""; display: block; position: absolute;

background-color: var(--page-bg);

top: calc(-1 * var(--calculated-paragraph-line-height, 24px));

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;

background-color: var(--body-bg);

top: calc(var(--page-padding-bottom) - var(--calculated-paragraph-line-height, 24px));

left: calc(-1 * (var(--page-padding-left, 49px) + var(--card-border-width, 0px)) );

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%);

}

}

h3 / 見出し太字*3

2026-07-15 新しい実装を有効化

code:level-3.css

:is(

.line.section-title:not(.line-title),

.line.line-title

+ .line:where(.section-0),

.line.section-title:not(.line-title):has(strong.level-4:not(.indent *))

+ .line:not(.section-title)

) .c-0.empty-char-index + strong.level-3:not(.indent *) {

display: inline-block; width: 100%; text-align: center;

border-top: solid var(--section-title-level-3-border-width, 1px) oklch(from var(--telomere-border) l c h / 1);

border-bottom: solid var(--section-title-level-3-border-width, 1px) oklch(from var(--telomere-border) l c h / 1);

padding: calc((var(--page-font-size, 15px) * var(--page-line-height) - var(--page-font-size, 15px))) 0;

font-size: calc(21em / 15); font-weight: 450;

font-family: var(--section-title-level-3, var(--line-title, "Roboto Flex", "Roboto", Helvetica, "Arial")), sans-serif, var(--icons, AppIcons);

}

h4 / 見出し太字*2

2026-07-15 新しい実装を有効化

code:level-2.css

:is(

.line.section-title:not(.line-title),

.line.line-title

+ .line:where(.section-0),

.line.section-title:not(.line-title):has(strong:is(.level-2, .level-3, .level-4):not(.indent *))

+ .line:not(.section-title)

) .c-0.empty-char-index + strong.level-2:not(.indent *) {

display: inline-block;

padding: 0 calc(var(--page-font-size, 15px) * var(--page-line-height) - var(--page-font-size, 15px));

font-size: 1.1em; font-weight: 550;

font-family: var(--section-title-level-2, var(--page-font-family, "Roboto Flex", "Roboto", Helvetica, "Arial")), sans-serif, var(--icons, AppIcons);

}