カスタム翻訳スタイル

概要

Read Frog を使用すると、独自の CSS スタイルを使用して、Web ページ上での翻訳の表示方法をカスタマイズできます。これにより、色、背景、境界線、アニメーションなどを完全に制御できるようになります。

すべての翻訳にスタイルをグローバルに適用したり、特定の言語やテキストの方向をターゲットにしたりできます。たとえば、中国語、日本語、韓国語の翻訳に異なるフォントを使用したり、アラビア語やヘブライ語などの右から左に記述する言語のレイアウトを調整したりできます。

カスタム CSS の有効化

Read Frog 設定を開く
翻訳 → 翻訳表示スタイル に移動します
「カスタムスタイルを使用」 をオンに切り替えます
CSS エディターがデフォルトのテンプレートとともに表示されます。

CSS セレクター

基本セレクター

すべてのカスタムスタイルは、特定のセレクターをターゲットにする必要があります。

[data-read-frog-custom-translation-style='custom'] {
  /* Your styles here */
}

このセレクターは、ページ上のすべての翻訳されたテキスト要素に適用されます。

ラッパーセレクター

翻訳されたコンテンツは、言語と方向の属性を持つコンテナーにラップされます。

<span class="read-frog-translated-content-wrapper" lang="zh" dir="ltr">
  <span data-read-frog-custom-translation-style="custom">神谷先生...</span>
</span>

特定の言語または方向をターゲットにすることができます。

/* Target Chinese translations */
.read-frog-translated-content-wrapper[lang='zh'] [data-read-frog-custom-translation-style='custom'] {
  /* Styles for Chinese */
}

/* Target RTL languages */
.read-frog-translated-content-wrapper[dir='rtl'] [data-read-frog-custom-translation-style='custom'] {
  /* Styles for right-to-left text */
}

エディターの機能

構文の強調表示

エディターは CodeMirror 6 を使用し、以下を提供します。

色分けされた CSS 構文
行番号
大きなスタイルシートのコードの折りたたみ
自動インデント

カラーピッカー

エディターで任意の色の値をクリックすると、インタラクティブなカラーピッカーが開きます。

#FF5733、rgb(255, 87, 51)、hsl(9, 100%, 60%) などの色の値をクリックします。
ビジュアルピッカーが即座に表示されます
スライダーまたは入力フィールドを使用して調整します
変更はリアルタイムで更新されます

サポートされているカラー形式:

16 進数: #FF5733
RGB/RGBA: rgba(255, 87, 51, 0.8)
HSL/HSLA: hsla(9, 100%, 60%, 0.8)
Named colors: tomato, skyblue, gold
CSS 変数: var(--my-color)

ライブ検証

エディターは、保存する前に CSS を検証します。

有効 (緑): CSS は構文的に正しく、保存する準備ができています。
検証中 (グレー): 変更を確認中 (500 ミリ秒のデバウンス)
エラー (赤): 構文エラーが検出され、エラーメッセージが表示されました

検証チェック:

構文エラー (タイプミス、括弧の欠落)
プロパティ名の有効性
セレクターの正確性
サイズ制限 (最大 8KB)

基本的な CSS の例

'@/components/css-style-preview' からをインポートします

シンプルなフォントの色

[data-read-frog-custom-translation-style='custom'] {
  color: blue;
}

枠あり

[data-read-frog-custom-translation-style='custom'] {
  color: #414535;
  background-color: #F2E3BC;
  padding: 2px 4px;
  border-radius: 4px;
  border-left: 3px solid #FFD700;
}

大胆な学習モード

[data-read-frog-custom-translation-style='custom'] {
  background-color: #FFF59D;
  color: #000;
  font-weight: 600;
  border: 2px solid #FFD54F;
  padding: 6px 10px;
  border-radius: 4px;
}

高度なテクニック

カスタムフォント

すべての翻訳のフォントを変更します。

[data-read-frog-custom-translation-style='custom'] {
  font-family: "Georgia", "Times New Roman", serif;
  font-size: 16px;
  color: #2c3e50;
}

言語固有のスタイル設定

ラッパーの lang 属性を使用して、特定の言語での翻訳をターゲットにします。

