SharePoint クラシックサイトにおけるタイル形式表示の実現方法について

Question

現在、以下の条件で検索結果を表示する Web パーツ（クラシック UI）を利用しております。

クエリテキスト： contentclass:STS_List_DocumentLibrary path:<サイトURL>

上記条件により、対象サイト配下のドキュメントライブラリを一覧表示しています。

クラシックサイトにおいて添付画像のようなタイル形式表示を実現する方法について教えてください。

Microsoftのサポート窓口へ問い合わせしましたところ、アイテム表示のテンプレートの編集を行うことで実現できる可能性があると回答がありましたが、設定方法の詳細についてはサポート外とのことでした。

Answer 1

この回答は自動翻訳されたものです。そのため、文法的な誤りや不自然な表現が含まれている可能性があります。 

---

こんにちは、@O.Yさん 

Microsoft サポートから案内された内容に基づくと、その方法が正しい対応となります。 

クラシック SharePoint では、Search Results Web パーツを使用してタイル形式のレイアウトを実現する場合、通常は Display Template（特に Item Display Template）をカスタマイズします。Item Display Template は、検索結果の各アイテムがどのように表示されるかを制御するテンプレートです。 

現在のクエリで目的のドキュメント ライブラリが正しく取得できているため、クエリ側の変更は不要です。対応すべきポイントは、各検索結果の表示方法（レンダリング）のカスタマイズです。 

具体的な手順は以下のとおりです。 

• 既存の Item Display Template をコピーする、または新規作成する 
• HTML 構造を変更し、検索結果をリスト形式ではなくタイル形式（<div> ベース）で表示する 
• CSS を適用してグリッドレイアウト（例：2～3列表示）を作成する 
• Display Template をアップロードし、Search Results Web パーツで選択する 

この方法により、検索結果をカード形式またはタイル形式で表示できるようになります。 

表示テンプレートは、基本的にHTMLとJavaScriptファイルで構成され、表示するデータとそのUI上での表示方法を定義します。アイテムテンプレートは、個々の結果の表示方法を具体的に制御するため、タイルレイアウトを実装する上で重要なコンポーネントとなります。 

実装をサポートするために、概念と手順をより詳細に解説したMicrosoftの公式リソースを以下に示します。 

1/ 表示テンプレートの概要 (Microsoft Learn): 

• SharePoint デザイン マネージャー表示テンプレート 
• ここでは、表示テンプレートの構造とその作成およびカスタマイズ方法について包括的に説明します。 

2/ 表示テンプレートを使用して検索結果をカスタマイズする: 

• 結果の種類と表示テンプレートを使用して検索結果の外観を変更する 
• ここでは、SharePoint がコントロール テンプレートとアイテム テンプレートを使用して検索結果を表示する方法と、それらを変更する方法について説明します。 

3/ コンテンツ検索 Web パーツ (代替オプション): 

• SharePoint のコンテンツ検索 Web パーツ  
• 代替案を受け入れる場合、この Web パーツでは表示テンプレートを利用することもでき、タイルなどのレイアウト シナリオに柔軟性を提供できる可能性があります。 

さらに、ドキュメントには「タイルレイアウト」が示されていないかもしれませんが、同じ概念が適用されます。HTML を変更し、CSS を追加することで、標準的なリスト形式の結果を、希望するデザインと同様のタイル/グリッドベースのインターフェースに変換できます。 

 

この情報がお役に立てば幸いです。また、他のユーザーからも同様の懸念が寄せられており、フィードバックの共有方法が分からない方もいらっしゃるかもしれませんので、この回答が状況を明確にし、今後の対応策を示唆する一助となればと思います。この情報を強調することで、同じ問題に直面しているコミュニティの他のユーザーにも情報が届きやすくなり、解決策を見つけたり、フィードバックを提供したりしやすくなるでしょう。 

貴重なお時間を割いていただき、またこの重要なユーザビリティに関する懸念を提起していただき、改めて感謝申し上げます。ご質問や追加のサポートが必要な場合は、お気軽にお問い合わせください。 

ご意見をお待ちしております。 

---

回答がお役に立った場合は、「回答を承認」をクリックして、ぜひ高評価をお願いします。この回答についてさらにご質問がある場合は、「コメント」をクリックしてください。 

注：このスレッドに関するメール通知を受け取りたい場合は、ドキュメントの手順に従ってメール通知を有効にしてください。