1. 字幕のフォーマット

字幕のフォーマット

Version:
日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

カスタム CSS を使用して動画アセットの詳細ページを設定することにより、字幕の外観を変更できます。カスタム変更は、個々の字幕ではなく、すべての字幕に適用されます。

動画の字幕をカスタマイズするには、次の手順に従います。

  1. メニュー バーで [管理] をクリックします。
  2. 管理ページで、[ページ] をクリックします。
  3. [ページ] 検索ページで、[アセットの詳細 (動画)] ページを見つけて選択します。
  4. ページの右側で、[CSS] タブをクリックします。
  5. [CSS] タブで、[編集] をクリックします。
  6. テキスト フィールドに、カスタム CSS コードを記述します。
  7. [保存] をクリックします。

動画の字幕のデザインを更新するには、.mejs_aption-layer MediaElement.js ライブラリをカスタマイズし、color、font-size、line-height、および text-align の設定を変更します。

次の CSS コード サンプルを使用して、変更を加えることができます。

.mejs__captions-layer {
color: yellow;
font-size: 3vw;
line-height: 20px;
text-align: center;
}

字幕の色

カスタム CSS で使用される CSS カラー オプションには、必要な色を選択するためのカラー パレットが含まれます。パレットを表示するには、色の値にカーソルを合わせるか、または HTML に含まれている 140 個の HTML の色の名前から色の名前を挿入します。

字幕のフォント サイズ

フォント サイズは、vw の任意の値です。vw 値は Viewport に相当し、ブラウザー ウィンドウのサイズを意味します。たとえば、Viewportが 50 cm 幅の場合、 1 vw = 0.5 cm になります。

字幕の行の高さ

line-height 値は、テキスト行間の垂直距離です。Web ページでは、1 行のテキストの上下のスペースの量に相当します。line-height の単位はピクセル (px) です。 通常、line-height はフォント サイズよりも約 20 ％大きくなります。たとえば、フォント サイズが 14 px の場合、行の高さは約 16.8 px になります。font-size に大きな値を使用する場合、line-height の調整が必要となる可能性があります。

字幕のテキスト配置

text-align プロパティでは、テキストの水平方向の配置が設定されます。text-align の有効な値は次のとおりです。

  • 左: テキストを左揃えにします。
  • 右: テキストを右揃えにします。
  • 中央: テキストを中央揃えにします。
注意

変更内容を [アセットの詳細 (動画)] ページに表示するには、ページを更新する必要があります。

この記事を改善するための提案がある場合は、 お知らせください!