検索結果パネルは、上部にある検索入力ボックスと、情報メッセージや検索結果が表示されるメイン領域で構成されます。
メインビューア領域の 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);