カルーセルビューアのカスタマイズ customizing-carousel-viewer

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

作成対象：

Developer
User

カルーセルビューアのビジュアルカスタマイズとビヘイビアーのカスタマイズは、すべてカスタム CSSを作成して行います。

推奨されるワークフローは、適切なビューアのデフォルトのCSS ファイルを取得し、別の場所にコピーしてカスタマイズし、style= コマンドでカスタマイズしたファイルの場所を指定することです。

デフォルトのCSS ファイルは次の場所にあります。

<s7viewers_root>/etc/dam/viewers/s7viewers/html5/CarouselViewer_dotted_light.css

ビューアには、数値および点線セットインジケーター用の4つの標準CSS ファイルが用意されており、それぞれ「明」と「暗」の配色になっています。デフォルトでは「点線」バージョンが使用されますが、異なる標準CSSを使用してSetIndicator.mode パラメーターを設定すると、異なるバージョンに簡単に切り替えることができます。その他の標準CSSは、次の場所にあります。

<s7_viewers_root>/html5/CarouselViewer_dotted_dark.css

<s7_viewers_root>/html5/CarouselViewer_numeric_dark.css

<s7_viewers_root>/html5/CarouselViewer_numeric_light.css

カスタム CSS ファイルには、デフォルトのクラス宣言と同じクラス宣言が含まれている必要があります。クラス宣言を省略すると、ユーザーインターフェイス要素に組み込みのデフォルトスタイルが提供されないため、ビューアが正しく機能しません。

カスタム CSS ルールを提供する別の方法として、埋め込みスタイルをweb ページまたはリンクされた外部CSS ルールのいずれかに直接使用する方法があります。

カスタム CSSを作成する場合、ビューアはコンテナ DOM要素に.s7carouselviewer クラスを割り当てることに注意してください。 style= コマンドで渡された外部CSS ファイルを使用している場合は、CSS ルールの子孫セレクターで.s7carouselviewer クラスを親クラスとして使用します。 Web ページに埋め込みスタイルを追加する場合は、このセレクターをコンテナ DOM要素のIDで次のように修飾します。

#<containerId>.s7carouselviewer

レスポンシブデザインのCSSを作成する section-0bb49aca42d242d9b01879d5ba59d33b

ユーザーのデバイスや特定のweb ページレイアウトに応じて、コンテンツの表示を異なるように、さまざまなデバイスやCSSへの埋め込みサイズをターゲットにすることができます。このテクニックには、様々なレイアウト、ユーザーインターフェイス要素のサイズ、アートワークの解像度などが含まれますが、これらに限定されません。

ビューアは、レスポンシブデザインのCSSを作成する2つのメカニズム（CSS マーカーと標準のCSS メディアクエリ）をサポートしています。これらの2つのメカニズムを個別にまたは一緒に使用できます。

CSS マーカー

レスポンシブデザインのCSSの作成に役立つように、ビューアはCSS マーカーをサポートしています。これらのマーカーは、トップレベルのビューアコンテナ要素に動的に割り当てられる特殊なCSS クラスです。ランタイムビューアサイズと、現在のデバイスで使用されている入力タイプに基づいています。

CSS マーカーの最初のグループには、.s7size_large、.s7size_mediumおよび.s7size_small個のクラスが含まれています。ビューアコンテナのランタイム領域に基づいて適用されます。例えば、ビューア領域が一般的なデスクトップモニターのサイズと同じかそれより大きい場合は、.s7size_largeを使用します。領域が共通のタブレットデバイスに近い場合は、.s7size_mediumを割り当てます。携帯電話の画面に類似した領域については、.s7size_smallを使用してください。これらのCSS マーカーの主な目的は、画面やビューアサイズごとに異なるユーザーインターフェイスレイアウトを作成することです。

CSS マーカーの2番目のグループに.s7mouseinputと.s7touchinputが含まれています。現在のデバイスがタッチ入力の場合、CSS マーカー.s7touchinputが設定されます。それ以外の場合は、.s7mouseinputが使用されます。これらのマーカーは主に、通常タッチ入力には大きな要素が必要なため、異なる入力タイプに対して異なる画面サイズのユーザーインターフェイス入力要素を作成することを目的としています。

