デザインカスタマイズ

プレイリストの構造は以下の通りです。

<div id="..."><!-- プレイリスト領域のdiv要素 -->
  <div class="ulizaPlaylist">
    <div class="item">
      <div class="thumbnail"></div>
      <div class="description">...</div>
    </div>
    <!-- <div class="item"> が並ぶ -->
  </div>
</div>

要素を表すclassは以下の通りです。

ulizaPlaylist

プレイリスト領域の中に表示するプレイリストの実体です。

item

プレイリストの項目です。

thumbnail

項目内のサムネイルです。

description

項目内のテキストです。

状態を表すclassは以下の通りです。

selected

選択中の項目です。class「item」と同じ要素に付きます。

hover

マウスカーソルがホバー中の項目です。class「item」と同じ要素に付きます。

ユーザーインターフェースの表示例に示すプレイリスト領域のCSSはソースファイルulizaplaylist.cssをご確認ください。カスタマイズする場合は十分な動作検証をしてください。