見出しのデザインを変えるUserCSS
Scrapboxの文字を大きくする記法を見出しにするUserCSS
別デザイン
見出しのデザインを変えるUserCSS-B
サンプル
https://gyazo.com/810aca9ab01f9ec869fc19ce93aaf00b
更新履歴
2023/02/05 level-2の上の空間を0.5emから1emに増やした
CSS
色設定
code:color.css
body {
--accent-color: #3d95c9;
--accent-level-2: #70b2d9;
--accent-level-3: var(--accent-color);
--level-3-border: #bdbdbd;
--accent-level-4: #518fb3;
}
共通
code:style.css
/* 見出しの上の間をちょっと空ける */
strong.level {
display: inline-block;
margin-top: .5em;
}
位置合わせの為に.empty-char-indexを消そうとしたけれど、範囲選択機能がバグったので廃止
code:_style.css
.deco .level~.empty-char-index {
display: none;
}
level-4
code:style.css
/* 見出しのデザインを変える（作りかけ） */
strong.level-4 {
display: block;
border-bottom: 3px solid var(--accent-level-4);
padding: 0;
padding-left: 0.5em;
margin-top: -.5em;
margin-bottom: -1em;
}
.cursor-line strong.level-4 {
margin-top: .5em;
margin-bottom: 0em;
}
level-3
案3
code:style.css
strong.level-3 {
display: block;
border-bottom-style: solid;
border-bottom-width: 3px;
border-bottom-color: var(--level-3-border);
padding: 3px 0 3px .5em;
margin-top: .5em;
margin-bottom: 0em;
margin-right: 1.5em;
font-size: 1.5em !important;
}
.cursor-line strong.level-3 {
margin-top: 1.5em;
margin-bottom: 1em;
}
案2
code:style-2.css
strong.level-3 {
display: block;
border: 3px solid #cecece;
padding: 3px 0 3px .5em;
margin-top: 1.5em;
margin-bottom: 1em;
margin-right: 1.5em;
background-color: #6e6e6e;
border-radius: 3px;
}
/*.cursor-line strong.level-3 {
display: block;
margin-top: .5em;
margin-bottom: .5em;
padding-bottom: 3px;
vertical-align: middle;
}*/
案1
code:style-1.css
strong.level-3 {
display: inline-block;
border-bottom: 3px solid var(--accent-level-3);
padding: 3px .5em 3px .2em;
margin-top: .5em;
margin-bottom: .5em;
}
.cursor-line strong.level-3 {
margin-top: .5em;
margin-bottom: 0;
padding-bottom: 3px;
}
strong.level-3::before {
content: "\f005";
margin-right: .3em;
color: var(--accent-level-3);
font-size: 16px;
line-height: 1em;
vertical-align: middle;
}
level-2
code:style.css
strong.level-2 /* .deco-\* */ {
border-left: solid 4px /*14px*/ var(--accent-level-2);
padding-left: 11px;
margin-top: 1em;
margin-bottom: 3px;
}