次のCSSの例では、マウス入力付きシステムではズームインボタンのサイズを28 x 28 ピクセルに、タッチ入力デバイスでは56 x 56 ピクセルに設定しています。ビューアのサイズがさらに小さい場合は、20 x 20 ピクセルに設定されます。

.s7carouselviewer.s7mouseinput .s7imagemapeffect .s7icon {
    width:28px;
    height:28px;
}
.s7carouselviewer.s7touchinput .s7imagemapeffect .s7icon {
    width:56px;
    height:56px;
}
.s7carouselviewer.s7size_small .s7imagemapeffect .s7icon {
    width:20px;
    height:20px;
}

異なるピクセル密度のデバイスをターゲットにするには、CSS メディアクエリを使用する必要があります。次のメディアクエリブロックには、高密度スクリーンに固有のCSSが含まれます。

@media screen and (-webkit-min-device-pixel-ratio: 1.5)
{
}

CSS マーカーを使用すると、デバイスの画面サイズだけでなく、実際のビューアサイズもターゲットにできるため、レスポンシブデザイン CSSを作成する最も柔軟な方法です。これは、レスポンシブデザインレイアウトに役立ちます。

デフォルトのビューア CSS ファイルは、CSS マーカーアプローチの例として使用できます。

CSS メディアクエリ

純粋なCSS メディアクエリを使用して、デバイス検出を実行することもできます。特定のメディアクエリブロック内に囲まれたすべてが、対応するデバイスで実行された場合にのみ適用されます。

モバイルビューアに適用する場合は、CSSで定義された4つのCSS メディアクエリを次の順序で使用します。

すべてのタッチデバイスに固有のルールのみが含まれます。

code language-none

@media only screen and (max-device-width:13.5in) and (max-device-
height:13.5in) and (max-device-width:799px),
only screen and (max-device-width:13.5in) and (max-device-height:13.5in)
and (max-device-height:799px)
{
}

高解像度の画面を持つタブレットに固有のルールのみが含まれます。

code language-none

@media only screen and (max-device-width:13.5in) and (max-device-height:13.5in) and (max-device-width:799px) and (-webkit-min-device-pixel-ratio:1.5),
only screen and (max-device-width:13.5in) and (max-device-height:13.5in) and (max-device-height:799px) and (-webkit-min-device-pixel-ratio:1.5)
{
}

すべての携帯電話に固有のルールのみが含まれます。

code language-none
`@media only screen and (max-device-width:9in) and (max-device-height:9in) { }`

高解像度の画面を持つ携帯電話に固有のルールのみが含まれます。

code language-none

@media only screen and (max-device-width:9in) and (max-device-height:9in) and (-webkit-min-device-pixel-ratio: 1.5),
  only screen and (device-width:720px) and (device-height:1280px) and (-webkit-device-pixel-ratio: 2),
  only screen and (device-width:1280px) and (device-height:720px) and (-webkit-device-pixel-ratio: 2)
{
}

メディアクエリのアプローチを使用して、デバイスセンシングでCSSを整理する必要があります。

まず、「デスクトップ固有」セクションでは、デスクトップ固有またはすべてのスクリーンに共通するすべてのプロパティを定義します。
2つ目は、4つのメディアクエリが上記で定義された順序で行われ、対応するデバイスタイプに固有のCSS ルールが提供されます。

各メディアクエリでビューア CSS全体を複製する必要はありません。特定のデバイスに固有のプロパティのみが、メディアクエリ内で再定義されます。

CSS スプライト section-9b6d8d601cb441d08214dada7bb4eddc

多くのビューアーユーザーインターフェイス要素は、ビットマップアートワークを使用してスタイル設定され、複数の異なる視覚状態を持ちます。良い例は、通常、少なくとも3つの異なる状態を持つボタンです：up、over、down。各ステートには、割り当てられた独自のビットマップアートワークが必要です。

スタイル設定に対する従来のアプローチでは、CSSはユーザーインターフェイス要素の状態ごとに、サーバー上の個々の画像ファイルへの個別の参照を持ちます。次に、ズームインボタンのスタイル設定に使用するCSSの例を示します。

