From 03f776b3d2294f6db5b4b29687c3051a1388e639 Mon Sep 17 00:00:00 2001
From: Yasutake Yohei <61961825+yasutakeyohei@users.noreply.github.com>
Date: Thu, 25 Jun 2026 12:05:09 +0900
Subject: Whisperページ: タイトルにAI追加、画像枠修正、引用ブロック視認性改善
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- タイトルを「無料・超高精度のWhisper + AIで文字起こしする方法」に
- Astro スコープを is:global に修正し画像枠線が全画像に適用されるように
- プロンプト例・実例の引用ブロックに背景色+左ボーダーを追加
---
 src/components/WhisperStyles.astro | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

(limited to 'src/components/WhisperStyles.astro')

diff --git a/src/components/WhisperStyles.astro b/src/components/WhisperStyles.astro
index 98bf2ab..e18d01c 100644
--- a/src/components/WhisperStyles.astro
+++ b/src/components/WhisperStyles.astro
@@ -1,4 +1,4 @@
-<style>
+<style is:global>
   .whisper-img {
     border: 1px solid var(--sl-color-gray-4);
     border-radius: 6px;
@@ -21,4 +21,15 @@
   .whisper-transcript strong:last-of-type {
     margin-top: 1rem;
   }
+  /* 引用ブロック：背景色で本文と区別 */
+  .whisper-quote {
+    background: var(--sl-color-gray-7);
+    border-left: 3px solid var(--sl-color-accent);
+    border-radius: 0 6px 6px 0;
+    padding: 0.75rem 1rem;
+    margin: 0.75rem 0;
+  }
+  .whisper-quote p {
+    margin: 0.25rem 0;
+  }
 </style>
-- 
cgit v1.3.1