CSSは、スタイルを追加してウェブサイトの外観をカスタマイズできるようにするコーディング言語です。チーム内にコードに精通したメンバーがいる場合は、テーマ エディターのサイドバーにある [カスタム スタイル] セクションで Vimeo OTT ウェブサイトに CSS を追加し、Vimeo OTT サイトの外観と雰囲気をカスタマイズできます。
カスタム CSS はサポートの範囲外であることに注意してください。つまり、セットアップやトラブルシューティングに関してこれ以上のサポートはできず、コードを実装しても完全な機能が保証されません。これには、当社のウェブサイトテーマでの機能、特にモバイルデバイスでの表示が含まれます。Vimeoプラットフォームの今後のアップデートによる影響を受ける場合に備えて、CSSを維持するのはお客様の責任です。
Enterpriseのお客様向けのサポートオプションについてご質問がある場合は、営業チームにお問い合わせください。すでに Enterprise をご利用の場合は、アカウントマネージャーにお問い合わせください。
記事の内容：
CSSをどう使うのか？
CSSを初めて使用する場合でも、CSSを使用してOTTサイトに視覚的なカスタマイズを行いたい場合に役立つリソースをまとめました。
CSSセレクターは、CSSルールが適用される要素を定義します。Vimeo OTTサイトをカスタマイズするには、CSSセレクターを特定する必要があります。
CSSで利用できるセレクターの完全なリストについては、このW3Schoolリソースをチェックしてください。
Vimeo OTTウェブサイトにCSSを適用するには、ログインしてから、設定メニューの「サイト」を選択してテーマエディタに移動します。そこに移動したら、左側のサイドバーの " Themes " をクリックし、" [テーマを選択 "] をクリックし、次に " [テーマの編集] をクリックします。"
編集モードになったら、左側のサイドバーのカスタムスタイルセクションまでスクロールし、CSSを追加してください。作業内容を保存することをお忘れなく。
⚠️注： ウェブサイトのテーマを新しいテンプレートに変更すると、CSSは保存されません。
Vimeo OTTで要素を特定し、特定のCSSを適用する方法については、次の動画をご覧ください。
一般的なカスタマイズ
これらの各ルールのセレクターを、自分のサイトのセレクターに置き換える必要があることに注意してください。
ボタンのサイズを変更する
要素のサイズを変更するには、「width」ルールを使用してみてください。
予告編ボタンのサイズを更新する：
これはCSSです。
.secondary-actions a.btn-transparent {
幅:150%;
}
フォントのサイズ変更
フォントサイズを変更するには、フォント固有の「font-size」ルールを使用します。font-sizeルールは様々な単位に対応しています。それぞれの目的については、こちらをご覧ください。
タイトルのフォントサイズを大きくする：
これはCSSです。
h1.gigantic.uppercase {
font-size: 5em;
}
要素に色を追加する
要素に色を追加するには、「color」ルールを使用します。値には、いくつかの異なる形式を使用できます。詳細については、こちらをご覧ください。
「視聴開始」ボタンのテキストを青色に変更する：
これはCSSです。
.primary-actions a.btn-brandon {
color: blue;
}
色の追加 - 背景
背景色を追加するには、「background-color」ルールを使用します。
ボタンの背景色を赤にする：
これはCSSです。
.primary-actions a.btn-brandon {
color: blue;
}
要素を非表示にする
デフォルトで追加されたものを非表示にするには、「表示」ルールを使用します。
両方のヒーローボタンを削除する：
これはCSSです。
.row-actions {
表示: なし;
}
カスタムフォント
テーマエディターのカスタムフォント （最も人気のある100種類以上のGoogleフォントを含む）のリストから選択して、サイト全体に適用できます。使用したいフォントがそのリストにない場合は、 Google Fontsから別のフォントを選択することをお勧めします。 まず、フォントとスタイルを選択すると、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 .カスタム-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 {
キー: 値
}