UserCSS(Scrapbox)
適用させる方法はここに書いてある→/help-jp/UserCSS
このプロジェクトに適用されているCSSはここにある→Settings
概要
Scrapboxのプロジェクト単位で適用させることができるカスタムCSSのこと。
類似するものにUserScriptというものがある。
ユーザーごとに反映させるものと、閲覧者全員に反映させるものがある。
ユーザーごとの場合、各々のユーザーページにstyle.cssという名前のコードブロックを書く。
閲覧者全員に反映させたい場合は、Settingsというページを作ってstyle.cssを書く。
基本的にはブラウザのデベロッパーツールでclassやidの値を見ながら編集していくことになる。
（デベロッパーツールはChromeだと F12 か Ctrl + i で開ける）
大雑把な使い道も書いておく。
ページ全体の表示（色や形）を変える。
文字装飾の種類を増やす。
参考：/help-jp/文字装飾記法#59f6c087efa18e00009514fb
見出しやハッシュタグの見た目を変える。
テクニック
code:import.css
@import url('https://scrapbox.io/api/code/Mijinko/input_mode_UserScript/style.css');
@import url('<URL>');で外部のCSSを読み込める。
ほかの人のCSSはこの方法で読み込むといいだろう。
開発時の便利なショートカットキー
Chromeを使用していることを前提とする。
F12 または Ctrl + i
開発者ツールを開く。
Ctrl + R
ページの再読み込み
Ctrl + Shift + R
ページのハード再読み込み
CSSが反映されなかったら試してみよう。
Ctrl + Shift + C
要素を選択できるようにする。
その要素のCSSやclass, id等を調べたりできる。
UserCSS関連の参考記事
解説記事系
/takker/Scrapboxの行IDの書式
行IDとは、行を新規作成した際にHTML内部でつけられているIDのこと。
行の中身を編集しても変わらないっぽい。
使用例
特定の行にのみ適用させるUserCSS。
特定の日時にのみ適用するUserCSS。
UserCSSの実用例
/memooooo/settings
おしゃれなUserCSS。
/villagepump/Settings
井戸端のUserCSS。
人が多いだけあって色々試行錯誤されてる。
その他
/help-jp/リリースノート
たまに仕様変更されるのでそれを追っかけたい人用。
#CSS #UserCSS #Scrapbox