サムネール

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

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

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

.s7ecatalogsearchviewer .s7thumbnailgridview

CSSプロパティ

説明

トップ

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

margin-top

上余白。

margin-left

左側の余白。

margin-right

右側の余白。

margin-bottom

下部のマージン。

background-color

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

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

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

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

.s7ecatalogsearchviewer .s7thumbnailgridview .s7thumbcell

CSSプロパティ

説明

margin

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

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

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

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

.s7ecatalogsearchviewer .s7thumbnailgridview .s7thumb

CSSプロパティ

説明

width

サムネールの幅。

height

サムネールの高さ。

枠線

サムネールの境界線。

background-color

サムネールの背景色。

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

メモ

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

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

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

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

.s7ecatalogsearchviewer .s7thumbnailgridview .s7label

CSSプロパティ

説明

font-family

フォント名

font-size

フォントサイズ

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

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

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

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar

CSSプロパティ

説明

width

スクロールバーの幅。

トップ

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

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

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

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

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

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

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolltrack

CSSプロパティ

説明

width

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

background-color

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

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

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

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

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb

CSSプロパティ

説明

width

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

height

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

padding-top

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

padding-bottom

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

background-image

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

background-position

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

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

メモ

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

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

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

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

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton

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

CSSプロパティ

説明

width

ボタンの幅。

height

ボタンの高さ。

background-image

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

background-position

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

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

メモ

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

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

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

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

このページ

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now