/Mijinko/見出しのデザインを変えるUserCSS

generated at 11/17/2024, 4:47:23 AM
見出しのデザインを変えるUserCSS
Scrapboxの文字を大きくする記法を見出しにするUserCSS
別デザイン
見出しのデザインを変えるUserCSS-B

サンプル

更新履歴
2023/02/05 level-2の上の空間を 0.5em から 1em に増やした
CSS
色設定
color.cssbody {
	--accent-color: #3d95c9;
	--accent-level-2: #70b2d9;
	--accent-level-3: var(--accent-color);
	--level-3-border: #bdbdbd;
	--accent-level-4: #518fb3;
}

共通
style.css/* 見出しの上の間をちょっと空ける */
strong.level {
    display: inline-block;
    margin-top: .5em;
}

位置合わせの為に.empty-char-indexを消そうとしたけれど、範囲選択機能がバグったので廃止
_style.css.deco .level~.empty-char-index {
    display: none;
}

level-4
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
style.cssstrong.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
style-2.cssstrong.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
style-1.cssstrong.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
style.cssstrong.level-2 /* .deco-\* */ {
    border-left: solid 4px /*14px*/ var(--accent-level-2);
    padding-left: 11px;
    margin-top: 1em;
    margin-bottom: 3px;
}