指標を設定

セットインジケーターは、タッチデバイスでビューアを使用したときにスウォッチの上にレンダリングされる一連のドットです。 ドットは、スクロールボタンを使用できない場合に、サムネールのページ間を移動するのに役立ちます。

設定インジケーターの CSS プロパティ

設定インジケーターコンテナの外観は、以下の CSS クラスセレクターを使用して制御します。

.s7zoomviewer .s7setindicator

CSS プロパティ

説明

background-color

設定インジケーターの 16 進数形式の背景色。

例 — 背景が白の設定インジケーターを作成するには：

.s7zoomviewer .s7setindicator {
 background-color: #FFFFFF;
}

個々のセットインジケーターのドットの外観は、CSS クラスセレクターを使用して制御します。

.s7zoomviewer .s7setindicator .s7dot

CSS プロパティ

説明

width

設定インジケーターのドットの幅。

height

設定インジケーターのドットの高さ。

margin-left

左余白（ピクセル単位）。

margin-top

上余白（ピクセル単位）。

margin-right

右余白（ピクセル単位）。

margin-bottom

下余白（ピクセル単位）。

border-radius

境界線の半径（ピクセル単位）。

background-color

16 進数形式の背景色。

メモ

インジケーターのドットを設定すると、 state 属性セレクター。サムネールの状態ごとに異なるスキンを適用するのに使用できます。 特に state="selected" は、現在のサムネールのページに対応します。 state="unselected" は、デフォルトのドットの状態に対応します。

例 — 15 x 15 ピクセルで、2 ピクセルの水平マージン、5 ピクセルの上マージン、1 ピクセルの下マージン、12 ピクセルの半径、#D5D3D3 default color および#939393アクティブな色の設定インジケーターのドットを作成するには、次のように記述します。

.s7zoomviewer .s7setindicator .s7dot {
 width:15px;
 height:15px;
 margin-left:2px;
 margin-top:5px;
 margin-right:2px;
 margin-bottom:1px;
 border-radius:12px;
 background-color:#D5D3D3;
}
.s7zoomviewer .s7setindicator .s7dot[state="selected"] {
 background-color:#939393;
}

このページ