適用対象:
2016 2019 Subscription Edition 
SharePoint in Microsoft 365
注:
このシリーズで説明されている機能の多くは、Microsoft 365 の SharePoint のほとんどのサイトでも使用できます。
簡単な概要
このシリーズのこれまでのステージでは、以下について説明しました。
カテゴリ ページでコンテンツ検索 Web パーツのクエリを構成する方法 ( ステージ 9: SharePoint Server のカテゴリ ページのコンテンツ検索 Web パーツでクエリを構成する)
カタログ アイテム ページを構成する方法 (ステージ 10: SharePoint Server のカタログ アイテム ページのコンテンツ検索 Web パーツでクエリを構成する)。
Web パーツに表示されるクエリ結果は正しかったものの、Contoso の外観ではなく、タイトルと見慣れない灰色のボックスしか表示されませんでした。
この記事では、以下について説明します。
ステージ 11 の開始
表示テンプレートについて
表示テンプレートは、コンテンツがコンテンツ検索 Web パーツ (CSWP) に表示される方法を制御するために使用されます。 CSWP に表示されるコンテンツは、Web パーツで定義されたクエリに基づいて返される検索結果によって構成されることに注意してください。 そのため、表示テンプレートをカスタマイズするとき、基本的に言って Web パーツに表示される検索結果の表示方法をカスタマイズしていることになります。
各表示テンプレートは、以下の 2 つのファイルによって構成されます。
任意の HTML エディターで編集可能な HTML ファイル
JavaScript ファイル
マスター ページとページ レイアウトと同様、普段使用する HTML エディターで表示テンプレートを編集できます。 表示テンプレートを編集する際には、HTML、CSS、および JavaScript に重点を置くことができます。 表示テンプレートをアップロードするときに、SharePoint は HTML ファイルを関連付けられた JavaScript ファイルに自動的に変換します。 2 つのファイルは関連付けられているため、HTML に加えたすべての変更は、関連付けられた JavaScript ファイルで自動的に更新されます。
表示テンプレートには、以下の 2 つの種類があります。
コントロール表示テンプレート - 検索結果の表示方法について全体的なレイアウトを定義します。 これには、たとえば、見出しの HTML やリストの先頭と末尾をどのように表示するか、結果のリストのページを前後に移動する方法などが含まれます。 コントロール表示テンプレートは、Web パーツで一度だけレンダリングされます。
アイテム表示テンプレート - 検索結果の各アイテムの表示方法を定義します。 たとえば、これには、イメージおよび検索結果のタイトルの表示方法が含まれます (タイトルがイメージの下のハイパーリンクとして表示される場合)。 アイテム表示テンプレートは、検索結果のアイテムごとに一度レンダリングされます。 そのため、10 件の検索結果が返された場合、アイテム表示テンプレートは実際にはその HTML セクションを 10 回作成します。
以下のイメージは、カテゴリ ページの CSWP でコントロール表示テンプレートおよびアイテム表示テンプレートがどのように使用されるかを示しています。
表示テンプレートに関するより概念的な情報について、また独自の表示テンプレートの作成方法の詳細については、「SharePoint 2013 デザイン マネージャー表示テンプレート」を参照してください。
表示テンプレートのアップロード方法
Contoso サイトには、4 つの表示テンプレートがあります。
カテゴリ ページ用のコントロール表示テンプレート
カテゴリ ページ用のアイテム表示テンプレート
カタログ アイテム ページ用のコントロール表示テンプレート
カタログ アイテム ページ用のアイテム表示テンプレート
ネットワーク ドライブをマップする方法があるため、これらの表示テンプレートのアップロードは非常に簡単です。 [マスター ページ ギャラリー] --> [表示テンプレート] --> [コンテンツ Web パーツ] にあるフォルダーにファイルをドラッグ アンド ドロップするだけです。 ファイルをドラッグ アンド ドロップする正確な場所は、[マスター ページ ギャラリー] 内であれば重要ではありません。 しかし、 [コンテンツ Web パーツ] フォルダーはコンテンツ Web パーツのその他の表示テンプレートが配置されている場所であるため、そこに追加することにします。
SharePoint で、 [サイトの設定] --> [マスター ページとページ レイアウト] --> [表示テンプレート] --> [コンテンツ Web パーツ] に移動し、4 つのファイルが追加されていることを確認します。 表示テンプレートごとに関連付けられた .js (JavaScript) ファイルが自動的に作成されていることにも注意してください。
これで、これらの表示テンプレートをコンテンツ検索 Web パーツに適用する準備が整いました。
表示テンプレートをコンテンツ検索 Web パーツに適用する方法
まず、表示テンプレートをカテゴリ ページの CSWP に適用します。 [オーディオ] に移動しましょう。
[設定] メニュー>[ページの編集] を選択します。
Web パーツで、[Web パーツ] メニュー>[Web パーツの編集] を選択します。
Web パーツ ツール ウィンドウの [表示テンプレート] セクションで、コントロール表示テンプレートを適用するため、 [コントロール] メニューからコントロール表示テンプレートを選択します。 Contoso シナリオでは、これは [Contoso Electronics List with Paging] です。
アイテム表示テンプレートを適用するには、 [アイテム] メニューからアイテム表示テンプレートを選択します。 このシナリオでは、 [Contoso Electronics Product gallery] です。
[ OK] を選択し、ページを保存します。
すぐに [オーディオ] ページは見違えたかのようになります。 改見慣れない灰色のボックスの代わりに、各アイテムを表示するカラフルなイメージが表示され、カタログのサイト列に格納された価格および評価情報が追加されます。 しかし、3 個のアイテムしか表示されていません。 追加の手順が必要です。
もう一度 [Web パーツの編集] をクリックします。 [表示するアイテム数] フィールドの値を 3 から 9 に変更します。
[ OK] を選択し、ページを保存します。
これで、[オーディオ] ページの外観が整いました。 ページ切り替え矢印を使用して、[オーディオ] カテゴリのさまざまなアイテムを簡単に表示することができます。
ここまでで、カテゴリ ページが Contoso の外観になりました。次のタスクでは、カタログ アイテム ページの CSWP に表示テンプレートを適用します。
カタログ アイテム ページに移動します。 このシナリオでは、"オーディオ" カテゴリの項目 "Northwind Traders 50W Car Radio" を選択することでこれを行うことができます。
「表示テンプレートをコンテンツ検索 Web パーツに適用する方法」の手順 1 ~ 7 を繰り返しますが、カタログ アイテム ページのコントロールとアイテム表示テンプレートを選択します。
これで、アイテム詳細ページも非常に見栄えの良い Contoso の外観になりました。
[色] 選択メニューを使用すると、ページを簡単に切り替えて、さまざまな色でアイテムを表示できます。
Contoso サイトの見栄えが良くなってきました。 しかし、閲覧者が探している商品を表示し、簡単に見つけることができるようにする必要があります。 次のステップでは、どの絞り込み条件をサイトで使用するかについて考慮します。 サイトに使用する絞り込み条件の説明から始めます。
このシリーズの次の記事
ステージ 12: 第 1 部の SharePoint サーバーのファセットを移動するための絞り込み条件を使用しようとしました。