カスタム CSS を使用して翻訳を自分好みにスタイル設定

翻訳を自分好みにスタイル設定 🎨

自分の翻訳が自分の読書の雰囲気にマッチしていればいいのにと思ったことはありませんか?就寝前の読書にはソフトなパステルカラーが必要で、勉強会には大胆なハイライトが必要ですか?

今はあなたがコントロールできます。 Read Frog のカスタム CSS 機能を使用すると、Web サイト上で翻訳がどのように表示されるかを正確にデザインできます。

カスタム スタイルが重要な理由 💡

デフォルトの翻訳スタイルは正常に機能します...機能しなくなるまでは。コンテンツが異なれば、異なる視覚的処理が必要になります。

新しい CSS エディターをご紹介します ⚡

テキスト ボックスを追加してそれで終わりというわけではありません。 Read Frog の CSS エディターは 正当に強力です。

あらゆる人のために構築

初心者向け:

• 🎨 カラーピッカー - 任意の色の値をクリックしてビジュアルピッカーを開きます
• ✅ ライブ検証 - 構文エラーに関する即時フィードバック
• 💡 スマートな提案 - 入力時に自動補完します
• 📝 テンプレートの例 - 実用的な例から始めます

上級ユーザー向け:

• ⚡ CSS の完全サポート - グラデーション、シャドウ、アニメーション、変数の使用
• 🔧 構文のハイライト - CodeMirror を搭載したエディター
• 📏 行番号と折りたたみ - 大きなスタイルシートを簡単にナビゲート
• 🎯 糸くずガッター - エラーを一目で確認できます

カラーピッカーの魔法 🌈

ここからが楽しいところです。 CSS 色を書くことは、かつては次のことを意味していました。

❌ 「カラーピッカー」でググる ❌ 16 進数コードのコピー ❌ タブの切り替え ❌ 正しく見えることを願っています

それでは? CSS の任意の色をクリックしてください:

1. 任意のカラー形式を入力または貼り付けます: #FF5733、rgb(255, 87, 51)、hsl(9, 100%, 60%)
2. クリックしてください - カラーピッカーがすぐに表示されます
3. 視覚的に調整 - ドラッグ、スライド、または新しい値を入力します
4. 完了 - リアルタイムで色を更新します

ピッカーは すべての CSS カラー形式を理解します。

• 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 ミリ秒のデバウンス)
• 🔴 赤色の「構文エラー」 - 何かが間違っています。役立つエラー メッセージが表示されます。

初めてのカスタム スタイルを作成する方法 🎯

所要時間は 2 分未満です:

1. Read Frog 設定を開く → 翻訳 → 翻訳表示スタイル
2. 「カスタム スタイルを使用」 をオンに切り替えます
3. CSS エディタが便利なテンプレートとともに表示されます。

/* Example: Custom style with color and background */
[data-read-frog-custom-translation-style='custom'] {
  color: #414535;
  background-color: light-dark(#F2E3BC, #C19875);
  padding: 2px 4px;
  border-radius: 4px;
}

4. カスタマイズしてください! カラー値をクリックしてピッカーを開き、パディングを調整し、境界線を追加します
5. 検証が緑色で表示されたら、[保存]をクリックします
6. 任意の Web サイトにアクセスして、翻訳してください - あなたのスタイルがすぐに適用されます!

[data-read-frog-custom-translation-style='custom'] {
  background-color: rgba(255, 247, 153, 0.3);
  border-left: 3px solid #FFD700;
  padding-left: 8px;
}

試してみたいスタイルのアイデア 💫

これらのスタイルを実際に見てみましょう。各例は、CSS が実際の翻訳されたテキストにどのような影響を与えるかを示しています。

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

1.ソフトパステルハイライト

最適な用途: 長時間の読書セッション、小説、ブログ

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

2. 大胆な学習モード

最適な用途: 教科書、研究論文、暗記

[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;
}

3. ホバー応答アニメーション

最適な用途: インタラクティブなデザインで、翻訳が生きているように感じられます。

[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);
}

4.クールなグラデーションアニメーション

最適な用途: 友達に自慢する

[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;
  color: transparent;
  animation: gradient-shift 2s ease-in-out infinite;
}

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

高度なトリック 🚀

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;
}

技術的な詳細 🔧

内部に何があるか知りたい人のために:

最良の結果を得るためのヒント 💡

避けるべき一般的な落とし穴:

❌ 禁止事項: color: #FF (不完全な 16 進コード) ✅ 実行: color: #FF5733 (6 桁の 16 進数)

❌ 禁止事項: padding: 10 (ユニットがありません) ✅ 実行: padding: 10px (ユニットを含む)

❌ 禁止事項: CSS を 200 行書く ✅ 推奨事項: 重要なプロパティ (色、背景、パディング、境界線) に焦点を当てます。

次は何ですか？ 🔮

私たちはすでにエキサイティングな追加を計画しています:

• 🎨 スタイル ライブラリ - コミュニティが作成したスタイルを参照してインポートします
• 📤 Export/Import - お気に入りのスタイルを友達と共有します
• 🎯 サイトごとのスタイル - ウェブサイトごとに異なるスタイル
• 📊 スタイル プレビュー パネル - 保存する前に変更を確認する