【WordPress】Apple Windowsの字幕表示の設定について

字幕を動画の外に表示します(クリック)。

字幕一覧(クリック)

(00:00:00) Apple Windowsの字幕表示の設定について
(00:00:10) (1) Macの字幕設定方法 
(00:00:20) まず最初に、WordPressブログを視聴する方への共通の対策です。
(00:00:26) WordPressのカスタマイズ->追加CSSを開きます。
(00:00:30) ご覧の部分のCSSを追加します。
(00:00:34) このコードはブログへ添付します。字幕の背景を黒にする。字幕の背景の透過を50%にする。字幕の文字色を白にする。文字に少々影を追加する。以上4点です。
(00:00:44) ここから各デバイスへの設定になります。設定は、各デバイスの「アクセシビリティ」へ行います。
(00:00:51) 最初はMacからです。「システム設定」->「アクセシビリティ」->「字幕」
(00:00:58) 先頭にある「透明な背景」を選択すると、上段にイメージが表示されます。これでいいので、このままにします。
(00:01:16) MacでWordPressプレーヤーを再生します。
(00:01:28) 背景黒で透明度50%ですが、これが読みやすく、かつ下地も、まずまず見えます。
(00:01:41) Macは以上です。
(00:01:51) (2)Windowsの字幕設定方法 
(00:02:01) Windowsは、「設定」->「アクセシビリティ」->「字幕」->「字幕のスタイル」と入ります。
(00:02:10) Windowsは、「ビデオの設定を優先」するか否かの選択がありませんが、要するに、ここで指定した項目は上書きされます。
(00:02:17) 「テキスト」は白で不透明度100%、サイズは中、フォントはプロポーショナルゴシック。
(00:02:26) 「背景」は黒で不透明度75%
(00:02:33) 問題は、50%がないのですね。これだと、透けて見えないのではないかと思います。まあ仕方ないです。
(00:02:51) WindowsでWordPressプレーヤーを再生します。
(00:03:05) 色々いじってみましたが、これが一番まともです。
(00:03:20) 以上がWindowsの設定です。
(00:03:31) (3)iPadの字幕設定方法 
(00:03:42) iPadは、「設定」->「アクセシビリティ」 ->「標準字幕とバリアフリー字幕」
(00:03:51) iPadは、「スタイル」で、一番上の「透明な背景」を選びます。上のイメージでは文字が小さく感じますが、実際は適当な大きさになっています。
(00:04:09) iPadで、WordPressプレーヤーを再生します。
(00:04:20) Macとほぼ同じ表示レベルです。読みやすく問題ないです。
(00:04:31) iPadの設定は以上です。
(00:04:41) (4) iPhoneの字幕設定方法 
(00:04:50) (4-1) 枠内字幕と枠外字幕の比較
(00:04:58) 左側は、字幕を枠の外に表示して、右側は字幕を枠の中に表示しています。
(00:05:08) 枠外表示は、スマホなどの画面が小さい時、有効だと思います。
(00:05:21) 枠内表示は、文字が邪魔になるので、文字の背景を透過させる設定が求められます。
(00:05:37) (4-2)字幕の背景の透明度を上げる設定
(00:05:46) 「設定」->「アクセシビリティ」 
(00:05:59) 「標準字幕とバリアフリー字幕」
(00:06:07) 「スタイル」->「新規スタイルを作成」を選択すると「スタイル1」ができます。
(00:06:14) 「スタイル1」を選択した状態で、右上の「編集」をクリックします。
(00:06:21) 「フォント」->「システムフォント(モノ)」->「ビデオの設定を優先」をオフ ※オンにすると何故か明朝体になります。
(00:06:36) 「サイズ」->「大」を選択。 スマホは画面が小さいので、読もうと思うなら「大」がベターです。
(00:06:44) 文字の「カラー」->「ホワイト(デフォルト)」を選択。
(00:06:50) 背景の「カラー」->「ブラック(デフォルト)」->「ビデオの設定を優先」をオフ
(00:07:09) 背景の「不透明度」->「50%(デフォルト)」->「ビデオの設定を優先」をオフ
(00:07:21) テキストの「不透明度」->「不透明(デフォルト)」
(00:07:37) 以上で、iPhoneの字幕の設定は終了です。
(00:07:46) (5) VimeoやYouTubeの字幕の設定は、マニュアル操作。
(00:07:55) Vimeoを例に、字幕を表示します。
(00:08:03) デフォルトでは、黒の背景に白の文字で、透過度ゼロです。
(00:08:09) どうすればいいか、ウロウロしています。
(00:08:16) まあ、真っ黒も、悪くはないけど。
(00:08:26) 「CC」のボタンをクリック->「カスタマイズ」->「背景」
(00:08:34) 不透明度50%にします。
(00:08:52) これなら、まあ、見やすいです。
(00:09:06) それで問題は、ここで、このURLを再起動してみます。
(00:09:19) 再起動されました。
(00:09:27) すると、元の、真っ黒に戻ってしまうということです。
(00:09:35) Vimeoの字幕のカスタマイズは、毎回、マニュアル操作です。以上です。
(00:09:42) この動画は以上です。ご視聴ありがとうございました。

字幕の作成に関する問題ですが、それは、規格が統一されていないことに尽きる、と言っていいです。動画を作成する人は、それに振り回されています。

その字幕作成の悩みの一つが、スマホなどの小さな画面を使って、解説の動画を視聴してもらおうとすると、字幕が邪魔になることです。その解決策として、既に、字幕を動画枠の外に表示する方法は紹介してきましたが、この動画では、字幕の背景を透過させる設定方法を紹介しています。

なお、WordPressプレーヤーを使用する場合は、以下の方法で、デフォルトで透過率を設定することができます。

video::cue {
  background-color: rgba(0, 0, 0, 0.5); /* 背景を黒で透過率50% */
  color: white; /* 字幕の文字色を白に設定 */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* 文字に影を追加 */
}

上のコードを、WordPressのカスタマイズ->追加CSS、へ追記して、公開のボタンを押します。

以上