画像を並べて表示
↑この要望、「UserCSSでできそう」ってことなので挑戦してみたよ！
写真はぱくたそからお借りしました→ https://www.pakutaso.com/
基本の記法は
| （パイプ、縦線）で、 [| ここに画像URLを並べる] こんな感じに書けます。太字記法のアスタリスクの数で列数を変えられるようにしてみた。
一行に敷き詰め
[| [画像URL][画像URL][画像URL]…] 
横幅いっぱい1列並べ
[*| [画像URL][画像URL][画像URL]…] 3列並べ
[***| [画像URL][画像URL][画像URL]…] 5列並べ
[*****| [画像URL][画像URL][画像URL]…] ちなみに文字を囲むとこうなる😏
※この行、プレゼンモードで見ると文字化けしちゃう模様💀
2017-11-25 もう直ってた……だと……？
2017-11-26 CSSはこんな感じ。flex系のスタイルあんまし使ったことないから勉強になった！
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 }初出 2017-11-25
2018-08-04 表示が不正になってたの修正しました！いつからだったのか不明！ごめんね！