カスタム字幕スタイル

字幕スタイルのページではフォント、拡大率、太さ、色、背景の不透明度を設定できます。カスタム CSS はそこに届かない部分を担当します。必要になるまで訳文をぼかして隠す、下線を引く、原文を目立たなくする、字幕ボックスの形を変える、といったことです。

適用先は Read Frog の字幕オーバーレイだけです。ウェブページ翻訳には別のスタイルシートがあります（カスタム翻訳スタイル）。

エディタを開く

1. 設定 → 動画字幕を開きます。
2. スタイルを編集から字幕スタイルを開きます。
3. カスタム CSS までスクロールして開きます。
4. CSS を書きます。エディタ上部のプレビューが入力に合わせて更新されます。
5. 保存を押します。

保存はすでに開いているプレイヤーにも届くので、別タブに動画を出したまま保存のたびに結果を確認できます。エディタを空にして保存し直せば CSS は外れ、字幕は上の設定項目に戻ります。

プリセットテンプレートから始める

プリセットテンプレートのドロップダウンには、そのまま使える 3 つのブロックがあります。選ぶと既存の内容を置き換えずにエディタの末尾へ追記されるので、重ねられます。2 つ選べば訳文をぼかしながら原文を弱められます。

訳文をぼかす

まず聞き取り、あきらめたときだけ読む。ポインタをその行に乗せている間はぼかしが外れます。

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

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

訳文に破線

訳文を本文ではなく補助として見せます。

.subtitles-translation {
  text-decoration: underline dashed;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

原文を弱める

原文は残しつつ、視線が先にそちらへ行かないようにします。

.subtitles-main {
  opacity: 0.6;
}

使えるセレクタ

オーバーレイは意図的に小さく作られています。次の 3 つのクラス名は公開された取り決めで、名前が変わることはありません。

<div class="read-frog-subtitles-box">
  <div class="subtitles-main">Mr. Kamiya isn't confronting the world…</div>
  <div class="subtitles-translation" lang="zh" dir="ltr">神谷先生…</div>
</div>

訳文の行には、さらに 2 つの手がかりがあります。

• lang と dir は目標言語に追随するので、.subtitles-translation[lang='ja'] も .subtitles-translation[dir='rtl'] も使えます。
• 訳文がまだ返ってきていない間は data-pending="true" が付きます。

.subtitles-translation[data-pending='true'] {
  opacity: 0.35;
}

スタイル設定との関係

画面で選んだフォント、拡大率、太さ、色は CSS 変数として各行に渡され、スタイルシートの規則が宣言に変換します。あなたの CSS はその規則より後に注入されるため、普通の宣言で上書きできます。!important は不要です。

.subtitles-translation {
  color: #ffd479;
  font-weight: 600;
}

時間を使う前に知っておきたい例外が 2 つあります。

--rf-subtitle-* 変数ではなくプロパティを指定する

その 4 つの設定の裏にある変数は各行にインラインで書かれており、インライン宣言はあらゆるスタイルシート規則より優先されます。カスタム CSS に --rf-subtitle-color を書いても何も起きません。

/* 無視されます。変数はインラインで設定されています。 */
.subtitles-main { --rf-subtitle-color: #7cf; }

/* これは効きます。 */
.subtitles-main { color: #7cf; }

ボックスの背景には !important が要る

背景の不透明度も同じ理由でボックスにインラインで書かれています。カスタム CSS が強く出る必要があるのはここだけです。

.read-frog-subtitles-box {
  background-color: rgba(24, 20, 48, 0.85) !important;
  border-radius: 10px;
  padding: 8px 14px;
}

ボックスのそれ以外——余白、角丸、幅、揃え——は普通の宣言で足ります。

サイズは px ではなく em で

オーバーレイのルートのフォントサイズは動画の高さから算出されます。全画面でもミニプレイヤーでも字幕の比率が保たれるのはそのためです。行の 1em は「プレイヤーが本来使うサイズ」を意味し、px で書くと固定されて動画に追随しなくなります。

.subtitles-translation {
  font-size: 1.15em;
}

その他の例

ボックスをやめて文字を縁取る

明るい映像向けです。暗い下地のほうが字幕そのものより邪魔になる場面があります。

.read-frog-subtitles-box {
  background-color: transparent !important;
}

.subtitles-main,
.subtitles-translation {
  text-shadow:
    0 0 4px rgba(0, 0, 0, 0.95),
    0 1px 3px rgba(0, 0, 0, 0.9);
}

訳文を主役にする

原文を参照用に小さくし、重みを訳文に移します。

.subtitles-main {
  font-size: 0.75em;
  opacity: 0.65;
}

.subtitles-translation {
  font-size: 1.1em;
  font-weight: 600;
}

長い行を左揃えにする

3 行に折り返す字幕では、中央揃えは読みにくくなります。

.read-frog-subtitles-box {
  max-width: 70%;
  text-align: left;
}

言語ごとの書体

複数の目標言語で読んでいて、それぞれをきれいに見せたいときに便利です。

.subtitles-translation[lang='ja'] {
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
}

.subtitles-translation[dir='rtl'] {
  font-size: 1.05em;
}

適用範囲と制限

オーバーレイはプレイヤー内の shadow root で描画されます。この境界があるので CSS がページへ漏れません。同時に、何が静かに無効になるかもこの境界が決めます。

• 有効で、オーバーレイ内にとどまるもの： @keyframes、@media、@supports、トランジション、擬似クラス、自分で定義した CSS 変数。
• 無視されるもの： @font-face と @property。shadow root はどちらも登録できないため、自前で読み込まずシステムにあるフォントを選んでください。
• 何にも一致しないもの： :root と body。オーバーレイ内にページ全体の要素はありません。上の 3 つのクラスを使ってください。
• 届かないもの： YouTube プレイヤーのコントロール、その背後のページ、標準の字幕。カスタム CSS は字幕オーバーレイの外を装飾できません。
• サイズ上限： 8 KB。エディタは入力しながら構文を検査し、CSS が不正または長すぎる間は保存を無効にします。

/* アニメーションは問題なく、外へは出ません。 */
@keyframes rf-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.subtitles-translation {
  animation: rf-fade-in 0.2s ease-out;
}

トラブルシューティング

• 保存しても変わらない： ステータスが CSS は有効です、ボタンが保存済みになっているか確認し、規則が 3 つのクラス名のいずれかを指しているか見直します。
• ボックスの背景色が効かない： !important を付けます。不透明度の設定がそのプロパティをインラインで書いています。
• --rf-subtitle-* の上書きが効かない： 代わりに color、font-size、font-family、font-weight を直接指定します。
• 全画面にすると文字サイズが飛ぶ： その font-size を px から em に変えます。
• フォントがまったく反映されない： @font-face はオーバーレイ内では動きません。システムにインストール済みのフォントを使ってください。
• 保存が押せない： 構文エラーがあるか、スタイルシートが 8 KB を超えています。
• 表示が壊れて見える： エディタを空にして保存します。CSS はすぐに外れ、スタイル設定が元どおり効きます。

カスタム CSS は他の設定と一緒に保存され、設定のエクスポートにも含まれます（設定、同期、バックアップ）。オーバーレイのそれ以外については動画字幕をご覧ください。