ろぼいんブログ
AmazonAmazon MusicChromeFirefoxHowToオーディオオープンソース拡張機能

Web版のAmazon Musicでレイアウトが崩れる・サムネイルが表示されないときの対処法

約1分で読めます

Web版のAmazon Musicでレイアウトが崩れ、アーティストや楽曲のサムネイルが表示されないという問題に遭遇しました。

この記事では、Amazon MusicのWeb版でレイアウトが崩れたり、サムネイルが表示されなかったりするときの対処法を解説します。

広告

発生した問題

Web版のAmazon Musicを使っていたところ、レイアウトが崩れ、アーティストや楽曲のサムネイルが表示されないという問題に遭遇しました。

Amazon MusicのWeb版のスクリーンショット。レイアとが崩れており、アーティストやアルバムのサムネイルが表示されていない

トップページのセクションのタイトルのレイアウトがずれ、アーティストのサムネイルはプレースホルダー画像になり、楽曲のサムネイルは空白になってしまっています。

WebブラウザーにはGoogle Chromeを使用していますが、Firefoxでも同様の問題が発生しました。

Amazonで商品を見る
※本サイト上で表示されるコンテンツの一部は、アマゾンジャパン合同会社またはその関連会社により提供されたものです。これらのコンテンツは「現状有姿」で提供されており、随時変更または削除される場合があります。価格および発送可能時期は表示された日付/時刻の時点のものであり、変更される場合があります。本商品の購入においては、購入の時点でAmazon.co.jpに表示されている価格および発送可能時期の情報が適用されます。このリンクを経由して商品を購入すると、当サイトの運営者が報酬を得ることがあります。詳細はこちら。

対処法

インストールしているさまざまな拡張機能をオン/オフしたところ、Dark Readerが原因だと判明しました。

Amazon MusicのWeb版はもともとダークモードに対応しているので、Dark Readerの除外設定を適用しましょう。

広告

Dark Readerの設定を開き、music.amazon.co.jpの部分をクリックしてチェックを外すことで、Amazon MusicではDark Readerが適用されなくなります。

Dark Reader拡張機能の設定画面。現在music.amazon.co.jpに適用中で、ダークモード設定、輝度・コントラストのスライダー、設定やヘルプボタンが表示されている

ページを再読み込みすると、崩れていたレイアウトが正常になり、アーティストや楽曲のサムネイルも表示されるようになります。

Amazon Musicのホーム画面。［My BGM］プレイリストとアニメ風イラストが中央に表示され、下部にはおすすめの楽曲と新作オーディオブックが並んでいる

記事をシェア

フォローして最新情報を入手

Googleの優先ソースに追加すると、このサイトの記事をGoogleで見つけやすくなります。また、ぜひXやRSSフィードもフォローしてください。

Googleの優先ソースとして追加するGoogleの優先ソースとして追加する
広告
著者のアイコン画像
ろぼいん
XMisskeyGitHubQiita

生まれた時から、母国語よりも先にJavaScriptを使っていました。ネットの海のどこにもいなくてどこにでもいます。

Webフロントエンドプログラマーとして、TypeScriptを用いたWebアプリやブラウザー拡張機能を制作。Xのシャドウバン検知ツール「Shadowban Scanner」やリンクカード復活ツール「Restore Link Card」を公開し、国内外のメディアで紹介されました。iGEM 2023ではJapan-UnitedチームのWikiを制作してGrand Prizeの獲得に貢献。ブログではXやSNSの最新ニュース、不具合の検証と対処法、フロントエンド開発の知見を発信しています。