#291 の不具合を修正

[shinyoshiaki]

変更内容

291 の不具合を修正

ミュージックリストの挙動を調整

確認事項

• [x] PR を作成する前に、 https://github.com/omegasisters/homepage の最新の master を取り込み済みである。
  • Conflict や他の方の変更で自分の変更が動かなくなる可能性を防ぎます。
  • 最新の master を取り込む方法
  • upstream に fork 元リポジトリを追加
    • git remote add upstream git@github.com:omegasisters/homepage.git
  • 現在のブランチに upstream の master を取り込む
    • $ git pull --rebase upstream master
  • おまけ
  • rebase 後に再度 push する場合、 --force-with-lease オプションをつける
    • git push --force-with-lease origin <ブランチ名>
• [x] 動作確認済みである。
  • 何らかの理由で本番に取り込まれるまで確認できない場合はその旨を補足に記載する。
• [x] prettier によるコード整形を行った、もしくは画面に関係ない変更である。
  • 可能な方のみで良いと思いますが、意図せず他の方がフォーマットするとコード差分が増えすぎるので自分の分は自分でやるのがよろしいかと思います。
• [x] スマホ（狭い画角）でも表示を確認した、もしくは画面に関係ない変更である。
• [x] 他の方の変更を意図せず削除・変更していないか、差分をもう一度確認した。
• [x] 破壊的な変更を行った場合、影響範囲をもう一度確認した。もしくは破壊的な変更を行っていない。

補足

[tatt61880]

291 で 「クエリパラメータ無しにしても不都合がないようであれば、とりあえずクエリパラメータ無しにすると良いかもしれません。」 と書きましたが、クエリパラメータ無しの方の画像は画像上部と下部に黒い部分があるため、見た目が変わることに気付きました。

画像の大きさも(高さだけでなく横幅も)変わっているので、それも考慮する必要があるかもしれません。

可能であれば、元の画像(webp形式?)と同じサイズのjpg形式の画像を用意するのが良いかもしれません。 (既にあるのであればそれを使うのが良いと思います。)

[shinyoshiaki]

webp優先で、非対応ブラウザではpngにフォールバックするようにしました、safariだと画像の見た目が変わると思いますが、そこは妥協しようかと思います。 @tatt61880 マージされたらお手隙な時に動作確認してもらえると助かります！

[omegasisters]

👍