settings

この Scrapbox 全体に適用される UserCSS

全体

Scrapbox 全体の文字サイズを少し小さく

code:style.css

.editor {

font-size: 14px; /* Default: 15px */

}

Scrapboxのカラースキームをいじる

code:style.css

html {

}

-.icon

トップページ

Home の右上にある page-sort menuを隠す

code:style.css

.quick-launch {

display: none;

}

ピンどめページを段落わけ

code:style.css

.page-list-item.pin + .page-list-item:not(.pin) { grid-column-start: 1; }

ピンどめをテキストのみの見た目に

code:style.css

.grid li.pin {

height: 3rem;

width: 100%;

}

.grid li.pin a {

box-shadow: none !important;

}

.grid li.pin .header {

border-top:none !important;

padding: 6px 5px !important;

}

.grid li.pin .title {

text-align: center !important;

text-decoration: underline;

}

.grid li.page-list-item a .header.pinned {

}

.grid li.pin .content :is(.description,.icon) {

display: none !important;

}

.page-list-item a .pin {

background: none !important;

}

Scrapbox デフォルトのカードの画像の表示方法はダサい

code:style.css

.grid li.page-list-item a .icon {

position: relative;

}

.grid li.page-list-item a .icon{

padding: 0;

margin: auto;

}

.grid li.page-list-item a .icon img {

display: table-cell;

width: auto;

max-height: 90px;

max-width: 90%;

vertical-align: middle;

border-radius: 5px;

}

/* カードを四角くする */

.grid li.page-list-item:not(.pin) a {

box-shadow: none;

border-radius: none;

}

Scrapbox デフォルトのカードの上の謎のボーダーの目的がわからない

code:style.css

.grid li.page-list-item a .header{

padding; 8px 10px;

}

/* タイトルの上のBorderを消して 背景色を設定 */

.grid li.page-list-item a .header{

background: none;

border-top: 0px;

}

-.icon

記事ページ

リンクも無効化

code:style.css

.lines a.icon:is(

) {

display: block;

width: inherit;

pointer-events: none;

margin-top: -1em;

margin-bottom: -1em;

}

.lines img.icon:is(

) { display: none; }

.stream a:is(

) { display: none; }

.grid li.page-list-item a .description img:is(

) { display: none; }

外部リンクのおしりにアイコンをつける

code:style.css

.line a.link {

}

.line a.link:hover {

}

/* 外部リンクにアイコンをつける */

.line a:not(.icon).link::after {

font-family: "Font Awesome 5 Free", "Font Awesome 5 Brands";

content: '\f35d';

display: inline-block;

font-size: 0.8em;

font-weight: bold;

margin-left: .4em;

}

/* Twitter */

content: '\f099';

}

/* Youtube */

.line a:not(.icon).link:is(

)::after { content: '\f167'; }

/* vimeo */

content: '\f40a';

}

/* Github */

.line a:not(.icon).link:is(

)::after {

content: '\f09b';

}

アイコンの左右に少し隙間を入れる

code:style.css

.line img.icon:not(.strong-icon):first-child { margin-left: 0.25em; }

.line img.icon:not(.strong-icon):last-child { margin-right: 0.25em; }

インデントのドットサイズと色

code:style.css

.line .indent-mark .dot {

height: 5px;

width: 5px;

}

関連の Links の箱を消す

code:style.css

.related-page-list .grid li.links {

display: none;

}

テーブルのデザイン

code:style.css

/* セルの背景色を無効化する */

.table-block .cell {

background-color: inherit !important;

}

/* すべてのセルの右と下に線を入れる */

.table-block .cell {

}

/* 一列目のセルの左に線を入れる */

.table-block .cell:first-child {

}

/* 一行目のセルの上に線を入れる (:has() 対応ブラウザのみ)*/

.line:has(.table-block-start) + .line .table-block .cell {

}

Inline code 記法 の Syntax hilight を無効化

code:style.css

code.code span {

}

ハッシュタグの見た目をボタンに

code:style.css

color: var(--new-button-vertical-color) !important;

font-weight: bold;

padding: .2em .4em;

border-radius: .2em;

text-align: center;

}

code:style.css

}

}

記事ページのデザイン

code:style.css

/* 記事ページタイトルを Bold に */

.page-wrapper .lines .line-title span.text {

font-weight: bold;

padding-bottom: 0;

}

code:style.css

/* 一行目の上下幅を調整 */

.page-wrapper .lines div.line:nth-child(2) {

padding-bottom: 10px;

margin-bottom: 21px;

}

/* 一行目を中央寄せに, 文字のデザイン */

.page-wrapper .lines div.line:nth-child(2) span.text {

font-size: 0.9em;

}

/* 一行目になにも書かれていないなら圧縮する */

.lines .line:nth-child(2):not(.cursor-line) br.empty-char-index {

display: contents;

}

-.icon

記法

code:style.css

.line:not(.cursor-line) .deco-\| {

display: flex;

justify-content: center;

align-items: center;

margin-top: -2em;

margin-bottom: -2em;

flex-wrap: nowrap;

}

/* Youtube 動画に対応 */

.line:not(.cursor-line) .deco-\| iframe.youtube {

width: 100%;

height: inherit;

}

code:style.css

/* 中央寄せにする部分, テキスト編集中は無効化 */

.line:not(.cursor-line) .deco-\" {

display: flex;

justify-content: center;

align-items: center;

flex-wrap: wrap;

margin-top: -2em;

margin-bottom: -2em;

}

/* 文字の見た目の部分 */

.line .deco-\" {

font-style: italic;

font-size: .8em;

}

code:style.css

.line .deco-\> {

background-color: var(--quote-bg-color, rgba(0, 0, 0, 0.05));

}

.line:not(.cursor-line) .deco-\> {

padding-left: 0.5em;

padding-right: 0.5em;

}

code:style.css

.line span.deco-\! {

display: block;

padding: 1em;

border-radius: 4px;

vertical-align: middle;

}

.line:not(.cursor-line) span.deco-\! {

margin-top: -1.8em;

margin-bottom: -1.8em;

}

/* 左にアイコンを挿入する */

.line:not(.cursor-line) span.deco-\!::before {

font-family: 'Font Awesome 5 Free';

content: "\f06a";

font-size: 1em;

font-weight: 700;

margin-right: .3em;

}

.line .level-1 span.deco-\! {

font-weight: normal;

}

.line .level-2 span.deco-\! {

font-size: .833em; /* 1/1.2 */

font-weight: normal;

}

-.icon

Stream ページ

code:style.css

/* stream page 右下の icon を消す */

.stream .page .icons { display: none; }