サムネール

サムネールは、サムネール画像のグリッドと、垂直方向にスクロールできる右側のオプションのスクロールバーで構成されます。

メインコントロールバーのサムネールボタンをクリックして、サムネールを切り替えます。 サムネールがアクティブな場合、サムネールはビューアのユーザインターフェイスの上にモーダルモードでオーバーレイ表示されます。 ビューアのロジックにより、サムネールコンテナのサイズがビューア領域全体に合わせて自動的に変更されます。

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

.s7ecatalogviewer .s7thumbnailgridview

CSSプロパティ

説明

トップ

ビューアの上端からのサムネールコンテナの垂直方向のオフセット。

margin-top

上余白。

margin-left

左側の余白。

margin-right

右側の余白。

margin-bottom

下部のマージン。

background-color

サムネール領域の背景色。

例 — 上端からのオフセットが32ピクセル、左右に5ピクセルのマージンがあり、下端に8ピクセルのマージンがあり、背景色が0xDDDDDDのサムネールを設定します。

.s7ecatalogviewer .s7thumbnailgridview { 
 top: 32px; 
 margin-left: 5px; 
 margin-right: 5px; 
 margin-bottom: 8px; 
 background-color: rgb(221, 221, 221); 
}

サムネールの間隔は、以下のCSSクラスセレクターを使用して制御します。

.s7ecatalogviewer .s7thumbnailgridview .s7thumbcell

CSSプロパティ

説明

margin

各サムネール周囲の水平方向および垂直方向のマージンのサイズ。 実際のサムネールの水平方向の間隔は、 .s7thumbcell に設定された左右のマージンの合計になります。 サムネールの垂直方向の間隔は、上下のマージンの合計になります。

例 — 垂直方向および水平方向に10ピクセルの間隔を設定します。

.s7ecatalogviewer .s7thumbnailgridview .s7thumbcell { 
 margin: 5px; 
}

個々のサムネールの外観は、以下のCSSクラスセレクターを使用して制御します。

.s7ecatalogviewer .s7thumbnailgridview .s7thumb

CSSプロパティ

説明

width

サムネールの幅。

height

サムネールの高さ。

枠線

サムネールの境界線。

background-color

サムネールの背景色。

タッチデバイスでは、回転して縦長モードにすると、ビューアでカタログ見開きを個々のページに分割するように決定された場合に、サムネールのサイズが設定値の半分になる場合があります。

メモ

サムネールでは、state属性セレクターがサポートされます。このセレクターは、サムネールの状態ごとに異なるスキンを適用するのに使用できます。 具体的には、state="selected"はメイン表示に現在表示されている画像のサムネールに対応し、state="default"はその他のサムネールに対応し、state="over"はマウスカーソルを合わせたときに使用されます。

例 — 120 x 85ピクセルで、背景色が白、標準の境界線がライトグレー、選択された境界線がダークグレーのサムネールを設定します。

.s7ecatalogviewer .s7thumbnailgridview .s7thumb { 
 width:120px; 
 height:85px; 
 background-color: rgb(255, 255, 255); 
 border: solid 1px #999999; 
} 
.s7ecatalogviewer .s7thumbnailgridview .s7thumb[state="selected"]{ 
 border: solid 2px #666666; 
}

サムネールラベルの外観は、以下のCSSクラスセレクターを使用して制御します。

.s7ecatalogviewer .s7thumbnailgridview .s7label

CSSプロパティ

説明

font-family

フォント名

font-size

フォントサイズ

例 — 14ピクセルのHelveticaフォントを使用するラベルを設定するには、次のように記述します。

.s7ecatalogviewer .s7thumbnailgridview .s7label { 
 font-family: Helvetica,sans-serif; 
 font-size: 12px; 
}

表示に垂直方向に収まらないサムネールがある場合は、サムネールの右側に垂直方向のスクロールバーが表示されます。 スクロールバー領域の外観は、以下のCSSクラスセレクターを使用して制御します。

.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar

CSSプロパティ

説明

width

スクロールバーの幅。

トップ

サムネール領域の上端からのスクロールバーの垂直方向のオフセット。

サムネール領域の下端からのスクロールバーの垂直方向のオフセット。

