メインコンテンツへスキップ

Vimeo OTTでのカスタマイズ

CSSとはスタイル追加用のコーディング言語で、ウェブサイトの外観や雰囲気をカスタマイズするために使用できます。チーム内にコーディングスキルに長けたメンバーがいる場合は、テーマエディターのサイドバーにある「カスタムスタイル」セクションで、Vimeo OTTウェブサイトにCSSを追加して、そのサイトの外観や雰囲気をカスタマイズできます。  

重要：カスタムCSSはVimeoのサポートの対象外です。そのためVimeoは、セットアップやトラブルシューティングに関して追加サポートを提供せず、販売者がコードを実装した場合、完全な機能を保証できません。Vimeoウェブサイトのテーマとの連携機能（特にモバイルデバイスでの表示）も同様に保証されません。販売者はVimeoプラットフォームが将来更新される場合の影響に備えて、CSSを維持する責任があります。

Enterprise顧客向けのサポートオプションについてのご質問は、営業チームにお問い合わせください。Enterpriseをすでにご利用の場合は、担当のアカウントマネージャーにお問い合わせください。

記事の内容：

CSSの使用方法

CSSに慣れていないものの、CSSを使ってOTTサイトのビジュアルカスタマイズを進めたいという方のために、学習に役立つリソースをまとめました。

CSSセレクターによってCSSルールの適用要素が定義されます。Vimeo OTTサイトをカスタマイズするには、CSSセレクターを特定する必要があります。

CSSで利用できるセレクターの一覧については、こちらのW3Schoolリソースを参照してください。

Vimeo OTTウェブサイトにCSSを適用するには、ログイン後に「設定」メニューで「サイト」を選択して、テーマエディターに移動します。テーマエディターの左側のサイドバーで「テーマ」をクリックし、「テーマを選択」、「テーマを編集」の順にクリックします。

編集モードになったら、左側のサイドバーの「カスタムスタイル」セクションまでスクロールし、CSSを追加します。変更した内容は必ず保存してください。

⚠️注：ウェブサイトのテーマを新しいテンプレートに変更すると、CSSは保存されません。

Vimeo OTTで要素を特定し、特定のCSSを適用する方法については、こちらの動画をご覧ください。

 

一般的なカスタマイズ

これらの各ルールのセレクターを、自分のサイトのセレクターに置き換える必要があることに注意してください。

ボタンのサイズを変更する

要素のサイズを変更するには、「width」ルールを使用します。

予告編のボタンのサイズを更新した例

basic.png

trailerbuttonsize.png

CSSは以下のとおりです。

.secondary-actions a.btn-transparent {
  width: 150%;
}

フォントのサイズ変更

フォントサイズを変更するには、フォント固有の「font-size」ルールを使用します。font-sizeルールは様々な単位に対応しています。それぞれの目的については、こちらをご覧ください。

フォントサイズを大きくしたタイトルの例

basic__1_.png

increasetitle.png

CSSは以下のとおりです。

h1.gigantic.uppercase {
  font-size: 5em;
}

要素に色を追加する

要素に色を追加するには、「color」ルールを使用します。値にはいくつか異なる形式を使用できます。詳細は、こちらをご覧ください。

「視聴開始」ボタンのテキストを青色に変更します。

basic__2_.png

bluebuttontext.png

CSSは以下のとおりです。

.primary-actions a.btn-brandon {
  color: blue;
}


色を追加する - 背景

背景色を追加するには、「background-color」ルールを使用します。

ボタンの背景色を赤にした例

basic__3_.png

redbutton.png

 

CSSは以下のとおりです。

.primary-actions a.btn-brandon {
  color: blue;
}

要素を非表示にする

デフォルトで追加された要素を非表示にするには、「display」ルールを使用します。

両方のヒーローボタンを削除した例

basic__4_.png

removebuttons.png

CSSは以下のとおりです。

.row-actions {
  display: none;
}


カスタムフォント

テーマエディターにはカスタムフォント（特に人気のある約100個のGoogleフォントなど）のリストがあり、サイト全体に適用するフォントを選択できます。希望のフォントがリストにない場合は、Googleフォントから利用可能な別のフォントを選択するのがお勧めです。フォントとスタイルを選択すると、サイトへの追加方法がGoogleによって示されます。ページにフォントのスタイルを追加するためのCSSルールを取得するには、「インポート」をクリックします。以下は一例です。

@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

インポートされたら、CSSルールを追加して、ページのフォントにスタイルを追加します。以下は一例です。

h1,h2,h3,h4,h5,h6,p,span,div,a,strong, .site-font-primary-color {
  font-family: 'Roboto', sans-serif !important;
}
⚠️意：ユニバーサルセレクター（*）の使用は避けてください。最良の結果を得るために、各セレクターのリストの作成をお勧めします。

ページ固有のスタイル

OTTサイトのページには同じ基本テンプレートが使用されますが、特定のページタイプにスタイルを追加することもできます。例えば、親セレクターをセレクターに追加すると、ルールの適用範囲をコレクションページのみに限定できます。

OTTページでは、<body>要素にはページに固有のクラスがあります。コレクションページは「.collections」であるため、ルールの作成時にセレクターの前に「body.collections」を追加して、特定のコレクションページに制限します。以下は一例です。

body.collections .custom-btn-action-share {
  display: none;
}

サイズの異なるブラウザでのカスタマイズ

コードを実装した場合、ブラウザ間で完全な機能を保証することはできません。ただし、ブラウザ間でスタイルを調整する方法についての提案をすることができます。CSSルールをメディアクエリでラップすることができます。以下は一例です。

@media only screen and (max-width: 640px) {
  .hero-short-desc {
    display: none;
  }
}

変更できない要素

CSSはスタイル設定に最適なツールですが、すべてのコンポーネントを変更できるわけではありません。お支払いページや動画プレーヤーなど、ウェブサイトの一部のコンポーネントはCSSでスタイル設定できません。

ユニバーサルセレクターの使用に関する注意

ユニバーサルセレクターを使用すると、サイト全体で使われる特定のフォームやページで問題が発生する可能性があります。これらのセレクターは*記号で使用されます。使用される各セレクターをリストアップすることをお勧めします。
以下の例は避けてください。
* {
  key: value
}
代わりに、以下を使用します。
h1,h2,h3 {
  key: value
}
 

関連記事