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

メイン表示の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); 
}