⚙
【Scrapbox】UserCSS の作成例メモ
概要
Scrapbox の UserCSS 設定時に取ったメモを公開している記事です。
用語
Scrapbox
チームのための新しい共有ノート[1]
個人的なメモツールとしても利用可能で、以降の記事内容は後者を想定しています。
UserCSS
自分のプロジェクトに CSS を適用できる機能 [↗]。
目的
フォントを変更する
font-family 既定値の一覧
| html | sans-serif |
| code | monospace, monospace |
| kbd | monospace, monospace |
| pre | monospace, monospace |
| samp | monospace, monospace |
| .glyphicon | 'Glyphicons Halflings' |
| body | "Open Sans",Helvetica,Arial,"Hiragino Sans",sans-serif |
| input | inherit |
| button | inherit |
| select | inherit |
| textarea | inherit |
| h1 | inherit |
| h2 | inherit |
| h3 | inherit |
| h4 | inherit |
| h5 | inherit |
| h6 | inherit |
| .h1 | inherit |
| .h2 | inherit |
| .h3 | inherit |
| .h4 | inherit |
| .h5 | inherit |
| .h6 | inherit |
| code | Menlo,Monaco,Consolas,"Courier New",monospace |
| kbd | Menlo,Monaco,Consolas,"Courier New",monospace |
| pre | Menlo,Monaco,Consolas,"Courier New",monospace |
| samp | Menlo,Monaco,Consolas,"Courier New",monospace |
| .tooltip | "Open Sans",Helvetica,Arial,"Hiragino Sans",sans-serif |
| .editor | "Roboto",Helvetica,Arial,"Hiragino Sans",sans-serif |
| .grid li | "Roboto",Helvetica,Arial,"Hiragino Sans",sans-serif |
| .list li.page-list-item | "Roboto",Helvetica,Arial,"Hiragino Sans",sans-serif |
| .popup-menu | "Open Sans",Helvetica,Arial,"Hiragino Sans",sans-serif |
| .stream | "Roboto",Helvetica,Arial,"Hiragino Sans",sans-serif |
ローカルのフォントに変更する
html,
body,
code,
kbd,
pre,
samp,
.tooltip,
.editor,
.grid li,
.list li.page-list-item,
.popup-menu,
.stream {
font-family: "フォント名";
}
Google Fonts のフォントに変更する
@import url("https://fonts.googleapis.com/css?family=Kosugi");
html,
body,
code,
kbd,
pre,
samp,
.tooltip,
.editor,
.grid li,
.list li.page-list-item,
.popup-menu,
.stream {
font-family: "フォント名";
}
スマホでのフォントを変更する
@media screen and (hover: none) and (pointer: coarse) {
html,
body,
code,
kbd,
pre,
samp,
.tooltip,
.editor,
.grid li,
.list li.page-list-item,
.popup-menu,
.stream {
font-family: "Kosugi";
}
}
文字サイズの変更
font-size 既定値の一覧
| h1 | 2em |
| small | 80% |
| sub | 75% |
| sup | 75% |
| code | 1em |
| kbd | 1em |
| pre | 1em |
| samp | 1em |
| html | 10px |
| body | 14px |
| input | inherit |
| button | inherit |
| select | inherit |
| textarea | inherit |
| h1 small | 65% |
| h1 .small | 65% |
| .h1 small | 65% |
| .h1 .small | 65% |
| h2 small | 65% |
| h2 .small | 65% |
| .h2 small | 65% |
| .h2 .small | 65% |
| h3 small | 65% |
| h3 .small | 65% |
| .h3 small | 65% |
| .h3 .small | 65% |
| h4 small | 75% |
| h4 .small | 75% |
| .h4 small | 75% |
| .h4 .small | 75% |
| h5 small | 75% |
| h5 .small | 75% |
| .h5 small | 75% |
| .h5 .small | 75% |
| h6 small | 75% |
| h6 .small | 75% |
| .h6 small | 75% |
| .h6 .small | 75% |
| h1 | 36px |
| .h1 | 36px |
| h2 | 30px |
| .h2 | 30px |
| h3 | 24px |
| .h3 | 24px |
| h4 | 18px |
| .h4 | 18px |
| h5 | 14px |
| .h5 | 14px |
| h6 | 12px |
| .h6 | 12px |
| .lead | 16px |
| small | 85% |
| .small | 85% |
| .initialism | 90% |
| blockquote | 17.5px |
| blockquote footer | 80% |
| blockquote small | 80% |
| blockquote .small | 80% |
| code | 90% |
| kbd | 90% |
| kbd kbd | 100% |
| pre | 13px |
| pre code | inherit |
| legend | 21px |
| output | 14px |
| .form-control | 14px |
| .input-sm | 12px |
| .input-group-sm>.form-control | 12px |
| .input-group-sm>.input-group-addon | 12px |
| .input-group-sm>.input-group-btn>.btn | 12px |
| .form-group-sm .form-control | 12px |
| .form-group-sm .form-control-static | 12px |
| .input-lg | 18px |
| .input-group-lg>.form-control | 18px |
| .input-group-lg>.input-group-addon | 18px |
| .input-group-lg>.input-group-btn>.btn | 18px |
| .form-group-lg .form-control | 18px |
| .form-group-lg .form-control-static | 18px |
| .btn | 14px |
| .file-upload-btn | 14px |
| input[type="file"]::-webkit-file-upload-button | 14px |
| .btn-lg | 18px |
| .btn-group-lg>.btn | 18px |
| .btn-sm | 12px |
| .btn-group-sm>.btn | 12px |
| .btn-xs | 12px |
| .btn-group-xs>.btn | 12px |
| .dropdown-menu | 14px |
| .dropdown-header | 12px |
| .input-group-addon | 14px |
| .input-group-addon.input-sm | 12px |
| .input-group-sm>.input-group-addon | 12px |
| .input-group-sm>.input-group-btn>.input-group-addon.btn | 12px |
| .input-group-addon.input-lg | 18px |
| .input-group-lg>.input-group-addon | 18px |
| .input-group-lg>.input-group-btn>.input-group-addon.btn | 18px |
| .navbar-brand | 18px |
| .label | 75% |
| .panel-title | 16px |
| .close | 21px |
| .tooltip | 12px |
| .kamon | 24px |
| .btn-primary .kamon | 18px |
| .btn-default .kamon | 18px |
| .btn-warning .kamon | 18px |
| .btn-danger .kamon | 18px |
| .app.presentation .line | 3vw |
| .app.presentation .line .code-block code | .6em |
| .app.presentation .line.section-title | 6vw |
| .billings-info-page section .section-title | 24px |
| .drag-and-drop.upload .message | 45px |
| .drag-and-drop.upload .message .kamon | 1em |
| .editor | 15px |
| .line span.code-block .code-block-start | .9em |
| .line | inherit |
| .line.line-title | 1.73em |
| .line .head | 17px |
| .line .telomere .telomere-border .description | 12px |
| .lines | inherit |
| .drawer .drawer-menu ul li | 14px |
| .drawer .drawer-menu ul li a | 15px |
| .drawer .drawer-menu ul li.list-header | 12px |
| .drawer .drawer-menu ul li.list-menu-button a | 14px |
| .drawer .drawer-menu .kamon | 18px |
| .global-menu.dropdown-menu>li>a .kamon | 18px |
| .global-menu.dropdown-menu>li.dropdown-header .kamon | 18px |
| .global-menu.dropdown-menu>li.dropdown-menu-button a | 13px |
| .navbar .navbar-brand .private-icon | 16px |
| .navbar .navbar-brand i | 16px |
| .navbar .navbar-menu>li.stream-btn .kamon | 36px |
| .global-menu .project-list-filter .kamon | 1em |
| .drawer .project-list-filter .kamon | 1em |
| .new-billings-page .thankyou-block .head | 43px |
| .new-billings-page .thankyou-block p | 16px |
| .overlay-box | 30px |
| .page .title | 12px |
| .page-list .create-searched-page .kamon-icon .kamon | 40px |
| .page-list .head-title | 13px |
| .grid.grid-lg li.page-list-item a .title | 18px |
| .grid.grid-lg li.page-list-item a .description | 14px |
| .grid.grid-md li.page-list-item a .title | 15px |
| .grid.grid-md li.page-list-item a .description | 12px |
| .grid li.relation-label a | 14px |
| .grid li.relation-label a .desc | 11px |
| .grid li.relation-label a .kamon | 22px |
| .grid li.relation-label a .icon-lg | 36px |
| .grid li.ellipsis a | 14px |
| .grid li.ellipsis a .kamon | 24px |
| .grid li.page-list-item a .title | 14px |
| .grid li.page-list-item a .description | 12px |
| .list li.page-list-item a | 13px |
| .list li.page-list-item a .title | 16px |
| .list li.page-list-item a .title-with-description | 16px |
| .list li.page-list-item a .description | 12px |
| .list li.page-list-item a .views | 8px |
| .page-list-item .description .formula .katex-display .mord.text.displaystyle.textstyle.uncramped | .8em |
| .page-menu | 13px |
| .page-menu.xs | 14px |
| .page-menu .dropdown-menu>li>a .kamon | 18px |
| .expandable-menu .toggle-button .kamon | 24px |
| .popup-menu .button-container .button | 11px |
| html[data-os*='android'] .popup-menu .button-container .button | 13px |
| .popup-menu .button-container .button[data-os*='android'] | 13px |
| html[data-os*='ios'] .popup-menu .button-container .button | 13px |
| .popup-menu .button-container .button[data-os*='ios'] | 13px |
| html[data-os*='android'] .popup-menu.vertical .button-container .button | 11px |
| .popup-menu[data-os*='android'].vertical .button-container .button | 11px |
| html[data-os*='ios'] .popup-menu.vertical .button-container .button | 11px |
| .popup-menu[data-os*='ios'].vertical .button-container .button | 11px |
| .project-backup .group-label .kamon-direction-down | 7px |
| .project-billing-form p.with-icon .kamon | 30px |
| .project-members-form .user-list-item .display-name | 18px |
| .project-notifications-form .list-item .icon | 30px |
| .project-notifications-form .list-item .service-name | 18px |
| .project-notifications-form .list-item .misc .url | 13px |
| .quick-launch | 14px |
| .quick-launch .project-home | 18px |
| .quick-launch .history-back-button | 18px |
| .quick-launch .private-badge .kamon | 20px |
| .quick-launch .plan-badge | 11px |
| .quick-launch .plan-badge .icon | 15px |
| .search-form .form-group input | 16px |
| .search-not-found .kamon | 48px |
| .shared-cursors .user-flag | 10px |
| .status-bar>div | 12px |
| .status-bar .kamon | 16px |
| .stream h1 | 15px |
| .stream .page .line | 15px |
| .stream .page .line-title | 25.95px |
| .table-block .table-block-start | .9em |
| .text-input.line-title | 1.73em |
| html[data-display-style*='presentation'] .text-input | 3vw |
| html[data-display-style*='presentation'] .text-input.line-title | 6vw |
| .extensions-settings-form .extension-item .icon .kamon | 55px |
| .extensions-settings-form .extension-item .title | 18px |
| .extensions-settings-form .extension-item .description | 14px |
| .extensions-settings-form .extension-item .checkbox | 14px |
| .line code | 90% |
| .file-delete-button .kamon | inherit |
| .line .formula .katex-display .mord.text.displaystyle.textstyle.uncramped | .8em |
| .line strong.level-2 | 1.2em |
| .line strong.level-3 | 1.44em |
| .line strong.level-4 | 1.73em |
| .line strong.level-5 | 2.07em |
| .line strong.level-6 | 2.49em |
| .line strong.level-7 | 3em |
| .line strong.level-8 | 3.58em |
| .line strong.level-9 | 4.3em |
| .line strong.level-10 | 5.16em |
メモのタイトル
.line.line-title,
.text-input.line-title {
font-size: 16px;
}
メモの本文
.line {
font-size: 16px;
}
コードブロック
.line code {
font-size: 16px;
}
行間の変更
line-height 既定値の一覧
| sub | 0 |
| sup | 0 |
| input | normal |
| .glyphicon | 1 |
| body | 1.42857 |
| input | inherit |
| button | inherit |
| select | inherit |
| textarea | inherit |
| .img-thumbnail | 1.42857 |
| h1 | 1.1 |
| h2 | 1.1 |
| h3 | 1.1 |
| h4 | 1.1 |
| h5 | 1.1 |
| h6 | 1.1 |
| .h1 | 1.1 |
| .h2 | 1.1 |
| .h3 | 1.1 |
| .h4 | 1.1 |
| .h5 | 1.1 |
| .h6 | 1.1 |
| h1 small | 1 |
| h1 .small | 1 |
| h2 small | 1 |
| h2 .small | 1 |
| h3 small | 1 |
| h3 .small | 1 |
| h4 small | 1 |
| h4 .small | 1 |
| h5 small | 1 |
| h5 .small | 1 |
| h6 small | 1 |
| h6 .small | 1 |
| .h1 small | 1 |
| .h1 .small | 1 |
| .h2 small | 1 |
| .h2 .small | 1 |
| .h3 small | 1 |
| .h3 .small | 1 |
| .h4 small | 1 |
| .h4 .small | 1 |
| .h5 small | 1 |
| .h5 .small | 1 |
| .h6 small | 1 |
| .h6 .small | 1 |
| .lead | 1.4 |
| dt | 1.42857 |
| dd | 1.42857 |
| blockquote footer | 1.42857 |
| blockquote small | 1.42857 |
| blockquote .small | 1.42857 |
| address | 1.42857 |
| pre | 1.42857 |
| .table>thead>tr>th | 1.42857 |
| .table>thead>tr>td | 1.42857 |
| .table>tbody>tr>th | 1.42857 |
| .table>tbody>tr>td | 1.42857 |
| .table>tfoot>tr>th | 1.42857 |
| .table>tfoot>tr>td | 1.42857 |
| legend | inherit |
| output | 1.42857 |
| .form-control | 1.42857 |
| .input-sm | 1.5 |
| .input-group-sm>.form-control | 1.5 |
| .input-group-sm>.input-group-addon | 1.5 |
| .input-group-sm>.input-group-btn>.btn | 1.5 |
| .form-group-sm .form-control | 1.5 |
| .form-group-sm select.form-control | 30px |
| .form-group-sm .form-control-static | 1.5 |
| .input-lg | 1.33333 |
| .input-group-lg>.form-control | 1.33333 |
| .input-group-lg>.input-group-addon | 1.33333 |
| .input-group-lg>.input-group-btn>.btn | 1.33333 |
| .form-group-lg .form-control | 1.33333 |
| .form-group-lg select.form-control | 46px |
| .form-group-lg .form-control-static | 1.33333 |
| .form-control-feedback | 34px |
| .input-lg+.form-control-feedback | 46px |
| .input-group-lg>.form-control+.form-control-feedback | 46px |
| .input-group-lg>.input-group-addon+.form-control-feedback | 46px |
| .input-group-lg>.input-group-btn>.btn+.form-control-feedback | 46px |
| .input-group-lg+.form-control-feedback | 46px |
| .form-group-lg .form-control+.form-control-feedback | 46px |
| .input-sm+.form-control-feedback | 30px |
| .input-group-sm>.form-control+.form-control-feedback | 30px |
| .input-group-sm>.input-group-addon+.form-control-feedback | 30px |
| .input-group-sm>.input-group-btn>.btn+.form-control-feedback | 30px |
| .input-group-sm+.form-control-feedback | 30px |
| .form-group-sm .form-control+.form-control-feedback | 30px |
| .btn | 1.42857 |
| .file-upload-btn | 1.42857 |
| input[type="file"]::-webkit-file-upload-button | 1.42857 |
| .btn-lg | 1.33333 |
| .btn-group-lg>.btn | 1.33333 |
| .btn-sm | 1.5 |
| .btn-group-sm>.btn | 1.5 |
| .btn-xs | 1.5 |
| .btn-group-xs>.btn | 1.5 |
| .dropdown-menu>li>a | 1.42857 |
| .dropdown-header | 1.42857 |
| .nav-tabs>li>a | 1.42857 |
| .navbar-brand | 20px |
| .navbar-nav>li>a | 20px |
| .label | 1 |
| .close | 1 |
| .modal-title | 1.42857 |
| .tooltip | 1.42857 |
| .kamon | 24px |
| .btn-primary .kamon | 18px |
| .btn-default .kamon | 18px |
| .btn-warning .kamon | 18px |
| .btn-danger .kamon | 18px |
| .dropdown-menu>li>a | 28px |
| .app.presentation .line | 1.2em |
| .app.presentation .line .code-block | 1em |
| .billing-alert a | 30px |
| .drag-and-drop.upload .message .kamon | unset |
| .editor | 28px |
| .line span.code-block | 1.7em |
| .line | inherit |
| .line.line-title | 42px |
| .line .telomere .telomere-border .description | 25px |
| .drawer .drawer-menu ul li a | 19px |
| .drawer .drawer-menu ul li.list-header | 1.42857 |
| .drawer .drawer-menu .kamon | 18px |
| .global-menu.dropdown-menu>li>a .kamon | 18px |
| .global-menu.dropdown-menu>li.dropdown-header .kamon | 18px |
| .global-menu .private-icon | 18px |
| .navbar .navbar-brand | 54px |
| .navbar .navbar-menu>li>a | 54px |
| .navbar .navbar-menu>li.stream-btn .kamon | 36px |
| .global-menu .project-list-filter .kamon | 1em |
| .drawer .project-list-filter .kamon | 1em |
| .new-button | 40px |
| .overlay-box | 1.5em |
| .page-history-select .date .date-text | 24px |
| .page-history-guide | 10px |
| .page-list .create-searched-page .kamon-icon .kamon | 40px |
| .grid.grid-lg li.page-list-item a .title | 23px |
| .grid.grid-lg li.page-list-item a .description | 23px |
| .grid.grid-md li.page-list-item a .title | 21px |
| .grid.grid-md li.page-list-item a .description | 21px |
| .grid li.relation-label a .icon-lg | 36px |
| .grid li.ellipsis a .kamon | 24px |
| .grid li.page-list-item a .title | 20px |
| .grid li.page-list-item a .description | 20px |
| .list li.page-list-item a .title | 20px |
| .list li.page-list-item a .title-with-description | 20px |
| .list li.page-list-item a .description | 14px |
| .page-menu ul>li>div | 1.42857 |
| .page-menu .dropdown-menu>li>a .kamon | 18px |
| .expandable-menu .toggle-button .kamon | 24px |
| html[data-os*='android'] .popup-menu.vertical .button-container .button | 1.2em |
| .popup-menu[data-os*='android'].vertical .button-container .button | 1.2em |
| html[data-os*='ios'] .popup-menu.vertical .button-container .button | 1.2em |
| .popup-menu[data-os*='ios'].vertical .button-container .button | 1.2em |
| .quick-launch .project-home | 40px |
| .quick-launch .history-back-button | 40px |
| .quick-launch .private-badge .kamon | 20px |
| .quick-launch .plan-badge | 18px |
| .search-form .form-group button | 40px |
| .search-not-found .kamon | 48px |
| .shared-cursors .user-flag | 14px |
| .page-sort-menu | 42px |
| .status-bar>div | 28px |
| .status-bar .kamon | 16px |
| .stream .page .lines | 28px |
| .stream .page .line | 28px |
| .stream .page .line-title | 42px |
| .text-input.line-title | 1.5em |
| .extensions-settings-form .extension-item .icon .kamon | 55px |
| .line strong.level-2 | 28px |
| .line strong.level-3 | 35px |
| .line strong.level-4 | 42px |
| .line strong.level-5 | 49px |
| .line strong.level-6 | 56px |
| .line strong.level-7 | 63px |
| .line strong.level-8 | 77px |
| .line strong.level-9 | 91px |
| .line strong.level-10 | 105px |
メモのタイトル
.line.line-title,
.text-input.line-title {
line-height: 1.6;
}
メモの本文
.line {
line-height: 1.6;
}
コードブロック
.line code,
.line span.code-block {
line-height: 1.6;
}
箇条書きのドット非表示
.line .indent-mark .dot {
display: none;
}
ページ間リンクの角括弧を常に表示する
.editor .line:not(.cursor-line) .page-link[type=link]::before {
content: "[";
}
.editor .line:not(.cursor-line) .page-link[type=link]::after {
content: "]";
}
.editor .line:not(.cursor-line) .page-link[type=link]::before,
.editor .line:not(.cursor-line) .page-link[type=link]::after {
color: var(--page-link-color, #5e8af7);
}
.editor .line:not(.cursor-line) .empty-page-link[type=link]::before,
.editor .line:not(.cursor-line) .empty-page-link[type=link]::after {
color: var(--empty-page-link-color, #fd7373);
}
[data-hover-visible] .editor .line:not(.cursor-line) .page-link[type=link]:hover::before,
[data-hover-visible] .editor .line:not(.cursor-line) .page-link[type=link]:hover::after {
color: var(--page-link-hover-color, #2d67f5);
}
[data-hover-visible] .editor .line:not(.cursor-line) .empty-page-link[type=link]:hover::before,
[data-hover-visible] .editor .line:not(.cursor-line) .empty-page-link[type=link]:hover::after {
color: var(--empty-page-link-hover-color, #fc4141);
}
実装メモ
-
.lineは.editorなどで絞り込む (notpage-list-item .line) -
.page-linkは[type="link"]で絞り込む (not ハッシュタグ)
コードブロックのタブサイズを変更
.line span.code-block code {
tab-size: 2;
}
コードブロックを単語区切りから限界で折り返しに変更
.line span.code-block code {
word-break: break-all;
}
インラインコードの文字色を固定
code:not(.code-start):not(.code-body) span>span>span {
color: #268bd2;
}
キャレットの横幅を広げる
.cursor rect {
width: 2px;
}
おわりに
作業環境
VS Code で記述した .sass を CSS に変換して Scrapbox の settings にコピペしてます。
ディレクトリ
scrapbox-style/
├ dest/
│ ├ main.sass
│ └ style.css
├ modules/
│ └ xx.sass
├ settings.txt
└ create-style-css.ps1
settings.txt
読み込むモジュールを管理する設定ファイル。
settings.txt
読み込むモジュール名(1)
読み込むモジュール名(2)
下記の形式の main.sass を生成する。
main.sass
@import "../modules/読み込むモジュール名(1).sass"
@import "../modules/読み込むモジュール名(2).sass"
create-style-css.ps1
CSS を取得する PowerShell のスクリプト。
create-style-css.ps1
# settings.txt を基に main.sass を生成
Get-Content settings.txt
| & {
process { "@import `"../modules/$_.sass`"" }
}
| Out-File dest\main.sass
# style.css の生成
node-sass --output-style compressed dest\main.sass dest\style.css
# Scrapbox の settings の形式にしてクリップボードに保存
Get-Content dest\style.css
| & {
process { " $_" }
}
| & {
'settings'
'code:style.css'
$input
}
| Set-Clipboard
Discussion