[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 CSS의 시작 부분에 설명되어 있습니다.@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;
}
항상 괄호 표시
.line .empty-char-index {
width: auto;
}
.line .empty-char-index:nth-child(1)::before {
content : "[";
position: absolute;
color : #aaa;
}
.line .empty-char-index:nth-child(3)::before {
content : "]";
position: absolute;
color : #aaa;
}
코드 블록의 레이블 크기 변경
.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;
}
끝말
작업 환경
VScode에서 기술한
.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
end
각주
https://scrapbox.io/product ↩︎
Reference
이 문제에 관하여([Scrapbox] Usercss의 예제 노트), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/shikatan/articles/72ebd543dd73fa38b580텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
