インジケーターの設定

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

設定インジケーターの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ピクセルの半径、デフォルトカラー、#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;  
}

このページ