検索結果パネル

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

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

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

.s7ecatalogviewer .s7searchpanel .s7backoverlay

検索結果パネルは、使用可能なすべてのビューアの高さを常に占めます。 ただし、幅を設定することはできます。 幅は、絶対ピクセル値に設定できます。これは、中サイズと大サイズのブレークポイントのデフォルト設定です。 または、幅を 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 プロパティ

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

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

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

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

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

.ecatalogsearchviewer .s7searchpanel .s7swatches .s7thumbcell

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

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

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

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

例 — 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);