プレイリストのスタイリング
概要
プレイリストの外観を変更する場合は、CSS を使用して変更できます。このドキュメントでは、変更できるスタイルの数が表示されます。もちろん、可能な変更は多数あり、タスクを実行するには正しいセレクターを見つける必要があります。
垂直プレイリストのスタイリング
次の図は、垂直再生リストに対して変更されたスタイルをまとめたものです。図の後に、スタイルをリストした表があります。
プレイリストのテキストの色をコントロールする | .vjs-mouse.vjs-playlist { 色:#E9D2B3; } |
の色をコントロールする プレイリストアイテム間のスペース |
.vjs-mouse.vjs-playlist { background-color: #161D6E; } |
デュレーションテキストの色をコントロールする | .vjs-playlist .vjs-playlist-duration { 色:#9BB4DA; } |
デュレーションの背景の色をコントロールする | .vjs-playlist .vjs-playlist-duration { background-color: #1160AA; } |
プレイリストアイテム間のスペースをコントロールする | .vjs-playlist-vertical .vjs-playlist-item { マージントップ:20px; } |
水平プレイリストのスタイリング
次の図は、水平再生リストに対して変更されたスタイルの概要を示しています。図の後に、スタイルをリストした表があります。
プレイリストのテキストの色をコントロールする | .vjs-mouse.vjs-playlist { 色:#E9D2B3; } |
の色をコントロールする プレイリストアイテム間のスペース |
.vjs-mouse.vjs-playlist { background-color: #161D6E; } |
デュレーションテキストの色をコントロールする | .vjs-playlist .vjs-playlist-duration { 色:#9BB4DA; } |
デュレーションの背景の色をコントロールする | .vjs-playlist .vjs-playlist-duration { background-color: #1160AA; } |
プレイリストアイテム間のスペースをコントロールする | .vjs-playlist-水平.vjs-playlist-item { マージン左:5px; } |
スクロールバーを非表示にする
水平再生リストのスクロールバーは必要ありませんが、表示されます。スクロールバーを非表示にしたい場合は、次のスタイルがそれを行います:
div.vjs-playlist.vjs-playlist-horizontal {
overflow-y: hidden;
}
次のスクリーンショットは、プレイリストに表示された後、非表示になっているスクロールバーを示しています。