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 ++++++++++-
 src/content/docs/whisper-moji-okosi.mdx | 40 ++++++++++++++++++++++-----------
 2 files changed, 39 insertions(+), 14 deletions(-)

(limited to 'src')

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>
diff --git a/src/content/docs/whisper-moji-okosi.mdx b/src/content/docs/whisper-moji-okosi.mdx
index 655687a..6b04153 100644
--- a/src/content/docs/whisper-moji-okosi.mdx
+++ b/src/content/docs/whisper-moji-okosi.mdx
@@ -1,5 +1,5 @@
 ---
-title: Whisper + AI で文字起こしを劇的に効率化する方法
+title: 無料・超高精度のWhisper + AIで文字起こしする方法
 description: OpenAI Whisperと生成AIを組み合わせた超高精度な文字起こしの方法。Google Colabを使えば無料・インストール不要で利用できます。
 ---
 
@@ -66,24 +66,38 @@ Whisperだけでも十分実用的ですが、文字起こし結果を **生成A
 
 Whisperで文字起こししたテキストをコピーし、以下のようなプロンプトとともに生成AIに渡します。
 
-> 以下は市議会の一般質問の文字起こしです。次のように整形してください：
->
-> - 誤字・脱字を文脈から判断して修正する
-> - 話者を特定し、発言の先頭に【話者名】を付ける
->   話者: 安竹洋平（質問者）、小林洋子（市長）、教育長（名前不明）
-> - 「えー」「あのー」などのフィラーは削除する
-> - 文意が通るように適宜句読点を補う
-> - 元の発言内容は変えないこと
->
-> [ここにWhisperの文字起こし結果を貼り付ける]
+<div class="whisper-quote">
+
+以下は市議会の一般質問の文字起こしです。次のように整形してください：
+
+- 誤字・脱字を文脈から判断して修正する
+- 話者を特定し、発言の先頭に【話者名】を付ける
+  話者: 安竹洋平（質問者）、小林洋子（市長）、教育長（名前不明）
+- 「えー」「あのー」などのフィラーは削除する
+- 文意が通るように適宜句読点を補う
+- 元の発言内容は変えないこと
+
+[ここにWhisperの文字起こし結果を貼り付ける]
+
+</div>
 
 ### 実例
 
 **Whisper出力（生）:**
-> いじめの重大事態に関してですよ専門家から重大事態としてこれを扱いなさいと扱った方がいいですよという助言を受けながらですね教育委員会としては重大事態として扱わなかったという事例があるんですが一般して最終的に重大事態として扱うことになったんですが
+
+<div class="whisper-quote">
+
+いじめの重大事態に関してですよ専門家から重大事態としてこれを扱いなさいと扱った方がいいですよという助言を受けながらですね教育委員会としては重大事態として扱わなかったという事例があるんですが一般して最終的に重大事態として扱うことになったんですが
+
+</div>
 
 **生成AIで整形後:**
-> 【安竹】いじめの重大事態に関してです。専門家から「重大事態として扱った方がいい」という助言を受けながら、教育委員会としては重大事態として扱わなかった事例があります。一旦は最終的に重大事態として扱うことになったのですが…
+
+<div class="whisper-quote">
+
+【安竹】いじめの重大事態に関してです。専門家から「重大事態として扱った方がいい」という助言を受けながら、教育委員会としては重大事態として扱わなかった事例があります。一旦は最終的に重大事態として扱うことになったのですが…
+
+</div>
 
 ### 議会での活用フロー
 
-- 
cgit v1.3.1