画像を並べて表示
一行に敷き詰める
[| [image_url][image_url][image_url]…]
https://gyazo.com/cbaae6f24a3a87b8fe02ae0bbdd08ae6https://gyazo.com/5c767870e917de6533258b5222d90a3dhttps://gyazo.com/5b016b77e239ffcbc2b283421c56504d
横幅いっぱいに並べる
テキストは中央揃えになる
[*| [image_url][image_url][image_url]…]
[*| This is a watch]
https://gyazo.com/cbaae6f24a3a87b8fe02ae0bbdd08ae6https://gyazo.com/5c767870e917de6533258b5222d90a3dhttps://gyazo.com/5b016b77e239ffcbc2b283421c56504d
This is a watch
n列並べ
全て同じ幅で画像を並べる
n <= 5
[***| [image_url][image_url][image_url]…]
https://gyazo.com/cbaae6f24a3a87b8fe02ae0bbdd08ae6https://gyazo.com/5c767870e917de6533258b5222d90a3dhttps://gyazo.com/5b016b77e239ffcbc2b283421c56504d
[*****| [image_url][image_url][image_url]…]
https://gyazo.com/cbaae6f24a3a87b8fe02ae0bbdd08ae6https://gyazo.com/5c767870e917de6533258b5222d90a3dhttps://gyazo.com/5b016b77e239ffcbc2b283421c56504dhttps://gyazo.com/cbaae6f24a3a87b8fe02ae0bbdd08ae6https://gyazo.com/5c767870e917de6533258b5222d90a3d
若干改変
code:style.css
/* マトリクス記法 */
.line:not(.cursor-line) .deco-\| {
display: inline-flex
}
.line .deco-\| {
font-size: initial !important;
}
.line .deco-\| img.image {
object-fit: contain
}
/* 太字記法と組み合わせて列数を変える */
.line strong .deco-\| {
flex-wrap: wrap;
padding: 0 !important;
width: 100%;
text-align: center;
}
.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 strong .deco-\| img.image {
width: 100%; height: 100%; margin: 0; object-fit: cover
}
.line strong .deco-\|:after {
display: none !important;
}
.line strong.level-1 .deco-\| {
display: inline-block;
}
.line .deco-\| > span, .line strong .deco-\| > span {
overflow: hidden
}
.line .deco-\| img.image, .line strong .deco-\| img.image {
padding: 2px
}
.line strong .deco-\*.deco-\| {
border: none !important;
}