中央に揃える文字装飾記法
code:style.css
.line:not(.cursor-line) .deco-\| { /* ここにある \| を \^ とかに変えると任意の記号にできる */
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
margin-top: -2em;
margin-bottom: -2em;
}
/* 画像の場合 flex-basis を指定 (スマートフォン向けの設定) */
.line:not(.cursor-line) .deco-\| span.modal-image {
flex-basis: fit-content;
}
code:style.css
/* |* というコンビネーションで書かれた場合は 強制的に一列にする */ /* いらなかったら消す */
.line:not(.cursor-line) .deco-\|.deco-\* { /* ここにある \* を \^ とかに変えると任意の記号にできる */
flex-wrap: nowrap;
}
code:style.css
/* ついでに画像は角丸にする */
/* いらなかったら消す */
.line .deco-\| img.image {
border-radius: 10px;
}
サンプル
文字を中央揃えするサンプル
code:txt
テキスト見本
テキスト見本
画像を中央揃えするサンプル
code:txt
https://gyazo.com/fd1b604898959955d0b52673a58194bd
文字を合わせるとキャプションみたいになる
https://gyazo.com/9b7c72c5999cec4f88f3fb7b82a90079 https://gyazo.com/9b7c72c5999cec4f88f3fb7b82a90079
小さい画像であれば収まる
https://gyazo.com/fd1b604898959955d0b52673a58194bd
文字を合わせるとキャプションみたいになる
https://gyazo.com/9b7c72c5999cec4f88f3fb7b82a90079 https://gyazo.com/9b7c72c5999cec4f88f3fb7b82a90079
小さい画像であれば収まる
横幅をはみ出た場合は Wrap する
code:txt
テキスト見本テキスト見本テキスト見本テキスト見本テキスト見本テキスト見本テキスト見本テキスト見本テキスト見本テキスト見本テキスト見本テキスト見本テキスト見本テキスト見本
https://gyazo.com/90b84694b7a3be05df0dd54f3dce0688https://gyazo.com/90b84694b7a3be05df0dd54f3dce0688https://gyazo.com/90b84694b7a3be05df0dd54f3dce0688https://gyazo.com/90b84694b7a3be05df0dd54f3dce0688https://gyazo.com/90b84694b7a3be05df0dd54f3dce0688https://gyazo.com/90b84694b7a3be05df0dd54f3dce0688
テキスト見本テキスト見本テキスト見本テキスト見本テキスト見本テキスト見本テキスト見本テキスト見本テキスト見本テキスト見本テキスト見本テキスト見本テキスト見本テキスト見本
https://gyazo.com/90b84694b7a3be05df0dd54f3dce0688https://gyazo.com/90b84694b7a3be05df0dd54f3dce0688https://gyazo.com/90b84694b7a3be05df0dd54f3dce0688https://gyazo.com/90b84694b7a3be05df0dd54f3dce0688https://gyazo.com/90b84694b7a3be05df0dd54f3dce0688https://gyazo.com/90b84694b7a3be05df0dd54f3dce0688
強制的に一列にする
code:txt
https://gyazo.com/90b84694b7a3be05df0dd54f3dce0688https://gyazo.com/90b84694b7a3be05df0dd54f3dce0688https://gyazo.com/90b84694b7a3be05df0dd54f3dce0688https://gyazo.com/90b84694b7a3be05df0dd54f3dce0688https://gyazo.com/90b84694b7a3be05df0dd54f3dce0688https://gyazo.com/90b84694b7a3be05df0dd54f3dce0688
* と組み合わせると一列に強制する
https://gyazo.com/90b84694b7a3be05df0dd54f3dce0688https://gyazo.com/90b84694b7a3be05df0dd54f3dce0688https://gyazo.com/90b84694b7a3be05df0dd54f3dce0688https://gyazo.com/90b84694b7a3be05df0dd54f3dce0688https://gyazo.com/90b84694b7a3be05df0dd54f3dce0688https://gyazo.com/90b84694b7a3be05df0dd54f3dce0688
* と組み合わせると一列に強制する
ref
これを 画像一枚でも行けるように, 文字でも行けるように改造