フライアウトズーム表示

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

メイン表示のCSSプロパティ

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

.s7flyoutviewer .s7flyoutzoomview

CSSプロパティ

説明

background-color

メイン表示の背景色。

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

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

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

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

.s7flyoutviewer .s7flyoutzoomview .s7tip

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

CSSプロパティ

説明

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

color

テキストカラー

font-family

フォント名

font-size

フォントサイズ

パディング

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

background-color

メッセージテキストの背景の塗りのカラー。

border-radius

メッセージテキストの背景の境界線の半径。

opacity

メッセージテキストの背景の不透明度。

Internet Explorer 8の場合は、 filter:alpha(opacity-...) ) を使用します。

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

.

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

.s7flyoutviewer .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