フライアウトズーム表示

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

メインビューア領域の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

フォントファミリ。

不透明

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

パディング

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

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

例 — 半透明のチップメッセージを、白の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); 
}

このページ