メイン表示は、静的な画像、フライアウト表示で静的な画像の上に表示されるズームされた画像、静的な画像の上に表示されるチップメッセージで構成されます。
メイン表示の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);
}