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

編集会議 / 130

199 コメント

views

1 フォロー

130

FrontPageの使徒表がスマホで表示したときにガタガタに見えるのが気になっています。

(手持ちの端末で見えているイメージをPC Chromeの横幅を狭めて再現しています。)

最初は>> 127と関連して画像のサイズがまちまちなので発生していると予想していたのですが、試した感じ使徒名の禁則処理(エ"シュー"ル、エル"フィ"ンなど)の有無や位置が関わっているような気がします。

|CENTER:110|CENTER:110|CENTER:110|CENTER:110|CENTER:110|c
|[[&ref(エシュール.jpg);>エシュール]]|[[&ref(エルフィン.jpg);>エルフィン]]|[[&ref(カレン.jpg);>カレン]]|[[&ref(キュウイ.jpg);>キュウイ]]|[[&ref(クロエ.jpg);>クロエ]]|
|''[[エシュール]]''|''[[エシュール]]''|''[[エシュール]]''|''[[エシュール]]''|''[[エシュール]]''|
&br;
|CENTER:110|CENTER:110|CENTER:110|CENTER:110|CENTER:110|c
|[[&ref(エシュール.jpg);>エシュール]]|[[&ref(エシュール.jpg);>エルフィン]]|[[&ref(エシュール.jpg);>カレン]]|[[&ref(エシュール.jpg);>キュウイ]]|[[&ref(エシュール.jpg);>クロエ]]|
|''[[エシュール]]''|''[[エルフィン]]''|''[[カレン]]''|''[[キュウイ]]''|''[[クロエ]]''|

何か回避する方法は無いでしょうか…？

ソース表示通報 ...

137
名前なし 2026/02/22 (日) 03:46:57 46102@cfcea >> 130
表組みの仕様上は改善できないと思う。
やるなら以下のように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

名前なし 2026/02/23 (月) 06:51:22 f352b@4c5d3 >> 137

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

これについては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文字が重なっている名前は太りやすいようです…

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

編集会議 / 130

最新トピック