禅モード (Zen mode)
> Scrapboxでヘッダー固定してみたりカーソル点滅させてみたりして思ったけど、そこは元のままのほうが圧倒的に書くことに没頭できるデザインだったんだよね。バランス大事だな。
こんなツイートをしたあとで、「じゃあシンプル方面に寄せてみっか」と思いついたので書いてみた！
ページメニューに Zen mode を追加するUserScriptだよ。
とにかく書くことに集中したいときにどうぞ！
元に戻したいときはリロードしてね。 オンオフできるようにしたよー！
2017-10-18 もっとフォーカスしたい！本文だけ見たい！
という人には@rashita2さんの禅モードZがおすすめ！
2018-04-19 script.jsscrapbox.PageMenu.addItem({
title: 'Zen mode',
onClick: e => {
var bg = 'white' // ここにお好きな背景色を入れてね（テーマの背景が黒なら black で）
var style = document.getElementById('__zen__')
if (style) { style.remove(); e.currentTarget.innerText = 'Zen mode'; return }
else e.currentTarget.innerText = String.fromCharCode(0x02713) + ' Zen mode'
var css = `body, .page { background-color:${bg} !important; background-image:none !important }` +
'.navbar:not(:hover), .line .telomere:not(:hover), .col-page-side:not(:hover) { opacity:0 }'
style = document.createElement('style')
style.setAttribute('id', '__zen__')
style.appendChild(document.createTextNode(css))
document.head.appendChild(style)
}
})ちなみにヘッダーメニューとページメニュー、あとメタ情報 (テロメア) は、見えないだけでちゃんとあるよ。
マウスカーソルを近づけると見えます。下のサンプルGIFの最後でちょこっとやってる。
嬉しいことに、禅モードとヘッダーメニューを固定するで作ったスタイルの相性がばっちりだった。
見えないけどいつも同じ場所にあるヘッダーメニュー、いい感じ！
初出 2017-10-17
2017-10-18 リロードしなくても禅モードをオンオフできるようにした
2018-01-23 テロメアのクラス名変わったぽいので対応
2018-04-19 @rashita2さんの禅モードZにリンクしました