見出しのデザインを変えるUserCSS-B

Level-3のデザインを変更する

元のソースではdisplay: inline-block;をdisplay: block;にしているので、見出し行にカーソルを置くとめちゃくちゃがたがた動いてしまっていた

Scrapboxの仕様上、この要素を消すとバグの原因になってしまう

Mijinko_SD.iconはこのデザインを使いたかったので、個人プロジェクト限定で適用したうえで我慢して使っていた

Level-4の見出しデザインを撤廃する

作るのがめんどくさいだけなので後々に再実装する可能性はある

サンプル

https://gyazo.com/54b7a20d527d823b5a614458d58d5f5d

2023/01/10 level-3の文字色が色付きだったけれど、ハイパーリンクとの見分けがつきにくくややこしいので、元に戻した

ソース

色設定

これだけファイル名が違うので、importする時は注意

もちろん自分で編集して実装するのもアリ

code:color.css

body {

--accent-color: #3d95c9;

--accent-level-2: #70b2d9;

--accent-level-3: var(--accent-color);

--accent-level-3-text: var(--page-text-color); /* #51beff; */

--accent-level-4: #518fb3;

}

共通

code:style.css

/* 見出しの上の間をちょっと空ける */

strong.level {

display: inline-block;

margin-top: .5em;

}

level-3

code:style.css

strong.level-3 {

border-left: solid 14px var(--accent-level-3);

padding-left: 11px;

margin-bottom: 6px;

}

.line:not(.cursor-line) strong.level-3 {

color: var(--accent-level-3-text, var(--page-text-color));

}

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;

}