メインコンテンツにスキップ

ページタイプ:検索ページ

検索ページは、Studio CMSで公開している記事のサイト内検索機能として活用できるページです。ページの仕組みと編集方法を説明します。

今日アップデートされました

検索ページとは

検索ページは、Stuio CMSで公開している記事のサイト内検索機能として活用できるページです。ページ内に配置したCMSリストを検索ワードやURLクエリを条件にフィルタリングして絞り込み検索をする仕組みです。

検索機能を使う様子。

Point: CMSリストとは

CMSリストとは、Studio内外のデータを参照してサイト上で表示する動的リストのうち、Studio CMSの内部コンテンツデータを紐付けたリストです。

あらかじめ設定したCMSプロパティを元に、リストを動的に編集することも可能です。


想定される利用シーン

検索ページは、Studio CMSで作成したコンテンツの検索機能として活用できます。

  • ブログサイトで記事を探す

  • お知らせ記事から関連記事を探す

  • 企業サイトで特定のサービスを見つける

注意:検索ページの制限事項

  • 「Studio デザイン」のような複数キーワードでの検索(AND検索)には対応していません。

  • 本文とタイトル以外のテキストプロパティは、検索対象外です。

    • 記事タイプモデルは本文とタイトルが検索対象です。

    • 記事タイプ以外のモデルはタイトルのみ検索対象です。


検索ページの構成要素

検索ページには、以下の要素が自動で配置されます。

① 検索フォーム(検索キーワードの入力欄)

検索フォームは、検索キーワードを入力するための入力フィールドです。

Tips: 検索ページ以外に検索フォームを追加する
検索ページ以外のページにも検索フォームを配置できますが、検索結果は必ず検索ページに表示されます。

② URLクエリフィルター

URLクエリフィルターは、カテゴリーなどの検索条件でCMSリストの表示アイテムを絞り込むフィルターです。

参照プロパティが設定されている場合にのみ、自動で配置されます。

③ CMSリスト(検索対象のリスト)

検索結果を表示するリストです。

CMSダッシュボードのモデルリストで先頭にある記事タイプのCMSモデルが、デフォルトで紐付けられます。


検索ページを追加する

  1. スクリーン右上の[+]ボタンをクリックします。ページパネルの[+]ボタンからも追加が可能です。

    スクリーンショット:ページ追加の[+]ボタンを示している画像。
  2. ページタイプダイアログで、[検索ページ]を選択します。

    デフォルトでは、[ページ]・[モーダル]・[リダイレクト]のみが選択肢として表示されているため、「>」をクリックするとその他のページタイプが表示されます。

    スクリーンショット:ページタイプの選択画面。

検索ページ内の各要素を編集する

あらかじめCMSダッシュボードでコンテンツ作成が完了している場合、デフォルトでデータが紐付いた状態の検索ページが作成されます。

ここでは、紐付けデータの変更方法と各要素の編集方法を説明します。

1. CMSリストを編集する

CMSリスト全体を選択して、右パネル上の[データ]タブで編集を行います。パネルが閉じている場合は、右パネルを開いてください。

  • 紐付けるCMSモデルを編集する

    紐付いているCMSモデルが、キーワード検索の対象となります。

    手順の詳細は、動的リスト > 紐付けたデータを変更する を参照してください。

  • CMSリストのフィルター条件を編集する

    検索ページに配置されたCMSリストには、あらかじめ以下のフィルター条件が設定されています。

    CMSモデルを変更した場合には初期化されるため、[フィルター]メニュー横の[+]をクリックし、必要なフィルターを追加して条件設定をしてください。

  • CMSリストの表示設定を編集する

    手順の詳細は、動的リスト > リストアイテムの表示設定をするを参照してください。以下の設定が可能です。

    • 表示数

    • 0件の表示

    • もっと見るボタン

2. URLクエリフィルターを編集する

URLクエリフィルターを選択し、右パネル上の[データ]タブで編集を行います。パネルが閉じている場合は、右パネルを開いてください。

  • 対象モデルを編集する

    [対象モデル」メニューで、ドロップダウンリストから検索対象のCMSモデルを選択します。CMSリストに紐付くCMSモデルと同じモデルを選択する必要があります。

  • フィルターの表示項目を編集する

    [表示項目]メニューから編集をします。

    デフォルトでは、フィルターの対象CMSモデルに設定済みの参照プロパティすべてが、表示項目として設定されています。

    不要な項目がある場合は、項目名右の矢印をクリックし、[項目を削除]を選択して削除します。

3. 検索フォームの編集をする

検索フォームを選択し、右パネル上の[フォーム]タブで設定を編集します。パネルが閉じている場合は、右パネルを開いてください。

[項目一覧]セクションでインプットボックスの編集をする際は、以下のヘルプ記事を参照してください。

4. 検索ページの外観やレイアウトを編集する

検索ページは、他のページタイプと同様に右パネルで外観やレイアウトの編集が可能です。

以下のヘルプページを参考に設定を行なってください。


検索結果を確認する

検索結果は、デザインエディタ、ライブプレビュー、公開サイトで確認できます。

デザインエディタで確認する

検索ページ画面の左下の[検索ワードでプレビュー]欄で確認する方法です。

公開ステータスが「下書き」「公開予約中」を含むすべてのCMSアイテムが表示されます。

ライブプレビューで確認する

ライブプレビュー上で検索フォームにキーワードを入力して動作を確認する方法です。

公開ステータスが「下書き」「公開予約中」を含むすべてのCMSアイテムが表示されます。

公開サイトで確認する

サイトを公開または更新して、実際のサイトで動作確認をする方法です。公開ステータスが公開中のCMSアイテムのみ検索・表示されます。

こちらの回答で解決しましたか?