トリッカル・もちもちほっぺ大作戦

編集会議 / 137

199 コメント

views

137

表組みの仕様上は改善できないと思う。
やるなら以下のようにcssで画像の大きさを固定するとか
これもスマホ表示だと画像が大きくなって視認性損なうから一長一短だが

#cssbox("max-width:650px;margin:0 auto;"){{{{{{
#flex_container(flex-start){{{{{
#flex_box{{{{
#cssbox("width:100px;text-align:center;"){{{
[[&ref(エシュール.jpg,,96x96);>エシュール]]
''[[エシュール]]''&br;
}}}
}}}}
#flex_box{{{{
#cssbox("width:100px;text-align:center;"){{{
[[&ref(エルフィン.jpg,,96x96);>エルフィン]]
''[[エルフィン]]''&br;
}}}
}}}}
#flex_box{{{{
#cssbox("width:100px;text-align:center;"){{{
[[&ref(カレン.jpg,,96x96);>カレン]]
''[[カレン]]''&br;
}}}
}}}}
}}}}}
}}}}}}

ソース表示通報 ...

141

これもスマホ表示だと画像が大きくなって視認性損なうから一長一短だが

これについてはflex_containerにnowrap指定をしてmax-widthに変えることで、幅を等分割しながら画像も縮んでくれるようにできるようです。

#flex_container(flex-start,,nowrap){{{{{
#flex_box{{{{
#cssbox("max-width: 100px; text-align: center;"){{{
[[&ref(エシュール.jpg);>エシュール]]
''[[エシュール]]''
}}}
}}}}
#flex_box{{{{
#cssbox("max-width: 100px; text-align: center;"){{{
[[&ref(エルフィン.jpg);>エルフィン]]
''[[エルフィン]]''
}}}
}}}}
#flex_box{{{{
#cssbox("max-width: 100px; text-align: center;"){{{
[[&ref(カレン.jpg);>カレン]]
''[[カレン]]''
}}}
}}}}
#flex_box{{{{
#cssbox("max-width: 100px; text-align: center;"){{{
[[&ref(キュウイ.jpg);>キュウイ]]
''[[キュウイ]]''
}}}
}}}}
#flex_box{{{{
#cssbox("max-width: 100px; text-align: center;"){{{
[[&ref(クロエ.jpg);>クロエ]]
''[[クロエ]]''
}}}
}}}}
}}}}}

143

名前なし 2026/02/24 (火) 12:10:51 46102@cfcea >> 137

これは綺麗に整形できていいですね
これに修正してもいいと思います
145

名前なし 2026/02/25 (水) 23:34:48 799ef@ef85e >> 137

下書きに試しに置いてみました。
モバイル環境に限り、5人埋まっている時に画像が小さくなりすぎて、3人とかとバランスが取れない感じになってしまいました。
直せる有識者の方いらっしゃいましたら是非お願いします…
146

名前なし 2026/02/26 (木) 01:11:25 f352b@4c5d3 >> 137

モバイル環境に限り、5人埋まっている時に画像が小さくなりすぎて、3人とかとバランスが取れない感じになってしまいました。

これについては空の枠用の画像を用意して、5枠に満たない行はフィラーとしてそれで埋めればよいかなと思っていました。(下書きに置いてみました。)

あとは「シオン・ザ・DB」など使徒名の字数が多い場合に改行が入ると高さに統一がとれないのも困りそうです。
また、やはり「エシュール」のような禁則処理対象2文字が重なっている名前は太りやすいようです…

トリッカル・もちもちほっぺ大作戦

編集会議 / 137

最新トピック