検索結果パネル

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

メインビューア領域の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'は、パネルを初めて呼び出したときに表示されるテキストプロンプトに対応します。state='results'は、検索ヒットに関する情報を含むテキストに対応します。とstate='no_results'は、検索クエリが結果を返さなかった場合に表示されるテキストに対応します。

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

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

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

検索結果は、検索ヒットがあるページの単一列または単一行のサムネールとしてレンダリングされます。 検索結果サムネールの間隔は、以下の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);

このページ