検索結果パネル

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

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

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

.s7ecatalogviewer .s7searchpanel .s7backoverlay

CSSプロパティ

説明

background-color

オーバーレイの色。

opacity

色の不透明度。

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

検索結果は、検索ヒット数があるページでは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);

このページ

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now