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