プレーヤにスタイルを設定する

プレーヤを作成した後で、プレーヤの外観にさまざまなカスタマイズを行うことができます。カスタマイズにより、プレーヤの外観を、組織のブランディング、プレーヤのコンテンツ、ページ デザインなど、プレーヤのデザイン要件に影響する要素に一致させ、強化できます。[スタイルの編集] ビューではプレーヤの各コンポーネントをカスタマイズでき、色とスタイルを事実上無限に組み合わせることが可能です。画像コンポーネント、背景画像、ラベル、およびクリックスルー URL もカスタマイズできます。

• スタイルを設定する
• グローバル スタイルを設定する
• 画像コンポーネントの画像を選択する
• コンポーネントの色を設定する

Brightcove Pro エディションまたは Enterprise エディションをお使いのお客様は、Brightcove の XML プレーヤ テンプレート機能である BEML を使用して、カスタム プレーヤ テンプレートを作成することもできます。

スタイルを設定する

プレーヤの外観を設定または変更するには、以下の手順を行います。

1. Publishing モジュールで、プレーヤを選択します。
2. アクション ツールバーの [スタイル] をクリックします。[スタイルの編集] ビューが開きます。
   

   

3. 編集するプレーヤのコンポーネントを選択します。左側のキャンバス パネルでコンポーネントをクリックするか、右側の [編集可能な領域] パネルでコンポーネント名をクリックすると、コンポーネントを選択できます。編集するコンポーネントを選択すると、キャンバス パネルでそのコンポーネントがハイライト表示されます。
4. 選択したコンポーネントを編集します。編集できるプロパティはコンポーネントのタイプにより異なります。後で詳細を説明します。
5. 終了したら [保存して閉じる] をクリックします。

グローバル スタイルを設定する

プレーヤへのグローバル スタイルの設定では、プレーヤの背景画像、全体のカラー セット、およびテーマを選択できます。

グローバルの色およびテーマを設定する

グローバルの色およびテーマを選択するには、以下の手順を行います。

1. [編集可能な領域] で [グローバル] を選択します。
2. [編集] の [色とテーマ] タブをクリックします。
3. ドロップダウン メニューで、使用するテーマとカラー セットを選択します。2 種類のカラーセット（[light] または [dark]）からいずれかと、3 種類のテーマ（[deluxe]、[flat]、または [minimal]）からいずれかを選択して、プレーヤのスタイルを設定できます。

グローバルの背景画像を設定する

グローバルの背景画像を選択するには、以下の手順を行います。

1. [編集可能な領域] で [グローバル] を選択します。
2. [編集] の [画像選択] タブをクリックします。
   • [アップロード] をクリックして新しい画像ファイルをアップロードします。画像ファイルをアップロードすると、メディア ライブラリで利用できるようになります。
   • [変更] をクリックして、現在割り当てられている画像を、メディア ライブラリにある他の画像に変更します。
   • 現在割り当てられている画像の選択を解除するには、[X] をクリックします。

画像コンポーネントの画像を選択する

プレーヤの画像プロパティを選択できます。プレーヤのレイアウトに応じて、プレーヤのさまざまなコンポーネントに背景画像や表示画像を設定できます。たとえば Tabbed Navigation プレーヤと Compact Tabbed Navigation プレーヤでは、以下のプレーヤ コンポーネントで画像の設定がサポートされています。

• トップ画像
• ボトム画像

さらに、画像コンポーネントにクリックスルー URL およびツールチップ テキストを設定できます。すべてのプレーヤ テンプレートで画像コンポーネントをサポートしているわけではありません。画像コンポーネントのサイズを含め、詳細はプレーヤ テンプレートを参照してください。

画像プロパティを設定するには、以下の手順を行います。

1. [編集可能な領域] で、変更したい画像コンポーネントを選択します。
2. [編集] の [画像選択] タブで以下の手順に従います。
   • [アップロード] をクリックして新しい画像ファイルをアップロードします。
   • [選択] をクリックして、現在割り当てられている画像を、メディア ライブラリにある他の画像に変更します。
   • 現在割り当てられている画像の選択を解除するには、[X] をクリックします。
3. 任意で、[クリックスルー URL] フィールドに、画像をクリックした視聴者に表示する URL を入力します。入力した URL に対して妥当性のチェックが行われ、この妥当性チェックをクリアしない URL を保存することはできません。
4. 任意で、視聴者が画像上にマウスを置いたときにブラウザで表示したいテキストを [ツールチップ] フィールドに入力します。

パフォーマンスを考慮して、使用する画像は 1 MB 以下にしてください。画像は、対象のプレーヤ テンプレートにおける画像配置に適したサイズである必要があります。詳細については、プレーヤ テンプレートを参照してください。

コンポーネントの色を設定する

ほとんどのプレーヤ コンポーネントで、色のカスタマイズが可能です。コンポーネントの機能と、選択したカラー セットやテーマによって、コンポーネントで編集可能な色の設定の数は異なります。たとえば Video Player の場合、Video コンポーネントには色の設定は 1 つしかありません。プレーヤに他のコンポーネントが表示されていないときに、動画ディスプレイ パネルに表示される背景色を設定する [Background] のみです。対照的に、はるかに複雑なデザインおよび動作が可能なコンポーネントもあります。たとえば Video List の場合、List Item Boxes コンポーネントには 色の設定が 10 種類あります。

• [Gradient Top]
• [Gradient Middle]
• [Gradient Bottom]
• [Rollover Gradient Top]
• [Rollover Gradient Middle]
• [Rollover Gradient Bottom]
• [Selected Gradient Top]
• [Selected Gradient Middle]
• [Selected Gradient Bottom]
• [Border]

これらの色の設定により、リスト アイテム ボックスのさまざまなカスタマイズが可能です。表示要素（ボーダー）や動作状態（通常、ロールオーバー、選択）にそれぞれ色を設定することもできます。注:プレーヤでグローバルのカラー セットやテーマを使用するよう変更すると、プレーヤのすべてのコンポーネントのすべての色プロパティが、そのカラー セットまたはテーマのデフォルト値にリセットされます。

色を選択するには、以下の手順を行います。

1. [スタイルの編集] ページの [編集可能な領域] で、スタイルを設定するコンポーネントを選択します。
2. [編集] の [色とテーマ] タブをクリックします。
3. コンポーネント名を展開して、四角いカラー選択ボタンをクリックします。

   

   カラー パレットが開きます。

   

   色のマスをクリックするか、16 進数のカラー コードをテキスト フィールドに入力し、Enter キーを押して、希望の色を選択します。カラー選択ボタンに、構成されている色が表示されます。

グラデーションを使用する

一部のコンポーネントおよびテーマではグラデーションを使用して、コンポーネントの上部、中央、下部に陰影を付けることができます。グラデーションの陰影を使用したくない場合は、[Gradient Top]、[Gradient Middle]、[Gradient Bottom] に同じ値を設定します。または、グラデーションを使用しないテーマに変更してください。

注:プレーヤでグローバルのカラー セットやテーマを使用するように変更すると、プレーヤのすべてのコンポーネントのすべての色プロパティが、そのカラー セットまたはテーマのデフォルト値にリセットされます。