UserCSS(Scrapbox)
概要
ユーザーごとに反映させるものと、閲覧者全員に反映させるものがある。
ユーザーごとの場合、各々のユーザーページに style.css
という名前のコードブロックを書く。
閲覧者全員に反映させたい場合は、
Settingsというページを作って
style.css
を書く。
基本的にはブラウザの
デベロッパーツールでclassやidの値を見ながら編集していくことになる。
(デベロッパーツールは
Chromeだと F12 か Ctrl + i で開ける)
大雑把な使い道も書いておく。
ページ全体の表示(色や形)を変える。
テクニック
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関連の参考記事
解説記事系
行IDとは、行を新規作成した際にHTML内部でつけられているIDのこと。
行の中身を編集しても変わらないっぽい。
使用例
UserCSSの実用例
人が多いだけあって色々試行錯誤されてる。
その他
たまに仕様変更されるのでそれを追っかけたい人用。