字幕をカスタム CSS で、自分らしい見た目に

見方に合わせて、字幕も変えられるように

これまでの字幕スタイルでは、フォント、サイズ、太さ、色、背景の透明度を調整できました。普段の視聴には十分でも、二言語字幕の使い方をすべてカバーできるわけではありません。

リスニング練習なら、必要になるまで翻訳を隠したいことがあります。原文ばかり見てしまうなら、原文を薄くできます。映像が賑やかなときは、背景を強くしたり、間隔や小さなアニメーションを加えたりしたくなるかもしれません。

Read Frog 1.46.5 では、動画字幕のスタイルにカスタム CSS が加わりました。リアルタイムプレビューと 3 つのプリセットがあり、まずはワンクリックで試し、必要なときだけコードを編集できます。

まずはプリセットから

メニューを開き、目的に近いものを選びます。

プリセットは通常の CSS としてエディターに追加されます。適用後も値を自由に変更でき、複数を組み合わせることもできます。

結果を見ながら編集

入力に合わせてプレビューが更新されます。保存を繰り返したり、設定と動画のタブを行き来したりせず、実際の字幕と同じ構造で効果を確認できます。

エディターにはシンタックスハイライトと検証機能があります。正しい CSS は明確に確認でき、構文エラーや長すぎるスタイルシートは保存前に止められます。保存は明示的なので、書きかけの試行が誤って字幕スタイルになることもありません。

従来のスタイル設定もそのまま使えます。カスタム CSS は選択したフォント、サイズ、太さ、色、背景の上に適用され、上書きに !important は不要です。

3 つのクラスで字幕全体を指定

覚えるクラスは 3 つだけです。

Blur translation プリセットは、次の CSS です。

.subtitles-translation {
  filter: blur(6px);
  transition: filter 0.15s ease;
}

.subtitles-translation:hover {
  filter: none;
}

スタイルシートは Read Frog の字幕レイヤー内に隔離され、YouTube ページ自体には影響しません。プレビューも実際の字幕と同じ境界とクラス構造を使っています。

使い方

1. Read Frog 設定 → 動画字幕 → 字幕スタイルを開きます。
2. ページ下部のカスタム CSSに進みます。
3. プリセットを選ぶか、プレビューを見ながら CSS を入力します。
4. 検証が通ったら保存を選びます。

字幕のカスタム CSS は Read Frog 1.46.5 で利用できます。アップデート後に別のスイッチを有効にする必要はありません。