Amazon PrimeVideoの字幕が見づらい

/ 2023.12.10 /

最初からなのか途中からなのか、このあいだPrimeVideoで映画を観ているときにやたらと主張が激しい字幕表示が気になった。

ので、chromeの拡張機能でなんとかすることにした。
外部CSSを導入できる「stylus」を追加したうえで、以下のCSSを追加した。

/* amazon prime 字幕文字サイズ調整*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500;600&display=swap');

.atvwebplayersdk-captions-text {
  font-family: 'Noto Sans JP', sans-serif !important;
  font-size: 3.5vw !important;
  margin-bottom: -5%;
  line-height: 1.3;
  background: none !Important;
  text-shadow: 3px 3px 5px  rgba(0,0,0,0.95), -3px -3px 5px  rgba(0,0,0,0.95),  -3px 3px 5px  rgba(0,0,0,0.95),  3px -3px 5px  rgba(0,0,0,0.95) !important;
  font-weight: 500;
}


@media (min-width: 2600px) {
  .atvwebplayersdk-captions-text {
    font-size: 2.2vw !important;
    font-weight: 600;
  }
}

調整内容としては、細めのサンセリフではなく気持ち太めのウェイトのNotoSansにした上で、黒背景ではなく袋文字に変更した。さらに僕はウルトラワイドモニタを使っているので、メディアクエリでウルトラワイドモニタ全画面表示時に自分が見やすいバランスに調整した。

Amazon PrimeVideoの字幕が見づらい

before

after