settings - 手羽先工房研究開発部資料室

settings

https://scrapbox.io/files/6370a6f276b0ee0023157e9e.png

画像サイズを変えるやつ

code:style.css

/* 画像サイズ変更 */

.level-1 img { width: 16.7% }

.level-2 img { width: 33.3% }

.level-3 img { width: 50.0% }

.level-4 img { width: 66.7% }

.level-5 img { width: 83.3% }

.level-6 img { width: 100.0% }

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500&display=swap');

body {

background-image: URL('https://scrapbox.io/files/6370a6f276b0ee0023157e9e.png');

background-attachment: fixed;

font-family: 'Noto Sans JP', sans-serif;

}

li.page-list-item {font-family: unset !important;}

https://scrapbox.io/files/6370a6f276b0ee0023157e9e.png

これを赤くするやつとこれを青くするやつ（「! 〇✕で赤」、「# 〇✕で青」）

code:style.css

.deco-\! {

color: #fff; /* 白文字 */

background-color: #ee6666; /* 赤背景 */

padding: 0.1em 0.2em 0.1em 0.2em;

}

.deco-\# {

color: #fff; /* 白文字 */

background-color: #7777FF; /* 緑背景 */

padding: 0.1em 0.2em 0.1em 0.2em;

}

中央寄せと右寄せ

中央寄せと

右寄せ

code:style.css

/* 中央寄せ */

.deco-\< { position: absolute; width: 100%; text-align: center }

/* 右寄せ */

.deco-\> { position: absolute; width: 100%; text-align: right }

ピン留めされたページを独立

code:style.css

/* ピン止めされたページを先に表示 */

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

grid-column-start: 1;

}

大量の画像を並べる場合

[| [画像url][画像url][画像url]] 横長にトリミングして縦並べ

[***| [画像url][画像url][画像url]] 横に3個ずつ並べる

[*****| [画像url][画像url][画像url]] 横に5個ずつ並べる

code:style.css

/* マトリクス記法 */

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

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

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

.line class^="level" .deco-\| { flex-wrap: wrap }

.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 class^="level" .deco-\| img.image { object-fit: cover; width: 100%; height: 100% }

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

.line .deco-\| > span, .line class^="level" .deco-\| > span { overflow: hidden }

.line .deco-\| img.image, .line class^="level" .deco-\| img.image { margin: .2em }