アイコンエフェクト

ズームインジケーターは、メイン表示領域に重ねて表示されます。 画像がリセット状態の場合に表示されます。また、iconeffectパラメーターの設定によって表示されます。

メインビューア領域のCSSプロパティ

表示領域の外観は、以下のCSSクラスセレクターを使用して制御します。

.s7ecatalogsearchviewer .s7pageview .s7iconeffect

CSSプロパティ

説明

background-image

ズームインジケーターのアートワーク。

background-position

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

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

width

ズームインジケーターの幅(ピクセル単位)

height

ズームインジケーターの高さ(ピクセル単位)

メモ

アイコンエフェクトでは、media-type属性セレクターがサポートされます。このセレクターを使用すると、デバイスごとに異なるアイコンエフェクトを適用できます。 特に、media-type='standard'はマウス入力が通常使用されるデスクトップシステムに対応し、media-type='multitouch'はタッチ入力のデバイスに対応します。

例 — デスクトップシステムとタッチデバイスで別々のアートを使用する100 x 100ピクセルのズームインジケーターを設定するには、次のように記述します。

.s7ecatalogsearchviewer .s7pageview .s7iconeffect { 
 width: 100px; 
 height: 100px; 
} 
.s7ecatalogsearchviewer .s7pageview .s7iconeffect[media-type='standard'] { 
 background-image:url(images/v2/IconEffect_zoom.png); 
} 
.s7ecatalogsearchviewer .s7pageview .s7iconeffect[media-type='multitouch'] { 
 background-image:url(images/v2/IconEffect_pinch.png); 
}

このページ

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