zenモードで関連ページも隠してみる

最近ScrapboxのZen mode でよく原稿を書いているのだが、いっそのこと関連ページも隠してしまおうか、という気持ちになってきた。

上を参考にして今使っているのが、以下。

code:script.js

scrapbox.PageMenu.addItem({

title: 'ZZen mode',

onClick: (e) => {

var bg = 'white' // ここにお好きな背景色を入れてね（テーマの背景が黒なら black で）

var style = document.getElementById('__zen__')

if (style) {

style.remove(); e.currentTarget.innerText = 'ZZen mode';

const rePageTitle = document.title.slice(4);

document.title = rePageTitle;

return

}

else e.currentTarget.innerText = String.fromCharCode(0x02713) + ' ZZen mode'

const getPageTitle = document.title;

document.title="執筆中！" + getPageTitle;

'.navbar:not(:hover), .line .telomere:not(:hover), .col-page-side:not(:hover),.flex-box:not(:hover) { opacity:0 }'

style = document.createElement('style')

style.setAttribute('id', '__zen__')

style.appendChild(document.createTextNode(css))

document.head.appendChild(style)

}

})

上のvar CSS に関連するページの領域を割り当てればいい

https://gyazo.com/a58968d2f644053783c4cc094795e2cd

とりあえずは、.page-list-itemを追加する。

https://gyazo.com/53278d7c901a576c4ea7094da0f79a9a

あとは、.relation-lavel （or .Links） も追加すれば完全に消えるが、完全に消えるとホバーでも探すのが面倒になるかもしれない。

そもそも、おおもとの領域を隠せば良いことに気がついた。

.related-page-list:not(:hover)

これで下位領域をホバーするまでは消えているし、ホバーすればすべてが表示される。