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

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

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

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

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

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

.s7ecatalogsearchviewer .s7searchpanel .s7searchresultspace

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

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

例 — 大サイズと中サイズのブレークポイントに 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 プロパティ

height
検索入力フィールドの高さ。
padding-left
入力フィールドの境界と入力テキストとの間の内側のパディング。
枠線
検索入力フィールドの境界線。
margin
検索入力フィールドの余白
font-size
テキストフォントのサイズ。

例 — 高さが 0 ピクセル、テキストフォントが 14 ピクセルの検索入力フィールドを設定するには、次のように記述します。

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

デフォルトでは、検索入力フィールドの左側にある「鏡のように見える」検索ボタンは、以下の CSS クラスセレクターを使用して制御します。

 .s7ecatalogsearchviewer .s7searchpanel .s7searchinputbutton

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

width
検索入力ボタンの幅。
height
検索入力ボタンの高さ。
background-image
「鏡のよう」アイコン画像の URL。
background-size
「鏡のよう」アイコンのサイズ。
枠線
検索入力ボタンの境界線。
margin
検索入力ボタンの余白。

例 — 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 プロパティ

color
テキストの色。
font-family
テキストフォントの名前。
font-align
水平方向のテキスト揃え。
font-size
フォントテキストのサイズ。
NOTE
このテキストパネルでは、 state 属性セレクター。異なるテキストメッセージに異なるスタイルを適用するために使用できます。 特に state='prompt' は、パネルを初めて呼び出したときに表示されるテキストプロンプトに対応します。 The state='results' は、検索ヒットに関する情報を示すテキストに対応します。 最後に、 state='no_results' は、検索クエリが結果を返さなかった場合に表示されるテキストに対応します。

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

例 — 18 ピクセルのグレーフォントを使用するテキストパネルを設定するには、次のように記述します。

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

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

.ecatalogsearchviewer .s7searchpanel .s7swatches .s7thumbcell

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

margin
各サムネールの周囲の垂直方向のマージンのサイズ。 実際のサムネールの間隔は、 .s7thumbcell .

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

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

個々のサムネールの外観は、以下の CSS クラスセレクターを使用して制御します。

.s7ecatalogsearchviewer .s7searchpanel .s7swatches .s7thumb

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

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

例 — 215 x 129 ピクセルで、デフォルトの境界線がライトグレー、選択された境界線がダークグレーのサムネールを設定するには、次のように記述します。

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

サムネールラベルの外観は、以下の CSS クラスセレクターを使用して制御します。

 .s7ecatalogsearchviewer
.s7searchpanel .s7swatches .s7label

ラベルの CSS プロパティ

color
テキストの色。
font-family
テキストフォントの名前。
font-size
テキストフォントのサイズ。

例 — 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 の top、left、bottom および right プロパティを使用してスクロールボタンを配置することはできません。 代わりに、ビューアのロジックによって自動的に配置されます。

上下スクロールボタンの CSS プロパティ

width
スクロールボタンの幅。
height
スクロールボタンの高さ。
background-image
ボタンの特定の状態に対して表示される画像。
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
b7426f53-aad9-4c00-83fc-664f30f681e8