---
title: "検索コンポーネントの設定"
slug: "configure-a-search-component"
abstract: "SitecoreAIページビルダーで検索コンポーネントを設定する際の手順。"
---
# 検索コンポーネントの設定

> !重要機能の利用可能性は段階的に展開される一部です。御社の組織はまだこの機能を見られないかもしれません。導入時に環境が導入された際に利用可能になります。

[ソースを作成](https://doc.sitecore.com/sai/ja/users/sitecoreai/design-components/search-experiences/manage-content-sources.html "Manage content sources")した後は、ページに検索コンポーネントを追加し、ユーザーがウェブサイトのコンテンツを簡単に見つけられるようにできます。検索コンポーネントは、ソース作成時に有効にした設定で事前に設定されており、例えばどのデータが見えるか、どのフィールドが検索キーワードとして使えるかなどが含まれます。

> !注**始める前に**検索 [体験の始め](https://doc.sitecore.com/sai/ja/users/sitecoreai/design-components/search-experiences/get-started-with-search-experiences.html "Get started with search experiences") 方を参照して、検索があなたの環境で機能しているか確認してください。

## 検索コンポーネントを作成する

検索コンポーネントを作成するには:

1.  メニューバーで **「ページビルダー** :mdiFileEditOutline:」をクリックしてください。
    
2.  **ページビルダー**で、検索コンポーネントを追加したいページをクリックしてください。
    
3.  Add :mdiPlusCircle:をクリックし、**コンポーネント**ドロップダウンリストから**Search Experience**を選択します。
    
4.  求められたら、[対応するコンテンツアイテムを割り当て](https://doc.sitecore.com/sai/ja/users/sitecoreai/build-pages/adding-content-to-a-page/assign-a-content-item-from-a-local-data-source.html "Assign a content item from a local data source")るか、Add :mdiPlus:をクリックして新しいものを作成します。
    
    > !重要互換性のあるコンテンツアイテムを初めて作成する際は、[必ずそのアイテムにJSONテンプレートを含める](https://doc.sitecore.com/sai/en/developers/sitecoreai/search-experiences/add-a-json-template-to-a-content-item.html)必要があります。
    
5.  「 **割り当て」**をクリックします。
    

## 検索ソースからデータを設定してください

検索コンポーネントをページに追加したら、そのコンポーネントに接続するソースを選択し、そのソースからデータをマッピングします。

検索ソースからデータを設定するには:

1.  右側のパネルでコンポーネント設定を開くには「コンポーネント検索」をクリックしてください。
2.  **Search Configuration Manager**タブで、**Search Index**のドロップダウンリストから希望するソースを選択します。
3.  タグや**タイトル**などの各見出しに関連付けられたドロップダウンリストを使って、フィールドにあらかじめ設定済みのスタイリングを適用してください。

## レイアウトとスタイリングの設定

検索コンポーネントにソースを接続した後、検索結果がページ上でどのように見えるかを選びます。

レイアウトとスタイリングの設定:

1.  **デザイン**タブのレイアウトドロップダウンリストで、コンポーネントのスタイリングを設定します。例えば、サイズ、位置、アライメントなどです。
2.  ス **タイリング** タブで、コンポーネント内のコンテンツのスタイリングを設定します。例えば、間隔やアラインメントなどです。
3.  **「Advanced Styling**」タブで、フィールドを使って特定のスタイリング構成を入力してください:
    -   **Columns** - 検索コンポーネント内の列数。1、2、または3列を選択できます。デフォルトは3列です。
    -   **ID** - デプロイしたサイトのHTMLで見られるコンポーネントのID属性です。
    -   **CSSスタイル** - カスタムスタイリングを適用するための追加クラス。例えばmt-30は30pxの上半分の余白を追加します。