基本的なズームビューアのカスタマイズ customizing-basic-zoom-viewer

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

作成対象：

Developer
User

基本ズームビューアのビジュアルカスタマイズとほとんどの動作のカスタマイズは、カスタム CSSを作成することによって行われます。

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

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

<s7_viewers_root>/html5/BasicZoomViewer_light.css

ビューアには、「ライト」と「ダーク」のカラースキーム用に、2つの標準CSS ファイルが用意されています。デフォルトでは「light」バージョンが使用されますが、次の標準CSSを使用して「dark」バージョンに切り替えることができます。

<s7_viewers_root>/html5/BasicZoomViewer_dark.css

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

カスタム CSS ルールを提供する別の方法として、埋め込みスタイルをweb ページ上またはリンクされた外部CSS ルールの1つで直接使用することもできます。

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

#<containerId>.s7basiczoomviewer

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

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

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

CSS マーカー

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

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

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

次のCSSの例では、マウスを入力したシステムではズームインボタンのサイズを28 x 28 ピクセルに、タッチデバイスでは56 x 56 ピクセルに設定しています。さらに、ビューアサイズが小さくなると、ボタンが完全に非表示になります。

.s7basiczoomviewer.s7mouseinput .s7zoominbutton {
    width:28px;
    height:28px;
}
.s7basiczoomviewer.s7touchinput .s7zoominbutton {
    width:56px;
    height:56px;
}
.s7basiczoomviewer.s7size_small .s7zoominbutton {
    visibility:hidden;
}

異なるピクセル密度のデバイスをターゲットにするには、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

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

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

.s7basiczoomviewer.s7mouseinput .s7zoominbutton[state='up'] {
background-image:url(images/v2/ZoomInButton_dark_up.png);
}
.s7basiczoomviewer.s7mouseinput .s7zoominbutton[state='over'] {
background-image:url(images/v2/ZoomInButton_dark_over.png);
}
.s7basiczoomviewer.s7mouseinput .s7zoominbutton[state='down'] {
background-image:url(images/v2/ZoomInButton_dark_down.png);
}
.s7basiczoomviewer.s7mouseinput .s7zoominbutton[state='disabled'] {
background-image:url(images/v2/ZoomInButton_dark_disabled.png);
}

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

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

.s7basiczoomviewer .s7zoominbutton[state]  {
    background-image: url(images/v2/ZoomInButton_dark_sprite.png);
}
.s7basiczoomviewer.s7mouseinput .s7zoominbutton[state='up'] {
background-position: -84px -560px;
}
.s7basiczoomviewer.s7mouseinput .s7zoominbutton[state='over'] {
background-position: -56px -560px;
}
.s7basiczoomviewer.s7mouseinput .s7zoominbutton[state='down'] {
background-position: -28px -560px;
}
.s7basiczoomviewer.s7mouseinput .s7zoominbutton[state='disabled'] {
background-position: -0px -560px;
}

一般的なスタイリングノートとアドバイス 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