インジケータを設定

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

設定インジケーターの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のデフォルトカラーおよびアクティブカラーが#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;  
}

このページ