翻訳表示スタイル

設定のページ翻訳 → 翻訳表示スタイルを開きます。変更するとプレビューにすぐ反映されます。

プリセットのスタイル

スタイル	見た目
なし	原文と同じ普通のテキスト
テキストカラー	訳文をアクセントカラーで表示（既定）
背景	訳文の後ろに淡いハイライト
弱化	訳文を原文より薄く表示
ぼかし効果	ホバーするまでぼかして、自分を試す
引用	引用文のように左側に線
破線	破線の下線
枠線	訳文を細い枠で囲む

自分の CSS

カスタム CSS スタイルを使用をオンにして、エディターに CSS を書きます。訳文には data-read-frog-custom-translation-style="custom" という属性が付いているので、ルールはこのセレクターで始めます。

[data-read-frog-custom-translation-style='custom'] {
  color: #414535;
  background-color: light-dark(#f2e3bc, #c19875);
  padding: 2px 4px;
  border-radius: 4px;
}

エディターは入力中に CSS をチェックし、保存で保存します。フォント、トランジション、アニメーションなど、どんな CSS でも使えます。

アイデア

ホバーするまで訳文を隠す：

[data-read-frog-custom-translation-style='custom'] {
  filter: blur(5px);
  transition: filter 0.2s;
}

[data-read-frog-custom-translation-style='custom']:hover {
  filter: none;
}

訳文に付く lang 属性を使って、特定の言語だけフォントを変える：

[data-read-frog-custom-translation-style='custom']:lang(ja) {
  font-family: "Hiragino Mincho ProN", serif;
}

light-dark() は明るいページでは 1 つ目の色、暗いページでは 2 つ目の色を選ぶので、1 つのルールで両方に対応できます。