Whisperページ: 画像に枠線追加、文字起こし例の視認性を改善

- 画像に枠線（border-radius 6px）を付けて本文と区別
- 文字起こし例を背景色付きブロックに変更、各例にラベル追加
- MDX の <style> 制約を回避するため WhisperStyles コンポーネントを分離
- このスタイルはWhisperページのみに適用

2 files changed, 49 insertions, 17 deletions

diff --git a/src/components/WhisperStyles.astro b/src/components/WhisperStyles.astro
new file mode 100644
index 0000000..98bf2ab
--- /dev/null
+++ b/src/components/WhisperStyles.astro
@@ -0,0 +1,24 @@
+<style>
+  .whisper-img {
+    border: 1px solid var(--sl-color-gray-4);
+    border-radius: 6px;
+    max-width: 100%;
+    display: block;
+    margin: 0.75rem 0;
+  }
+  .whisper-transcript {
+    background: var(--sl-color-gray-7);
+    border-left: 3px solid var(--sl-color-gray-3);
+    border-radius: 0 6px 6px 0;
+    padding: 1rem 1.25rem;
+    margin: 1rem 0;
+    font-size: 0.95rem;
+    line-height: 1.8;
+  }
+  .whisper-transcript :is(p, strong) {
+    margin: 0 0 0.5rem;
+  }
+  .whisper-transcript strong:last-of-type {
+    margin-top: 1rem;
+  }
+</style>
diff --git a/src/content/docs/whisper-moji-okosi.mdx b/src/content/docs/whisper-moji-okosi.mdx
index 34793d1..655687a 100644
--- a/src/content/docs/whisper-moji-okosi.mdx
+++ b/src/content/docs/whisper-moji-okosi.mdx
@@ -24,21 +24,25 @@ Whisperの単語誤り率（Word Error Rate; WER）は日本語で約6.4%とさ�
 
 たとえば、直近（令和4年9月時点）の小平市議会定例会における私の質問と答弁の音声をWhisperで文字起こしすると次のようになります（間違えている箇所は<mark>黄色でマーク</mark>）。
 
-<blockquote>
+<div class="whisper-transcript">
+
+**▼ 文字起こし例 1**
+
 いじめの重大事態に関してですよ、専門家から重大事態としてこれを扱いなさいと扱った方がいいですよという助言を受けながらですね、教育委員会としては重大事態として扱わなかったという事例があるんですが、<mark>一般して</mark>最終的に重大事態として扱うことになったんですが、その専門家から助言を受けたことで重大事態として扱ったわけではなくて、別の理由で扱うことになった。その専門家から重大事態として扱いなさいというような助言を受けたにも関わらず、その重大事態として扱わなかった場面において教育長はどのような指示されてきたのか、例えば教育長は<mark>まっ</mark>すぐに重大事態として扱いなさいとか、そういった指示はされてきたのか、それとも教育長自身にそういった情報が上がっていなかったのか、そのあたりちょっと確認させてください。
-</blockquote>
 
-<blockquote>
+**▼ 文字起こし例 2**
+
 第1点目の、この3年間の教育長の給与になりますが、まず基本的な月額給与から申し上げますと81万円になります。あと、これに期末手当<mark>とが</mark>加わりますので、年間の収入で申し上げますと1,336万5,000円となります。これを3年間にさらに退職手当が入りますので、4,617万円となります。以上でございます。それ以外はないということでいいですか。報酬がそれ以外ないかということでいいですか。ない。以上ということですか。ない。ない<mark>ならないでしょ</mark>。<mark>村部長</mark>。まず月額給与と期末手当と退職手当、この3つとなります。他には特にはございません。以上でございます。
-</blockquote>
 
-<blockquote>
+**▼ 文字起こし例 3**
+
 その時には私はちょっと<mark>いなかったも</mark>ので、詳しいところは存じ上げてはいませんが、その話については聞く中では、当時そのお話ありましたが、すぐに重大事態に持っていくというような話ではなかったということもありまして、その後様々な話を聞く中で、やはり我々の市の方の重大事態に対する考え方というのも少し甘かったというところも確かに反省する点はございます。<mark>安田経</mark>議員がご指摘されていたように、重大事態の考え方というのは、やはりしっかりと我々の中で共通認識を持って対応する必要があると考えていますので、ここでまたいじめの関係については、少しマニュアル等をしっかり見直して、学校関係にもしっかり周知をして、考え方をしっかり統一していこうということで今進めておりますので、ご指摘されたような点は今後はまずない、絶対ないというふうに考えているところでございます。
-</blockquote>
+
+</div>
 
 個人名はさすがに難しいようですが、ほぼ完ぺきに文字起こしできています。役職名や市で独自に使っている単語などをファインチューンで最適化すれば、さらに精度が上がるでしょう。
 