/* Chinese translations with traditional serif font */
.read-frog-translated-content-wrapper[lang='zh'] [data-read-frog-custom-translation-style='custom'] {
  font-family: "Kaiti SC", "STKaiti", "KaiTi", "华文楷体", serif;
  color: #8B4513;
}

/* Japanese translations */
.read-frog-translated-content-wrapper[lang='ja'] [data-read-frog-custom-translation-style='custom'] {
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
}

/* Korean translations */
.read-frog-translated-content-wrapper[lang='ko'] [data-read-frog-custom-translation-style='custom'] {
  font-family: "Nanum Myeongjo", "Batang", serif;
}

方向別のスタイル設定

テキストの方向に基づいて翻訳のスタイルを設定します (アラビア語、ヘブライ語などの RTL 言語に役立ちます)。

/* Right-to-left languages */
.read-frog-translated-content-wrapper[dir='rtl'] [data-read-frog-custom-translation-style='custom'] {
  border-right: 3px solid #9C27B0;
  border-left: none;
  padding-right: 10px;
  font-family: "Traditional Arabic", "Arial", sans-serif;
  font-size: 15px;
}

/* Left-to-right languages */
.read-frog-translated-content-wrapper[dir='ltr'] [data-read-frog-custom-translation-style='custom'] {
  border-left: 3px solid #2196F3;
  padding-left: 10px;
}

CSS 変数

再利用可能な値を定義します。

[data-read-frog-custom-translation-style='custom'] {
  --highlight-color: #FFE082;
  --border-color: #FFA726;

  background-color: var(--highlight-color);
  border-left: 4px solid var(--border-color);
  padding: 4px 10px;
}

Light/Dark モードのサポート

テーマの自動適応には light-dark() 関数を使用します。

[data-read-frog-custom-translation-style='custom'] {
  background-color: light-dark(#FFF9C4, #4A4A2A);
  color: light-dark(#333, #E0E0E0);
  border: 1px solid light-dark(#FFD54F, #8D7B3A);
  padding: 5px 10px;
  border-radius: 4px;
}

ホバー効果

[data-read-frog-custom-translation-style='custom'] {
  color: #0277BD;
  transition: color 0.2s ease-out, transform 0.2s ease-out;
}
[data-read-frog-custom-translation-style='custom']:hover {
  color: #01579B;
  transform: translateX(2px);
}

アニメーション

[data-read-frog-custom-translation-style="custom"] {
  background: linear-gradient(90deg, #1fe5e1 0%, #a855f7 50%, #0ad6ff 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-shift 2s ease-in-out infinite;
}

@keyframes gradient-shift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

ベストプラクティス

やるべきこと✅

シンプルなスタイルから始めて、徐々に複雑さを加えていきます
複数の Web サイトでテストする
読みやすさを維持するために、不透明度の低い背景を使用します
長さの値の単位を含めます: padding: 10 ではなく padding: 10px
完全な 16 進コードを使用します: #FF ではなく #FF5733

してはいけないこと ❌

!important を避ける (セレクターの特異性がすでに高い)
過度に複雑なスタイルは記述しないでください (重要なプロパティに焦点を当てます)
8KBのサイズ制限を超えないようにしてください
ユニットの欠落や不完全なカラーコードを避ける

共通のプロパティ

プロパティ	目的	例
`color`	文字の色	`color: #333;`
`background-color`	背景色	`background-color: #FFF59D;`
`padding`	内部間隔	`padding: 4px 8px;`
`border`	ボーダースタイル	`border: 1px solid #FFD54F;`
`border-radius`	丸い角	`border-radius: 4px;`
`font-weight`	テキストの太さ	`font-weight: 600;`
`font-size`	文字サイズ	`font-size: 14px;`
`text-decoration`	下線など	`text-decoration: underline;`
`opacity`	透明性	`opacity: 0.8;`
`transition`	アニメーションのタイミング	`transition: color 0.2s ease-out;`

技術的な制限

最大サイズ: 8KB (8,192 文字)
編集者: CodeMirror 6
検証: CSS ツリーパーサー
セレクター: [data-read-frog-custom-translation-style='custom'] を使用する必要があります
ラッパークラス: 翻訳は lang および dir 属性を持つ .read-frog-translated-content-wrapper でラップされます。
利用可能な属性: lang (ISO 639-1 言語コード) および dir (ltr/rtl))