ドキュメントAEMDynamic Media ビューアリファレンスガイド

検索結果パネル search-results-panel

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

作成対象：

  • Developer
  • User

検索結果パネルは、上部の検索入力ボックスと、情報メッセージや検索結果が表示されるメインエリアで構成されます。

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

パネルがアクティブな場合、ビューアのユーザーインターフェイスは半透明の塗りで覆われています。 この塗りつぶしの色と不透明度は、次のCSS クラスセレクターで制御されます。

.s7ecatalogviewer .s7searchpanel .s7backoverlay
CSS プロパティ
説明
背景色
オーバーレイの色。
不透明度
カラーの不透明度。

検索結果パネルは、常に使用可能なすべてのビューアの高さを占めます。 ただし、幅は設定できます。 幅は絶対ピクセル値に設定できます。これは、中サイズおよび大サイズのブレークポイントのデフォルト設定です。 または、幅を100%に設定して、検索結果パネルをビューアエリア全体に表示することもできます。 パネルの幅は、次のCSS クラスセレクターによって制御されます。

.s7ecatalogsearchviewer .s7searchpanel .s7searchresultspace

検索結果スペースの​CSS プロパティ

幅
検索結果スペースの幅。

例 – 大きくて中程度のサイズのブレークポイントに250 ピクセル幅の検索結果パネルを設定し、小さなサイズのブレークポイントにフルサイズのパネルを使用するには：

.s7ecatalogsearchviewer.s7size_large .s7searchpanel .s7searchresultspanel, .s7ecatalogsearchviewer.s7size_medium .s7searchpanel .s7searchresultspanel {
 width:250px;
}
.s7ecatalogsearchviewer.s7size_small .s7searchpanel .s7searchresultspanel {
 width:100%;
}

検索結果パネルの上部は、検索入力ボックス専用です。 入力ボックスの側面のパディングは、次のCSS クラスセレクターによって制御されます。

.s7ecatalogsearchviewer .s7searchpanel .s7searchinputcontainer

検索入力コンテナの​CSS プロパティ

パディング
入力ボックスの周囲をパディングします。

検索入力フィールドは、次のCSS クラスセレクターによって制御されます。

.s7ecatalogsearchviewer .s7searchpanel .s7searchinput

検索入力フィールドの​CSS プロパティ

の高さ
検索入力フィールドの高さ。
パディング左
入力フィールドの境界と入力テキストの間の内側のパディング。
境界線
検索入力フィールドの境界線。
マージン
検索入力フィールドのマージン
フォントサイズ
テキストフォントのサイズ。

例 – 0 ピクセルの高さと14 ピクセルのテキストフォントを使用して検索入力フィールドを設定するには、次の手順を実行します。

.s7ecatalogsearchviewer .s7searchpanel .s7searchinput {
 padding-left:5px;
 height:30px;
 font-size:14px;
}

デフォルトで「鏡」の形で検索入力フィールドの左側にある検索ボタンは、次のCSS クラスセレクターによって制御されます。

 .s7ecatalogsearchviewer .s7searchpanel .s7searchinputbutton

検索入力ボタンの​CSS プロパティ

幅
検索入力ボタンの幅。
の高さ
検索入力ボタンの高さ。
背景画像
「鏡」アイコン画像のURL。
背景サイズ
「鏡」アイコンのサイズ。
境界線
検索入力ボタンの境界線。
マージン
検索入力ボタンのマージン。

例 – 26 x 26 ピクセルの「ガラスを見る」アイコンで検索ボタンを設定するには、次の手順に従います。サイズは30 ピクセルで、境界線は1 ピクセルです。

.s7ecatalogsearchviewer .s7searchpanel .s7searchinputbutton {
 width:30px;
 height:30px;
 background-size:26px 26px;
 background-image: url(images/v2/Search_form_field.png);
 font-size:14px;
 border: 1px solid #696969;
}

最初に機能が呼び出されたときに、検索結果パネルにテキストプロンプトが表示されることがあります。 また、ユーザーの検索で結果が返されなかった場合にもメッセージが表示されます。 いずれの場合も、テキストは検索結果パネルのメイン部分に表示され、次のCSS クラスセレクターによって制御されます。

.s7ecatalogsearchviewer .s7searchpanel .s7searchinfo

検索情報の​CSS プロパティ

カラー
テキストの色。
フォントファミリー
テキストフォント名。
font-align
横組みテキストの整列：
フォントサイズ
フォントテキストのサイズ。
NOTE
このテキストパネルでは、state属性セレクターをサポートしています。これは、異なるテキストメッセージに異なるスタイルを適用するために使用できます。 特に、state='prompt'は、パネルが初めて呼び出されたときに表示されるテキストプロンプトに対応しています。 state='results'は、検索ヒットに関する情報を含むテキストに対応します。 最後に、検索クエリが結果を返さなかった場合に表示されるテキストにstate='no_results'が対応します。

メッセージテキストはローカライズできます。 詳しくは、​ ユーザーインターフェイス要素のローカライゼーション ​を参照してください。

