セクション区切り表示スイッチ

https://gyazo.com/923aa589cb12f30267e2394a5d2f4eee

セクション区切り

表示したいときと表示したくないときがある。

Settingsには透明で表示するように書いておく。

参考

◆ 変数値　透明

code:style.css

:root {

--My-SectionLine-sw: 0.0;

--My-SectionNum-sw: 0;

}

◆ セクション区切り線を書く

code:style.css

/* Section title */

.app:not(.presentation) .line.section-title:not(.line-title) .text {

border-top: 1px dashed rgba(173,173,173,var(--My-SectionLine-sw));

}

◆ セクション番号を付ける

code:style.css

.app { counter-reset: section }

.app:not(.presentation) .line.section-title:not(.line-title) { position: relative }

.app:not(.presentation) .line.section-title:not(.line-title):after {

counter-increment: section;

content: counter(section);

display: inline-block; width: 1.5em; height: 1.4em;

position: absolute;

top: -1.5em;

right: -3.5em;

z-index: 500; /* 隠れるようなら前に出す */

font-size: 75%;

text-align: center;

white-space: nowrap;

opacity: calc(var(--My-SectionNum-sw) * 0.5); 　/* ちょっと薄めに */

}

このページでRUNボタンを押すと、セクション区切りが表示される。

ページを移動しても、セクション区切りの表示は維持される。

ブラウザのリロード（もう一度 RunButton をクリック）すると、セクション区切りが非表示に戻る。

◆ 変数値変更

code:RUN.css

:root {

--My-SectionLine-sw: 1.0 !important;

--My-SectionNum-sw: 1 !important;

}

code:RUN.js

alert(`

セクション区切りと番号を表示します。\n

ページのリロードをすると元に戻ります。`);

注）　alert がウザければなくても良いが、　code:RUN.js は 空行で残す。

UserCSS.icon

UserScript.icon