settings
次に、UserCSSとUserScriptを記述する場所についてです。まずUserCSSの「閲覧者全員に適用する」ものについては、「settings」ページに書き込みます。メニューにある「Settings」ではなく、プロジェクト内に「settings」というタイトルのページを作り、そのページに直接書き込こんでいきます。ちなみに、「setting」と「s」が抜けたタイトルではコードが発動しないので注意してください。UserCSSとUserScriptの「自分だけに適用する」については、「自分のページ」に書き込みます。「自分のページ」は第３章にも登場しましたが、もう一度、確認しておきましょう。Scrapbox情報整理術 倉下忠憲 (Japanese Edition) (pp.168-169). Kindle 版.
UserScriptも、記述の仕方は基本的に同じです。書き込みページが「自分のページ」に限定される点と、コード記法の開始が「code:style.css」ではなく、「code:script.js」な点は違いますが、考え方は変わりません。Scrapbox情報整理術 倉下忠憲 (Japanese Edition) (p.174). Kindle 版.
第３章で紹介したプロジェクトでも、UserCSSやUserScriptはたくさん公開されています。特に、「Scrapboxカスタマイズコレクション」はカスタマイズ情報を集めたプロジェクトなので大いに参考になります。また、「Scrapboxとあそぶ」も面白いテクニックが多数、紹介されています。まずは、こうしたプロジェクトをのぞいてみて、自分に使えそうなものをピックアップしてみるとよいでしょう。Scrapbox情報整理術 倉下忠憲 (Japanese Edition) (p.178). Kindle 版.
code:style.css
/* 背景色の変更
body {background-color:#F5A9B8;}
.navbar-default {
background-color:#5BCEFA;
border-color:}
*/
code:style.css
/* 箇条書きを控えめにする */
.app .line .indent-mark .dot {
height: .2em; width: .4em; border-radius: 25%;
background-color: rgba(173,173,173,.55) }
.app:not(.presentation) .line .indent-mark .dot { top: auto; bottom: 0 }
code:style.css
/* 二重括弧による強調をマーカーっぽくする */
.line strong:not(class) {
background: linear-gradient(transparent 50%, #5BCEFA 25%, #5BCEFA 70%, transparent 90%)
}
こんなふうにマーカーがひかれることになります。
code:style.css
/* ピンしたページのスタイル */
.grid li.page-list-item a .pin { background-color: transparent; background-image: none }
.grid li.page-list-item a .pin::after {
content: '\f08d'; font-family: 'Font Awesome 5 Free'; font-weight: 900;
font-size: 20px; color: #5BCEFA; bottom: 0; display: inline-block; transform: rotate(35deg) }
code:style.css
/* アイコンサイズを大きくする */
.line img.icon { height: 1.5em; top: -0.2em }
moriteppei.icon
code:style.css
/* スポイラー */
span.deco-\~:not(.cursor-line .deco-\~) {
color: #a9a9a9;
background: #a9a9a9;
cursor: pointer
}
/noratetsu/●「行番号を表示する」改良版
code:style.css
/* 行番号を表示 -- ウィンドウ幅768px以上で適用 */
@media screen and (min-width: 768px) {
.editor .lines { counter-reset: line }
/* タイトルから数えるときは :not(.line-title) を消してね */
.editor .line:not(.line-title) { counter-increment: line }
/* タイトルから数えるときは :not(.line-title) を消してね */
.app:not(.presentation) .editor .line:not(.line-title)::before {
content: counter(line);
position: absolute; display: inline-block; left: -110px; z-index: 10;
min-width: 50px; text-align: right; vertical-align: middle;
/* 行番号のフォントとか色とかの指定はここ */
font-family: monospace; color: grey }
/* カーソル行の行番号を濃く表示する */
.editor .line:not(.line-title)::before { opacity: .5 }
.editor .line.cursor-line:not(.line-title)::before { opacity: 1; font-weight: bolder } }