例 – グレーの18 ピクセルフォントを使用するテキストパネルを設定するには：

.s7ecatalogsearchviewer .s7searchpanel .s7searchinfo {
 font-size: 18px;
 color: #696969;
}

検索結果は、検索ヒットを含むページの1列または1行のサムネールとしてレンダリングされます。 検索結果のサムネール間の間隔は、次のCSS クラスセレクターで制御されます。

.ecatalogsearchviewer .s7searchpanel .s7swatches .s7thumbcell

サムネールセルのCSS プロパティ

マージン
各サムネールの垂直余白のサイズ。 実際のサムネールの間隔は、 .s7thumbcell に設定された上余白と下余白の合計に等しくなります。

例 – 10 ピクセルの間隔を設定するには：

.s7ecatalogsearchviewer .s7searchpanel .s7swatches .s7thumbcell {
 margin: 5px;
}

個々のサムネールの外観は、次のCSS クラスセレクターで制御されます。

.s7ecatalogsearchviewer .s7searchpanel .s7swatches .s7thumb

サムネールのCSS プロパティ

幅
サムネールの幅。
の高さ
サムネールの高さ。
境界線
サムネールの境界線。

例 – 215 x 129 ピクセルのサムネールを設定するには、明るいグレーのデフォルトの境界線と濃いグレーの選択した境界線があります。

.s7ecatalogsearchviewer .s7searchpanel .s7swatches .s7thumb {
 width: 215px;
 height: 129px;
}

サムネールラベルの外観は、次のCSS クラスセレクターで制御されます。

 .s7ecatalogsearchviewer
.s7searchpanel .s7swatches .s7label

ラベルの​CSS プロパティ

カラー
テキストの色：
フォントファミリー
テキストフォント名。
フォントサイズ
テキストフォントのサイズ。

例 – 12 ピクセル、グレー、Helvetica® フォントを使用するラベルを設定するには：

.s7ecatalogsearchviewer .s7searchpanel .s7swatches .s7label {
 font-family: Helvetica,sans-serif;
 color: #4c4c4c;
 font-size: 12px;
}

マウス入力を使用するシステムでは、検索結果パネルの下部に2つのスクロールボタンが表示され、ユーザーは検索結果をスクロールできます。 上下のスクロールボタンの外観は、次のCSS クラスセレクターで制御されます。

.s7ecatalogsearchviewer .s7searchpanel .s7scrollupbutton
.s7ecatalogsearchviewer .s7searchpanel .s7scrolldownbutton

CSSの上部、左、下部、右のプロパティを使用してスクロールボタンを配置することはできません。 代わりに、ビューアリジックによって自動的に配置されます。

スクロールアップおよびスクロールダウン ボタンのCSS プロパティ

幅
スクロールボタンの幅。
の高さ
スクロールボタンの高さ。
背景画像
特定のボタン状態に対して表示される画像。
background-position

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

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

NOTE
このボタンはstate属性セレクターをサポートしています。このセレクターを使用すると、"up"、"down"、"over"、および"disabled"のボタン状態に異なるスキンを適用できます。

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

例 – 125 x 35 ピクセルで、状態ごとに異なるアートワークを持つスクロールアップボタンを設定するには：

.s7ecatalogsearchviewer .s7searchpanel .s7scrollupbutton {
 width:125px;
 height:35px;
}
.s7ecatalogsearchviewer .s7searchpanel .s7scrollupbutton[state='up'] {
 background-image:url(images/sdk/searchpanel_scroll_up_up.png);
}
.s7ecatalogsearchviewer .s7searchpanel .s7scrollupbutton[state='over'] {
 background-image:url(images/sdk/searchpanel_scroll_up_over.png);
}
.s7ecatalogsearchviewer .s7searchpanel .s7scrollupbutton[state='down'] {
 background-image:url(images/sdk/searchpanel_scroll_up_down.png);
}
.s7ecatalogsearchviewer .s7searchpanel .s7scrollupbutton[state='disabled'] {
 background-image:url(images/sdk/searchpanel_scroll_up_disabled.png);
}
.s7ecatalogsearchviewer .s7searchpanel .s7scrolldownbutton {
 width:125px;
 height:35px;
}
.s7ecatalogsearchviewer .s7searchpanel .s7scrolldownbutton[state='up'] {
 background-image:url(images/sdk/searchpanel_scroll_down_up.png);
}
.s7ecatalogsearchviewer .s7searchpanel .s7scrolldownbutton[state='over'] {
 background-image:url(images/sdk/searchpanel_scroll_down_over.png);
}
.s7ecatalogsearchviewer .s7searchpanel .s7scrolldownbutton[state='down'] {
 background-image:url(images/sdk/searchpanel_scroll_down_down.png);
}
.s7ecatalogsearchviewer .s7searchpanel .s7scrolldownbutton[state='disabled'] {
 background-image:url(images/sdk/searchpanel_scroll_down_disabled.png);
recommendation-more-help
dynamic-media-developer-resources-help-aem-viewers-ref