検索結果パネル

最終更新日: 2023-11-03
  • 作成対象:
  • Developer
    User

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

メインビューア領域の 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

フォントテキストのサイズ。

メモ

このテキストパネルでは、 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 スプライト .

メモ

このボタンは、 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);

このページ