Discussions 概要
Discussions Web パーツには独自の色やフォントの設定がありません。その代わりに、配置されたページのテーマ (サイト テーマ、セクションの背景、サイトのフォント) を引き継ぎ、タブや個人用アプリとして動作するときは Microsoft Teams のテーマを引き継ぎます。これにより、ボードは設定なしでイントラネットの他の部分と同じ外観になり、サイト テーマが変わっても読みやすさが保たれます。この記事では、テーマのどの部分がどこで使われるかを正確に説明し、サイトの外観を変更したときに何が起きるかがわかるようにします。
テーマが Web パーツに届く仕組み
ページがレンダリングされるとき、SharePoint Framework は現在のテーマ、つまりサイト テーマ、または独自の背景を持つページ セクション内ではそのセクションのテーマ バリアントを Web パーツに渡します。Web パーツは決まった一連のテーマ スロットをルート要素の CSS カスタム プロパティ (--bodyText、--link、--primaryButtonBackground など) にコピーし、そのスタイル シートがこれらのプロパティを参照します。テーマが変わるたびに (サイト所有者が別のテーマを選ぶ、ページ作成者がセクションの背景を変更する、Teams がダークに切り替わる)、SharePoint は Web パーツを再レンダリングし、プロパティが再度書き込まれます。
両方の Web パーツは Fluent UI で構築されているため、ページ上の標準コントロール (ビュー タブ、ドロップダウン、検索ボックス、ボタン、コマンド バー、メッセージ バー) は Fluent UI 自身によってテーマが適用されます。カスタム プロパティは、製品が独自に描画する部分 (トピック行、バッジ、返信ツリー、エディター) を対象としています。
テーマ スロットとその使用箇所
Web パーツは次のテーマ スロットをコピーします。表にはインターフェイスで見えるものを掲載しています。このほかに、Fluent UI コントロール用にいくつか (アクセントとプライマリ ボタンの各状態、カードの影、無効時の枠線、ボタンの背景とテキスト、neutralSecondary) がコピーされます。
| テーマ スロット | 使用箇所 |
|---|---|
bodyText | トピックのタイトル、投稿のテキスト、Web パーツのタイトル、未設定 画面のテキスト |
bodySubtext | メタデータ行 (作成者、時刻、カテゴリ)、抜粋、カウンター、プレースホルダー、引用 |
bodyBackground | エディター領域 |
bodyStandoutBackground | トピック行のホバー色、種類アイコンの円、ニュートラルなバッジ、エディターのツール バー、コード ブロック、メンション一覧の強調表示項目 |
bodyFrameDivider | トピック行の間の線、トピック本文の枠線、入れ子になった返信の左の枠線、エディターの枠線、引用の枠線、編集モードのタイトル入力欄 |
link、linkHovered | 投稿内のリンク、トピック タイトルのホバー色、エディターのフォーカス枠線 |
accent | トピックの種類アイコン、現在のユーザーがいいねした後の いいね ボタン |
primaryButtonBackground、primaryButtonBackgroundHovered、primaryButtonText、primaryButtonBorder | 新しいトピック、投稿、掲示板を作成 などのプライマリ ボタン |
successBackground、successIcon、successText | 回答済み バッジと 承認された回答 バッジ、回答済みの質問のアイコン、ベスト アンサーの背景 |
infoBackground、infoIcon | 質問 バッジと 承認待ち バッジ、保留中アイテムのマーカー |
errorBackground、errorText | モデレーション キューの報告件数バッジ |
これらの名前は Fluent UI テーマのスロットで、SharePoint がサイト テーマのプライマリ カラーから導出するものと同じです。Theme Generator で作成したカスタム サイト テーマはこれらすべてを設定するため、組み込みのテーマだけでなく、どのテーマでもボードに一貫した色が付きます。
セクションの背景と全幅セクション
両方の Web パーツはテーマ バリアントのサポートを宣言しています。ページ作成者がセクションに背景 (セクションの背景: ニュートラル、ソフト、ストロング) を設定すると、Web パーツはその背景に対応するバリアントを受け取って色を変えます。ストロングの背景ではテキストが明るくなり、区切り線もそれに合わせて変わります。Discussions Web パーツはさらにコミュニケーション サイトの**全幅セクション**をサポートします。Discussions Activity Web パーツは狭い列向けに設計されており、全幅セクションはサポートしません。
サイト フォント
サイトがカスタム フォント (サイトの外観の変更 → フォント、または SharePoint ブランド センターで設定したブランド フォント) を使用している場合、SharePoint はそれを CSS 変数 --fontFamilyCustomFont100 としてページに公開します。Web パーツはこの変数を読み取り、描画するすべての要素 (タイトル、行、投稿、エディター) にそのフォントを適用します。カスタム フォントがない場合、変数は空になり、Web パーツはページのフォント、つまり SharePoint では Segoe UI を継承します。コード ブロックは常に等幅フォント (Consolas、Courier New) を使用します。
📝 注
ボードの作成または選択中に表示される 未設定 画面は、サイト フォントではなく標準の Segoe UI フォント スタックを使用します。ボードの構成後に閲覧者が目にするものはすべてサイト フォントに従います。
Microsoft Teams
チャネル タブまたは個人用アプリとして動作する場合、Web パーツは SharePoint テーマではなく Teams クライアントのテーマを読み取ります。
| Teams のテーマ | Web パーツが使用するもの |
|---|---|
| 既定 (ライト) | Teams に合わせた固定のライト パレット: 濃いテキスト、青いリンクとボタン、明るい区切り線 |
| ダーク | 固定のダーク パレット: 白いテキスト、半透明の白いリンクとアクセント、濃いグレーの背景と区切り線 |
| ハイ コントラスト | ライト パレット |
切り替えは即時です。クライアント設定で Teams のテーマを変更すると、タブが再レンダリングされます。Teams では基になる SharePoint サイトのサイト テーマは使用されないため、サイトのテーマに関係なく、どのチームでもボードは同じ外観になります。Web パーツを Teams に追加する方法は、「KB10393. Discussions を Microsoft Teams に追加する方法」で説明しています。
右から左に書く言語
サイトの言語が右から左に書く言語 (アラビア語、ヘブライ語) の場合、Web パーツはルート要素のテキスト方向を右から左に設定します。ツール バー、カウンター、返信ツリー、エディターがそれに応じて左右反転します。方向はブラウザーの言語ではなく、サイトの言語に従います。
インターフェイスの言語と日付
Web パーツのラベル (ビュー、ボタン、バッジ、作成するリストの列名) は、英語、ロシア語、ラトビア語、ドイツ語、フランス語、日本語、オランダ語、スペイン語など、複数の言語で利用できます。インターフェイスと相対時刻 (例: 3 時間前) は、ユーザーの SharePoint UI 言語に対応するサポート対象のロケールで表示され、対応するものがない場合は英語が使われます。トピックと返信のテキストは、もちろん作成者が書いたとおりです。バージョン 26.10.3 以降は、トピックと各返信の相対時刻にポインターを合わせると、ブラウザーのタイム ゾーンで、ローカライズされた長い形式の完全な日付と時刻が表示されます。たとえば、英語のサイトでは October 29, 2026 10:15 AM、ロシア語のサイトでは 29 октября 2026 г., 10:15 のように表示されます。トピック一覧、Discussions Activity Web パーツ、およびモデレーション キューの相対時刻には、このようなヒントはありません。
変更できないもの
- プロパティ ウィンドウにはカラー ピッカー、テーマの上書き、カスタム CSS のオプションはありません。色を変える唯一の方法は、サイト テーマまたはセクションの背景を変更することです。
- トピックの種類のアイコン (ディスカッションは吹き出し、質問は疑問符、回答済みの質問はチェック マーク) とバッジのテキストは固定です。
- レイアウト (ツール バー、行の構造、カウンターの位置) は固定です。「KB10422. ビュー、ページング、検索、カウンター: Discussions Web パーツの表示設定」の表示設定で、どの要素を表示するかを決めます。
💡 ヒント
ボードをページの他の部分より目立たせたい場合は、ソフトまたはニュートラルの背景を持つ独立したセクションに配置し、Web パーツにタイトルを付けてください。Web パーツはセクションのバリアントを自動的に採用するため、暗い背景でテキストが読めなくなる心配はありません。
