ソング：立ち絵の表示箇所は画像の中央の位置をキャラクターごとに揃える

[Hiroshiba]

内容

ソングは立ち絵が背景に表示されて、ちょっとエモイです。

ただ結構いろんなキャラクターによって横幅が違っており、キャラクターによっては左右が非対称で体を中央に持ってくるために空白のパディングを入れているキャラクターもいます。
現状は立ち絵が右端の枠にくっつく形で実装されているので、右にパディングがあるキャラクターだと結構ずれて表示されてるように見えます。

一番わかりやすいのが紅桜さんで、剣を左に持っているので右にパディングがあります。

これをどうにかして中央の位置を揃えられるとさらに統一感がありそう！

Pros 良くなる点

統一感が出る

Cons 悪くなる点

CSSの実装が大変かもしれない。

実現方法

ソングのキャラクター立ち絵を表示しているのはsrc/components/Sing/CharacterPortrait.vueです。

画像の左右の中央が右の端から数百ピクセルで固定になるようにすればいい気がするけど、CSS 的になかなか難しそう！
ちなみに現状、画面がサイズを縮小拡大したり縦幅を縮めたりしても画像が良い感じになるように設計されています。
これも崩さないようにしつつの変更になりそう！

その他

CSSにチャレンジしたい方いらっしゃったら是非 🙏