フライアウトズーム表示

インラインズームモードでは、メイン表示は、静的な画像、フライアウト表示に表示されるズームされた画像、静的な画像の上に表示されるチップメッセージで構成されます。

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

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

.s7mixedmediaviewer .s7flyoutzoomview

CSSプロパティ

説明

background-color

メイン表示の背景色。

例 — メイン表示を透明にするには、次のように記述します。

.s7mixedmediaviewer .s7flyoutzoomview { 
 background-color: transparent; 
}

チップメッセージの外観は、以下のCSSクラスセレクターを使用して制御します。

.s7mixedmediaviewer .s7flyoutzoomview .s7tip

フォントスタイル、サイズの外観、および垂直方向のオフセットは、CSSを使用して設定できます。 ただし、水平方向の位置揃えはビューアのロジックに管理されます。 leftプロパティまたはrightプロパティを使用したCSSからの上書きはサポートされていません。

チップメッセージのCSSプロパティ

CSSプロパティ

説明

background-color

メッセージの背景の塗りのカラー

border-radius

メッセージの背景の境界線の半径。

メイン表示の下端からのオフセット。

color

チップのテキストカラー。

font-size

フォントサイズ

font-family

フォントファミリ。

opacity

メッセージの背景の不透明度。

パディング

メッセージテキストの周囲のパディング。

ヒントメッセージはローカライズできます。 詳しくは、ユーザインターフェイス要素のローカライゼーションを参照してください。

例 — 半透明のチップメッセージを、白のArial 12pxフォント、メイン表示の下端から50ピクセルのオフセット、パディングおよび角丸付きの境界線付きで設定するには、次のように記述します。

.s7mixedmediaviewer .s7flyoutzoomview .s7tip { 
bottom: 50px; 
color: #ffffff; 
font-family: Arial; 
font-size: 12px; 
padding-bottom: 10px; 
padding-top: 10px; 
padding-left: 12px; 
padding-right: 12px; 
background-color: #000000; 
border-radius: 4px; 
opacity: 0.5; 
filter: alpha(opacity = 50); 
}

このページ

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