デザインカスタマイズ

プレゼンテーションの構造は以下の通りです。

<div id="..."><!-- プレゼンテーション領域のdiv要素 -->
  <div class="uliza-presentation">
    <div class="toolbar">
      <div class="prev-chapter toolbar-button"></div>
      <div class="next-chapter toolbar-button"></div>
      <div class="page-number"></div>
      <div class="spacer"></div>
      <div class="shrink-page toolbar-button"></div>
      <div class="page-enlargement"></div>
      <div class="enlarge-page toolbar-button"></div>
    </div>
    <div class="document-area">
      <canvas class="document-layer"></canvas>
      <div class="annotation-layer"></div>
    </div>
  </div>
</div>

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

uliza-presentation

プレゼンテーション領域の中に表示するプレゼンテーションの実体です。

toolbar

ツールバーです。

toolbar-button

ツールバーのボタン類です。

prev-chapter

前チャプターボタンです。

next-chapter

次チャプターボタンです。

page-number

現在のページ番号です。

spacer

現在のページ番号と縮小ボタンのスペースです。

shrink-page

縮小ボタンです。

page-enlargement

現在の拡大率です。

enlarge-page

拡大ボタンです。

document-area

資料を表示する領域です。余白を含みます。

document-layer

資料を表示する領域です。

annotation-layer

資料のリンク用の領域です。

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

disabled

無効中のツールバーのボタンです。class「toolbar-button」と同じ要素に付きます。

fit

資料のサイズが資料を表示する領域のサイズと同じ状態です。class「document-area」と同じ要素に付きます。

has-started

プレイヤーが再生中の状態です。class「uliza-presentation」と同じ要素に付きます。

letter

資料の幅が資料を表示する領域の幅より大きい状態です。class「document-area」と同じ要素に付きます。

linearad-has-started

プレイヤーが広告再生中の状態です。class「uliza-presentation」と同じ要素に付きます。

lock

プレイヤーが画面ロックをしている状態です。class「uliza-presentation」と同じ要素に付きます。

hover

マウスカーソルがホバー中のツールバーのボタンです。class「toolbar-button」と同じ要素に付きます。

over

資料のサイズが資料を表示する領域のサイズより大きい状態です。class「document-area」と同じ要素に付きます。

pillar

資料の高さが資料を表示する領域の高さより大きい状態です。class「document-area」と同じ要素に付きます。

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