スマホなどの幅狭の環境で表示したときに、全角カタカナの含まれるセットのある行のみ表示が崩れてしまっていたので、対策として半角カタカナに変更しました。現在のところ原因は不明なので、HTMLやCSSに詳しい方で原因が分かる方がいらっしゃれば再変更をお願いします。
ついでに楽園の絶花の画像も更新しました。
通報 ...
スマホなどの幅狭の環境で表示したときに、全角カタカナの含まれるセットのある行のみ表示が崩れてしまっていたので、対策として半角カタカナに変更しました。現在のところ原因は不明なので、HTMLやCSSに詳しい方で原因が分かる方がいらっしゃれば再変更をお願いします。
ついでに楽園の絶花の画像も更新しました。
こういうことよね
おそらくtd style="vertical-align:top;text-align:center; width:128px;"とHTML側で指定してるから、横幅が768px超えた辺りで可変サイズに切り替わり、max-widthじゃないから割合にならないことに起因、つまるところ「剣闘士のフィナーレ」が文字数クソ長いからだと思われます。(そのため9pxの版を一応作ってはいた)
★5と★4を#responsive_layout_containerで横並べにしつつ、4列くらいに収めれば解決しそうではあるけどその方がいいかな?
金メッキでも同様の現象が起きるので、文字数以外にも何かありそうな感じがしたんですよね。編集が苦でなければレスポンシブルレイアウトでも良いと思います。
上のコメントの後responsiveやflexを一度砂場の方で試してみたけど思い通りの挙動にならなかったですね、HTMLでstyle上書きするwikiの仕様上どうしようもなさそうです。最悪こんな風に(通過なのでクリックして見ていただければ)HoyoWikiから開発者ツールでwebp格納しているファイルからデータ借用して、Photoshopで文字を付け加える事も考えたんですけど、ダウンロード時に.pngになってるから拡張子書き換えてPSに持っていって文字入れて、って考えると正直編集コストに見合わない感。
画像サイズが96x96だから96*6でも576になるからそれかな? 64x64で5列ならiPhone SE(2Gen)のwidth:375pxでも思い通りに表記はできそう
256 64で考えてみた
採用かどうかはともかく上の画像すきだわ