Settings

フォントサイズ変更

code:style.css

font-size: 16px;

}

一段階大きくしてみた。

これで視認性がどれくらい変わるのか

18pxだと大きすぎたので16px

外部リンク区別

code:style.css

/* 外部リンクにiconをつける */

.line span:not(.modal-image):not(.pointing-device-map) > a.link:not(.icon)::after {

font-family: 'Font Awesome 5 Free';

content: ' \f35d';

font-weight: 900;

display: inline-block;

}

画像の外周に影をつける

code:style.css

.line .image{

}

インデントへ交互に色を付ける

code:style.css

.indent-mark {

height: 100% !important;

}

.indent-mark .pad {

height: 100% !important;

overflow: unset !important;

}

.indent-mark span:nth-child(2n+2) .pad {

}

行頭のドットを薄くする

code:style.css

.line .indent-mark .dot {

top: 11px;

width: 6px;

height: 3px;

}

のびのびドロップダウン

code:style.css

.navbar-form .dropdown.open .dropdown-menu {

min-width: 100%;

max-height: calc(100vh - 130px) !important;

overflow-y: auto;

}

ピン留めされたページを独立した段に表示する

code:style.css

.page-list-item.pin + .page-list-item:not(.pin) {

grid-column-start: 1;

}

カード表示のサムネイル画像を枠内におさめる

code:style.css

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

position: relative;

padding: 0;

margin: auto;

}

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

display: table-cell;

width: auto;

max-height: 100px;

max-width: 90%;

vertical-align: middle;

border-radius: 3px;

}

二重括弧による強調をマーカーっぽくする

code:style.css

/* 二重括弧による強調をマーカーっぽくする */

background: linear-gradient(transparent 60%, rgba(171, 255, 79, .6) 60%, rgba(171, 255, 79, .6) 100%);

}

表示切替用

表示テスト

画像を並べて表示する記法

code:style.css

/* マトリクス記法 */

.line:not(.cursor-line) .deco-\| { display: inline-flex }

.line .deco-\| img.image { object-fit: contain; margin: 0 }

/* 太字記法と組み合わせて列数を変える */

.line .level-1 .deco-\| > span { width: calc(100%/1) }

.line .level-2 .deco-\| > span { width: calc(100%/2) }

.line .level-3 .deco-\| > span { width: calc(100%/3) }

.line .level-4 .deco-\| > span { width: calc(100%/4) }

.line .level-5 .deco-\| > span { width: calc(100%/5) }

.line .level-6 .deco-\| > span { width: calc(100%/6) }

.line .level-7 .deco-\| > span { width: calc(100%/7) }

.line .level-8 .deco-\| > span { width: calc(100%/8) }

.line .level-9 .deco-\| > span { width: calc(100%/9) }

.line .level-10 .deco-\| > span { width: calc(100%/10) }

/* 並べた画像の間にスキマが欲しい場合はこの2行を追加・ぴっちり敷き詰めたい場合はこの2行は不要 */

ページカードのタイトルを2行に納める

code:style.css

li.page-list-item.grid-style-item div.title {

-webkit-line-clamp: 2;

}

4色マーカー

code:style.css

.deco-\! {

}

.deco-\% {

}

.deco-\# {

}

.deco-\~ {

}

テスト1

テスト2

テスト3

テスト4

反転色から薄い色の黒文字に変更

PrivateのScrapboxリンクを張る時

code:style.css

sectionを水平線で区切る

code:style.css.disable

.app:not(.presentation) .line.section-title:not(.line-title) {

position: relative;

}

.app:not(.presentation) .line.section-title:not(.line-title) .text {

padding-top: 1em;

}

.app:not(.presentation) .line.section-title:not(.line-title):before {

content: "";

display: block;

width: relative;

position: relative;

border-top: 1px lightgray solid;

}

画像サイズの縮小

code:style.css

.level-1 img { width: 16.7%; max-height: none; }

.level-2 img { width: 33.3%; max-height: none; }

.level-3 img { width: 50%; max-height: none; }

.level-4 img { width: 66.7%; max-height: none; }

.level-5 img { width: 83.3%; max-height: none; }

.level-6 img { width: 100%; max-height: none; }

行番号を表示する

code:style.css

/* 行番号を表示 -- ウィンドウ幅768px以上で適用 */

@media screen and (min-width: 768px) {

.editor .lines { counter-reset: line }

/* タイトルから数えるときは :not(.line-title) を消してね */

.editor .line:not(.line-title) { counter-increment: line }

/* タイトルから数えるときは :not(.line-title) を消してね */

.app:not(.presentation) .editor .line:not(.line-title)::before {

content: counter(line);

position: absolute; display: inline-block; left: -110px; z-index: 10;

min-width: 50px; text-align: right; vertical-align: middle;

/* 行番号のフォントとか色とかの指定はここ */

font-family: monospace; color: grey }

/* カーソル行の行番号を濃く表示する */

.editor .line:not(.line-title)::before { opacity: .5 }

.editor .line.cursor-line:not(.line-title)::before { opacity: 1; font-weight: bolder } }