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

https://i.gyazo.com/da78df293f9e83a74b5402411e2f2e01.pnghttps://i.gyazo.com/da78df293f9e83a74b5402411e2f2e01.pnghttps://i.gyazo.com/da78df293f9e83a74b5402411e2f2e01.pnghttps://i.gyazo.com/da78df293f9e83a74b5402411e2f2e01.pnghttps://i.gyazo.com/da78df293f9e83a74b5402411e2f2e01.png

文字にも使える

1234567890

from Settings

/scrasobox/画像を並べて表示#5a18bf6396b90400007eff1c

使い方：

一行に敷き詰め: [| [画像URL][画像URL][画像URL]…]

横幅いっぱい1列並べ: [*| [画像URL][画像URL][画像URL]…]

3列並べ : [***| [画像URL][画像URL][画像URL]…]

5列並べ: [*****| [画像URL][画像URL][画像URL]…]

最後の2行を有効にした場合、通常ならエディタの横幅を超える複数の画像を1行に敷き詰めて表示すると、下に余白？ができてしまう問題

https://gyazo.com/95e93165eb8f0142722d360bbfd10b1c

でも本家ではなっていなさそう、、なぜだろう

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 .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) }

.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 }

文字サイズ固定化Mijinko_SD.icon

[* ]と[| ]を併用時に文字サイズを大きくする必要はないと思うので

code:style.css

.line .deco-\|.deco-\* > span{ font-size: 15px; line-height: 15px;}

もう公式で対応してしまったので、新しく使うことはない？yosider.icon

n列並べとかは一応あるか

Settings.icon

UserCSS.icon