-![Whisperで文字起こし中の様子](/img/whisper-processing.png)
+<img src="/img/whisper-processing.png" alt="Whisperで文字起こし中の様子" class="whisper-img" />
 
 ## Whisperで文字起こし → 生成AIで仕上げる
 
@@ -105,18 +109,18 @@ Google Drive に音声ファイルを置いて、Colab から直接読み込む�
 
 👉 [Google Colab で開く](https://colab.research.google.com/drive/1eAxHdqrF1Zt59V1ouSfo7iTBRYmhYDy7?usp=sharing)
 
-![Colab ログイン画面](/img/whisper-login.png)
+<img src="/img/whisper-login.png" alt="Colab ログイン画面" class="whisper-img" />
 
 **② メニューバーの「ファイル」→「ドライブにコピーを保存」を押します。**  
 これで自分の Google Drive に Colab ノートブックがコピーされます。
 
 **③ メニューバーの「ランタイム」→「ランタイムのタイプを変更」を押します。**
 
-![ランタイム変更メニュー](/img/whisper-runtime.png)
+<img src="/img/whisper-runtime.png" alt="ランタイム変更メニュー" class="whisper-img" />
 
 **④ ハードウェアアクセラレータを「T4 GPU」に設定し、保存ボタンを押します。**
 
-![GPU設定画面](/img/whisper-gpu.png)
+<img src="/img/whisper-gpu.png" alt="GPU設定画面" class="whisper-img" />
 
 **⑤ 文字起こししたい音声ファイルを Google Drive の「マイドライブ」直下にアップロードします。**  
 ここでは例として `onsei.mp3` というファイル名で説明します。mp3、m4a、wav などの音声ファイルだけでなく、mp4 などの動画ファイルもそのまま文字起こし可能です。
@@ -128,15 +132,15 @@ Google Drive を開いたときに最初に表示される場所です。「会�
 どうしてもフォルダに整理したい場合は、たとえば「会議録」フォルダに入れた場合、後ほど⑦で書き換えるパスが `MyDrive/会議録/onsei.mp3` のように変わります。
 :::
 
-![フォルダアイコン](/img/whisper-folder.png)
+<img src="/img/whisper-folder.png" alt="フォルダアイコン" class="whisper-img" />
 
 **⑥ ドラッグ＆ドロップで音声ファイルをアップロードします。**
 
-![アップロード画面](/img/whisper-upload.png)
+<img src="/img/whisper-upload.png" alt="アップロード画面" class="whisper-img" />
 
 アップロードが完了するまで待ちます。
 
-![アップロード中](/img/whisper-uploading.png)
+<img src="/img/whisper-uploading.png" alt="アップロード中" class="whisper-img" />
 
 **⑦ コード内のファイルパスを確認します。**  
 デフォルトでは `/content/drive/MyDrive/onsei.mp3` になっています。
@@ -146,22 +150,22 @@ Google Drive を開いたときに最初に表示される場所です。「会�
 
 **⑧ 三角形の実行ボタン（▶）を押します。**
 
-![実行ボタン](/img/whisper-run.png)
+<img src="/img/whisper-run.png" alt="実行ボタン" class="whisper-img" />
 
 **⑨ 警告が出たら「このまま実行」を押します。**
 
-![このまま実行](/img/whisper-konomama.png)
+<img src="/img/whisper-konomama.png" alt="このまま実行" class="whisper-img" />
 
 **⑩ 完了すると、最後にすべてを連結した文章が表示されます。**  
 選択してコピーし、Word などに貼り付けてご利用ください。
 
-![文字起こし完了](/img/whisper-finished.png)
+<img src="/img/whisper-finished.png" alt="文字起こし完了" class="whisper-img" />
 
 ### 続けて実行する場合
 
 別の音声ファイルを文字起こししたい場合は、再生ボタンを押せば再度実行できます。
 
-![再実行ボタン](/img/whisper-restart.png)
+<img src="/img/whisper-restart.png" alt="再実行ボタン" class="whisper-img" />
 
 うまく行かない場合は、メニューバーから「ランタイム」→「ランタイムを再実行」を押し、上記③④の手順で GPU に設定し直してから再実行してください。
 
@@ -194,3 +198,7 @@ Pro を一度契約すると1ヶ月間（最大100回分）使えます。なお
 ---
 
 参考までに、令和4年9月時点で私が約2時間の音声（約80MB）を文字起こしした際は、Pro で約33分で完了しました（ファイル転送時間を除く）。
+
+import WhisperStyles from '@/components/WhisperStyles.astro';
+
+<WhisperStyles />