サムネール領域の右端からのスクロールバーの水平方向のオフセット。

例 — 幅が28ピクセルで、サムネール領域の上、右および下からのマージンが8ピクセルのスクロールバーを設定します。

.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar { 
 top:8px; 
 bottom:8px; 
 right:8px; 
 width:28px; 
}

スクロールバートラックは、上下のスクロールボタンの間の領域です。 トラックの位置と高さが自動的に設定されます。 このトラックは、以下のCSSクラスセレクターを使用して制御します。

.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrolltrack

CSSプロパティ

説明

width

スクロールバートラックの幅。

background-color

スクロールバートラックの背景色。

例 — 幅が28ピクセルで、背景色が半透明のグレーのスクロールバートラックを設定します。

.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrolltrack { 
 width:28px; 
 background-color:rgba(102, 102, 102, 0.5); 
}

スクロールバーサムは、スクロールトラック領域内で垂直方向に移動します。 サムの垂直方向の位置は、コンポーネントのロジックによって完全に制御されます。ただし、サムの高さは、コンテンツの量に応じて動的に変化するわけではありません。 サムの高さや、その他の外観は、以下のCSSクラスセレクターを使用して制御します。

.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb

CSSプロパティ

説明

width

スクロールバーサムの幅。

height

スクロールバーサムネールの高さ。

padding-top

スクロールバートラックの上端との間の垂直方向のパディング。

padding-bottom

スクロールバートラックの下端との間の垂直方向のパディング。

background-image

サムの特定の状態に対して表示する画像。

background-position

CSSスプライトを使用する場合、アートワークスプライト内の位置。

CSSスプライトも参照してください。

メモ

サムでは、state属性セレクターがサポートされます。このセレクターは、サムの状態updownoverdisabledに異なるスキンを適用するのに使用できます。

例 — 28 x 45ピクセルで、上下に10ピクセルのマージンがあり、状態ごとに異なるアートワークを持つスクロールバーサムを設定します。

.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb { 
 width:28px; 
 background-repeat:no-repeat; 
 background-position:center; 
 height:45px; 
 padding-top:10px; 
 padding-bottom:10px; 
} 
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state='up'] { 
 background-image:url(images/v2/ThumbnailScrollThumb_dark_up.png); 
} 
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state='down'] { 
 background-image:url(images/v2/ThumbnailScrollThumb_dark_down.png); 
} 
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state='over'] { 
 background-image:url(images/v2/ThumbnailScrollThumb_dark_over.png); 
} 
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state='disabled'] { 
 background-image:url(images/v2/ThumbnailScrollThumb_dark_up.png); 
}

上下のスクロールボタンの外観は、以下のCSSクラスセレクターを使用して制御します。

.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton

.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton

CSS topleftbottomおよびrightプロパティを使用してスクロールボタンを配置することはできません。 ビューアのロジックによって自動的に配置が決まります。

CSSプロパティ

説明

width

ボタンの幅。

height

ボタンの高さ。

background-image

サムの特定の状態に対して表示する画像。

background-position

CSSスプライトを使用する場合、アートワークスプライト内の位置。

CSSスプライトも参照してください。

メモ

これらのボタンでは、state属性セレクターがサポートされます。このセレクターは、ボタンの状態updownoverdisabledごとに異なるスキンを適用するのに使用できます。

ボタンのツールチップをローカライズできます。 詳しくは、ユーザインターフェイス要素のローカライゼーションを参照してください。

例 — 28 x 32ピクセルで、状態ごとに異なるアートワークを持つスクロールボタンを設定するには、次のように記述します。

.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton { 
 width:28px; 
 height:32px; 
} 
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton[state='up'] { 
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_up.png); 
} 
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton[state='over'] { 
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_over.png); 
} 
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton[state='down'] { 
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_down.png); 
} 
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton[state='disabled'] { 
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_up.png); 
} 
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton { 
 width:28px; 
 height:32px; 
} 
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton[state='up'] { 
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_up.png); 
} 
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton[state='over'] { 
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_over.png); 
} 
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton[state='down'] { 
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_down.png); 
} 
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton[state='disabled'] { 
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_up.png); 
}

このページ