settings
https://gyazo.com/4872d1335a8edd2812624c37a4561adb
code:style.css
@import url("/api/code/ePi5131/行高があると中黒の位置が壊れるのを直す/style.css");
中黒の位置が直るやつ
BesiegeDiscord日本coのコピー
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% }
code:style.css
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500&display=swap');
body {
background-image: URL('https://i.gyazo.com/4872d1335a8edd2812624c37a4561adb.png');
font-family: 'Noto Sans JP', sans-serif;
}
li.page-list-item {font-family: unset !important;}
これを赤くするやつ
code:style.css
.deco-\! {
color: #fff; /* 白文字 */
background-color: #ee6666; /* 赤背景 */
padding: 0.1em 0.2em 0.1em 0.2em;
}
ピン留めされたページを独立
code:style.css
.page-list-item.pin + .page-list-item:not(.pin) {
clear: both;
}
大量の画像を並べる場合
[| [画像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 } */
鉤括弧に展開されるリンク ePiさんのCSS参考
code:style.css
.line:not(.cursor-line) a:is(
href="/eex-75351753/(",
href="/eex-75351753/)"
) {
color: var(--page-text-color);
position: static;
line-height: 0;
font-size: 0;
}
.line:not(.cursor-line) ahref="/eex-75351753/("::before {
content: "[";
font-size: 15px;
}
.line:not(.cursor-line) ahref="/eex-75351753/)"::before {
content: "]";
font-size: 15px;
}
.line span> a:is(
href="/eex-75351753/(",
href="/eex-75351753/)"
) {
pointer-events: none;
}
/* このリンクを使ったページがhopにこれを出しちゃうのを抑制 */
.empy-links:has(
a:is(
href="/eex-75351753/(",
href="/eex-75351753/)"
)
) {
display: none !important;
}