注釈のスタイリング

このトピックでは、注釈のスタイルを設定する方法について学びます。

Brightcove Interactivity は、アカウントレベルの Interactivity CSS ファイルを使用して、プロジェクト、テンプレート、およびエクスペリエンス内のすべての注釈のスタイルを設定します。独自の CSS ファイルを使用するか、スタイルエディターを使用して CSS ファイルを作成することができます。

アカウントレベルの Interactivity CSS ファイルにアクセスする手順は次の通りです。

  1. Video Cloud Studio にログインします。
  2. Interactivity モジュールを開きます。
  3. ページ上部にある設定アイコン()をクリックします。

CSSファイルのアップロード

新しい CSS ファイルをアップロードするには、 カスタムCSSのアップロード をクリックし、使用する CSS ファイルを参照して選択します。

デフォルトCSSファイルのダウンロード

デフォルトの CSS ファイルをダウンロードするには、 デフォルトのCSSをダウンロード をクリックします。ダウンロードした CSS を必要に応じて編集し、その後アップロードできます。

デフォルトCSSファイルの復元

デフォルトの CSS ファイルを復元するには、 復元 をクリックします。

カスタム注釈スタイルの作成

スタイルエディターを使用して、独自のカスタム注釈スタイルを作成できます。スタイルエディターは、注釈のスタイリングに便利なインターフェースを提供します。スタイルエディターの詳細については、スタイルエディターの使用を参照してください。

カスタムスタイルの変更

さらに注釈をスタイリングする(たとえば、ウェブサイトで使用しているフォントやフォントスタイルを適用する)には、次の手順に従ってください。

  1. スタイルエディターを使用して、希望のスタイルに注釈を設定します。スタイリングの変更を公開することを忘れないでください。
  2. スタイルエディターを閉じます。
  3. デフォルトのCSSをダウンロード をクリックしてカスタム CSS ファイルをダウンロードします。
  4. テキストエディターを使用して CSS ファイルを編集します。ウェブブラウザで提供されるツールを使用して、変更すべきセレクタやクラスを確認することができます。
  5. CSS ファイルを保存します。
  6. カスタムCSSのアップロード をクリックし、新しい CSS ファイルを参照して選択します。

カスタム注釈用 CSSファイルを1から作成する

カスタム注釈用 CSSファイルを1から作成することもできます。以下の手順に従ってください:

  1. デフォルトのCSSをダウンロード をクリックして、デフォルトの CSSファイルをダウンロードします。
  2. 必要な変更や追加を行います。
  3. カスタムCSSのアップロード をクリックし、新しいCSSファイルを参照して選択します。

デフォルトのCSSファイルを復元するには、 復元 をクリックしてください。