「キャプション」ボタン caption-button

最終更新日： 2025年10月14日

トピック：
{"id":"a01bfd36-4ab8-4bf8-9dc0-5b45b890552e"}

作成対象：

{"id":"d378ca77-2da1-4f39-ad92-1917fe974a38"}
{"id":"b69b2659-1057-424e-8fc5-ed9e016dc554"},{"id":"ff6a42d2-313e-452e-93a6-792e4fad9ff8"}

クローズドキャプション表示のオンとオフを切り替えます。キャプションパラメーターが指定されていない場合は表示されません。 CSSを使用して、このボタンを含むコントロールバーに対してサイズ、スキン、位置を調整できます。

メインビューア領域のCSS プロパティ

ボタンの外観は、次のCSS クラスセレクターで制御されます。

.s7mixedmediaviewer .s7closedcaptionbutton

CSS プロパティ

説明

上位

パディングを含む上部境界線からの位置。

右

パディングを含む右端からの位置。

さんがを残しました

パディングを含む左端からの位置。

下

パディングを含む下部境界線からの位置。

幅

ボタンの幅。

の高さ

ボタンの高さ。

背景画像

特定のボタン状態に対して表示される画像。

background-position

CSS スプライトを使用する場合は、アートワークスプライト内に配置します。

CSS スプライトを参照してください。

NOTE

このボタンは、state属性セレクターと選択した属性セレクターをサポートしています。この機能を使用すると、異なるスキンを異なるボタンの状態に適用できます。特に、selected='true'はキャプションが表示されている状態に対応し、selected='false'はキャプションが非表示の状態に使用されます。

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

例 – 28 x 28 ピクセルで、上部から4 ピクセル、コントロールバーの右端から68 ピクセルに配置されたクローズドキャプションボタンを設定します。最後に、選択または選択されていない4つの異なるボタンの状態ごとに異なる画像が表示されます。

.s7mixedmediaviewer .s7closedcaptionbutton {
 position:absolute;
 top:4px;
 right:68px;
 width:28px;
 height:28px;
}
.s7mixedmediaviewer .s7closedcaptionbutton[selected='true'][state='up'] {
background-image:url(images/v2/ClosedCaptionButton_up.png);
}
.s7mixedmediaviewer .s7closedcaptionbutton[selected='true'][state='over'] {
background-image:url(images/v2/ClosedCaptionButton_over.png);
}
.s7mixedmediaviewer .s7closedcaptionbutton[selected='true'][state='down'] {
background-image:url(images/v2/ClosedCaptionButton_down.png);
}
.s7mixedmediaviewer .s7closedcaptionbutton[selected='true'][state='disabled'] {
background-image:url(images/v2/ClosedCaptionButton_disabled.png);
}
.s7mixedmediaviewer .s7closedcaptionbutton[selected='false'][state='up'] {
background-image:url(images/v2/ClosedCaptionButton_disabled.png);
}
.s7mixedmediaviewer .s7closedcaptionbutton[selected='false'][state='over'] {
background-image:url(images/v2/ClosedCaptionButton_over.png);
}
.s7mixedmediaviewer .s7closedcaptionbutton[selected='false'][state='down'] {
background-image:url(images/v2/ClosedCaptionButton_down.png);
}
.s7mixedmediaviewer .s7closedcaptionbutton[selected='false'][state='disabled'] {
background-image:url(images/v2/ClosedCaptionButton_disabled.png);
}

recommendation-more-help

dynamic-media-developer-resources-help-aem-viewers-ref