.s7carouselviewer .s7imagemapeffect .s7icon {
background-image: url(images/v2/imagemap/ImageMapEffect_icon1_light_up_touch.png);
}
.s7carouselviewer .s7imagemapeffect .s7icon:hover {
background-image: url(images/v2/imagemap/ImageMapEffect_icon1_light_over_touch.png);
}

このアプローチの欠点は、要素が初めて操作されたときに、エンドユーザーがちらついたり、ユーザーインターフェイスの応答が遅れたりすることです。このアクションは、新しいエレメント状態の画像アートワークがまだダウンロードされていないために発生します。また、このアプローチは、サーバーへのHTTP呼び出し数が増加するため、パフォーマンスにわずかな悪影響を及ぼす可能性があります。

CSS スプライトは、すべてのエレメント状態の画像アートワークを「スプライト」と呼ばれる1つのPNG ファイルに結合する別のアプローチです。このような「スプライト」には、特定の要素のすべての視覚状態が次から次へと配置されます。スプライトを使用してユーザーインターフェイス要素のスタイルを設定する場合、同じスプライトイメージがCSSのすべての異なるステートに対して参照されます。また、background-position プロパティは各状態に対して使用され、「スプライト」画像のどの部分を使用するかを指定します。「スプライト」画像は、任意の適切な方法で構成できます。通常、ビューアは垂直方向に積み重ねられます。

次に、同じホットスポットアイコンをスタイル設定する「スプライト」ベースの例を示します。

.s7carouselviewer .s7imagemapeffect .s7icon {
background-image: url(images/v2/imagemap/ImageMapEffect_icon1_light_up_touch.png);
background-position: -0px -56px; width: 56px; height: 56px;
}
.s7carouselviewer .s7imagemapeffect .s7icon:hover {
background-position: -0px -0px; width: 56px; height: 56px;
}

一般的なスタイリングノートとアドバイス section-95855dccbbc444e79970f1aaa3260b7b

CSSを使用してビューアのユーザーインターフェイスをカスタマイズする場合、!IMPORTANT ルールの使用はビューア要素のスタイル設定には対応していません。特に、!IMPORTANT ルールは、ビューアまたはビューア SDKが提供するデフォルトまたはランタイムのスタイル設定を上書きするために使用しないでください。その理由は、適切なコンポーネントの動作に影響を与える可能性があるためです。代わりに、このビューアリファレンスガイドに記載されているCSS プロパティを設定するには、適切な特異性を持つCSS セレクターを使用する必要があります。
CSS内の外部アセットへのすべてのパスは、ビューアのHTML ページの場所ではなく、CSSの場所に対して解決されます。デフォルトのCSSを別の場所にコピーする場合は、このルールに注意してください。デフォルトのアセットもコピーするか、カスタム CSS内のすべてのパスを更新します。
ビットマップアートワークにはPNG形式が適しています。
ビットマップアートワークは、background-image プロパティを使用してユーザーインターフェイス要素に割り当てられます。
ユーザーインターフェイス要素のwidthおよびheight プロパティが、その論理サイズを定義します。 background-imageに渡されたビットマップのサイズは、その論理サイズに影響しません。
Retinaのような高解像度の画面の高いピクセル密度を使用するには、ビットマップアートワークを論理ユーザーインターフェイス要素サイズの2倍のサイズで指定します。次に、-webkit-background-size:contain プロパティを適用して、背景を論理ユーザーインターフェイス要素サイズまで縮小します。
ユーザーインターフェイスからボタンを削除するには、そのCSS クラスにdisplay:noneを追加します。
CSSがサポートするカラー値には、様々な形式を使用できます。透明性が必要な場合は、形式rgba(R,G,B,A)を使用してください。それ以外の場合は、形式#RRGGBBを使用できます。

共通のユーザーインターフェイス要素 section-d6330c9be8c444aa9b2a07886e3dbc2a

以下は、ビデオ画像ビューアに適用されるユーザーインターフェイス要素のリファレンスドキュメントです。

recommendation-more-help

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