UserCSS:画像配置
style.css /* 画像配置のいろいろな設定 */
/* [, 画像]で画像を左寄せにする */
.line .text, .stream .line { clear: both; overflow: hidden; }
.line .deco-\, img.image { float: left; margin-right: .5em; }
.stream .line .deco\, img.image { float: none; margin-right: 0; }
/* [. 画像]で画像を右寄せにする */
.line .text, .stream .line { clear: both; overflow: hidden }
.line .deco-\. img.image { float: right; margin-left: .5em }
.stream .line .deco\. img.image { float: none; margin-left: 0 }
/* 画像のサイズを変える */
.level-1 img {
display: none !important;
}
.level-2 img {
width: 16.7%; max-height: none; }
.level-3 img {
width: 33%; max-height: none; }
.level-4 img {
width: 50%; max-height: none; }
.level-5 img {
width: 83.3%; max-height: none; }
.level-6 img {
width: 100%; max-height: none; }
/* マトリクス記法 */
.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%;
}
