インジケータを設定

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

設定インジケーターの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;  
}