インラインズームモードでは、メインビューは静的画像で構成されます。 また、フライアウトビューで静的画像の上に表示されるズームされた画像と、静的画像の上に表示されるヒントメッセージで構成されます。
メインビューア領域の CSS プロパティ
メインビューの外観は、以下の CSS クラスセレクターを使用して制御します。
.s7mixedmediaviewer .s7flyoutzoomview
CSS プロパティ |
説明 |
---|---|
background-color |
メインビューの背景色。 |
例 — メインビューを透明にするには、次のように記述します。
.s7mixedmediaviewer .s7flyoutzoomview {
background-color: transparent;
}
ヒントメッセージの外観は、以下の CSS クラスセレクターを使用して制御します。
.s7mixedmediaviewer .s7flyoutzoomview .s7tip
CSS を使用して、フォントスタイル、サイズの外観、垂直方向のオフセットを設定できます。 ただし、水平方向の位置揃えはビューアのロジックで管理します。 を使用した CSS による上書き left
または right
プロパティはサポートされていません。
ヒントメッセージの CSS プロパティ
CSS プロパティ |
説明 |
---|---|
background-color |
メッセージの背景色。 |
border-radius |
メッセージの背景の境界線の半径。 |
下 |
メインビューの下部からのオフセット。 |
color |
チップテキストの色。 |
font-size |
フォントサイズ。 |
font-family |
フォントファミリー。 |
不透明度 |
メッセージの背景の不透明度。 |
パディング |
メッセージテキストの周囲のパディング。 |
ヒントメッセージはローカライズできます。 詳しくは、 ユーザーインターフェイス要素のローカライゼーション を参照してください。
例 — 半透明のチップメッセージを、白い Arial® 12-px フォントで、メインビューの下から 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);
}