RSS Reader 概要
RSS Reader のプロパティ ウィンドウの表示グループでは、集約されたアイテムの見た目を決定します。レイアウト、アイテム数、そしてイメージ、ソース タブ、分類タグ、検索ボックスといった省略可能な要素のどれを表示するかです。この記事では、各オプションとその背後にある動作を説明し、Web パーツをページ上の配置場所に合わせられるようにします。セットアップの手順は、KB10367. RSS Reader Web パーツを追加して構成する方法で説明しています。
3 つのレイアウト
レイアウトオプションでは、コンパクト、ニュースレター、カードを選択できます。3 つとも同じアイテムを同じ順序で表示しますが、密度と、アイテムのどの部分が表示されるかが異なります。
| コンパクト | ニュースレター (既定) | カード | |
|---|---|---|---|
| 配置 | アイテムごとに 1 行 | アイテムごとに 1 段、左にイメージ、右にテキスト | 流動的なグリッドのタイル、上部にイメージ |
| タイトル | あり、1 行、省略記号で切り詰め | あり | あり |
| 説明 | 1 行、切り詰め。全文はツールヒントで表示 | あり | あり |
| イメージ | — | 110 × 110 px のサムネイル | 横長のイメージ (縦横比 1.6)、カードの全幅 |
| 日付 | あり、短い形式 (3 時間) | あり (3 時間前) | あり、短い形式 |
| 作成者 | — | あり | あり |
| 分類タグ | — | あり (分類がオンの場合) | — |
| 適した場所 | サイドバー、3 分の 1 幅の列、多くの Web パーツを置いたダッシュボード | 2 分の 1 または 3 分の 2 幅の列のニュース ストリーム | 全幅セクション、ランディング ページ、コミュニケーション サイト |
コンパクトは、タイトルの一覧です。各アイテムは 1 行に収まり、中太のタイトル、省略記号で切り詰められた説明、日付が表示されます。説明にマウス ポインターを合わせると全文が表示されます。このレイアウトにはイメージ、作成者、タグがないため、ニュースレター レイアウトのアイテム 5 件分の高さに 20 件のアイテムが収まります。
ニュースレターは、定番のニュース行です。左に正方形のサムネイル、右にタイトル、説明、そして分類タグ、相対日付、作成者を含むフッターが表示されます。アイテムは細い線で区切られます。
カードは、アイテムをタイルとして配置します。各タイルには上部に横長のイメージ、その下にタイトルと説明、そして日付と作成者を含むフッターがあります。タイルの幅は 200 px 以上で、行を埋めるように広がるため、列数はセクションの幅に応じて決まります。全幅セクションでは 3 ～ 4 枚、2 分の 1 幅の列では 2 枚のカードになります。イメージのないカードには、グリッドが揃うように、同じ比率の中立的なプレースホルダー領域が表示されます。カードにはサイト テーマのカードの背景、枠線、影が適用され、マウス ポインターを合わせると枠線が強調表示されます。
💡 ヒント
レイアウトは列に合わせて選んでください。3 分の 1 幅の列にはコンパクト、2 分の 1 および 3 分の 2 幅の列にはニュースレター、全幅セクションにはカードです。ページ右側の縦のセクションでは、ほぼ常にコンパクトが正しい選択です。
表示するアイテム数
表示するアイテム数スライダー (1 ～ 40) は、表示されるアイテムの最大数を設定します。この上限はソース、分類、検索のフィルターの後に適用されるため、Web パーツは常に、選択した数までの一致するアイテムを表示します。上限はダウンロードされる量を減らすものではありません。すべてのフィードのすべてのアイテムが読み込まれ、ソース タブや分類を選択した読者には、その選択結果の先頭のアイテムが表示されます。
数はレイアウトと配置場所に合わせて選んでください。コンパクトのサイドバーには 5 ～ 8、ニュースレターには 6 ～ 12、カードには最後の行が埋まるように列数の倍数 (6、8、9、12) が目安です。
イメージ
イメージスイッチ (表示 / 非表示) は、ニュースレターとカードのレイアウトの画像を制御します。Web パーツがイメージを生成したり切り抜いたりすることはなく、発行元がアイテムに添付した画像を、次の優先順位で取得します。
- Media RSS の
media:content要素 (宣言されたサイズ付き) - Media RSS の
media:thumbnail要素 - ポッドキャスト フィードの iTunes アートワーク
- アイテムの HTML 説明内の最初の画像。幅または高さが 1 ピクセルと宣言されている画像 (トラッキング ピクセルやスペーサー) はスキップされます。
いずれも持たないアイテムは、イメージなしで表示されます。画像はブラウザーが発行元のサーバーから読み込み、サムネイルまたはカードのヘッダーを埋めるように拡大縮小される (cover フィット) ため、元の画像の比率は問題になりません。
フィードにイメージがない場合や、発行元の画像が低品質のストック フォトである場合は、イメージを非表示にしてください。イメージなしのニュースレター レイアウトは、すっきりしたテキストの一覧になります。
ソース タブ、分類タグ、検索ボックス
3 つのスイッチで、一覧の上と中に読者向けのコントロールを追加できます。読者側から見た説明は、KB10369. RSS Reader: エンド ユーザー向けクイック ガイドにあります。
- フィルター — アイテムの上のタブの行です。すべてと、ソースごとに表示名を付けた 1 つのタブが表示されます。フィードが 1 つだけの場合や Web パーツの幅が狭い場合はオフにしてください。長い名前が多いとタブはきれいに折り返されません。
- 分類 — ニュースレター レイアウトでの各アイテムのタグです。クリックして絞り込めます。発行元が記事にタグを付けている場合にのみ有用で、タグのないフィードではこのスイッチに目に見える効果はありません。
- Search box (検索ボックス) — 読み込まれたアイテムをタイトル、説明、作成者、ソースで絞り込む検索フィールドです。アイテムが 10 件程度以上ある場合に価値があります。
Web パーツのタイトル
タイトルは、編集モードでページ上に直接入力し (Web パーツのタイトル プレースホルダー)、セクションの見出しスタイルでコントロールの上に表示されます。独自の見出しの下に配置した Web パーツでは、空のままにしてください。
テーマ、ダーク モード、フォント
RSS Reader は、サイトのテーマから色を取得します。タイトルにはリンクの色、本文テキストの色、カード レイアウトにはカードの背景、枠線、影、ニュースレターの行には区切り線です。Web パーツを背景付きのセクション (中間、ソフト、強調) に配置すると、そのセクションのテーマのバリエーションに適応します。Microsoft Teams では、Web パーツは Teams クライアントのライト テーマとダーク テーマに従います。
テキストにはサイトのフォントが使用されます。サイトにカスタム フォントが構成されている場合、Web パーツはそれを継承します。それ以外の場合は、ページの他の部分と同様に Segoe UI を使用します。
全幅セクション
Web パーツは、コミュニケーション サイトで利用できる全幅セクションに対応しています。全幅セクションでは、カード レイアウトが最も多くの列を表示し、スペースを最大限に活用します。ニュースレターとコンパクトのレイアウトは行を全幅に引き伸ばすため、短いタイトルには向いていますが、長い説明は読みにくくなります。これらには通常のセクションを使用してください。
読み込み中の状態
フィードを初めて読み込んでいる間、Web パーツは選択したレイアウトでプレースホルダーの図形 (イメージ、タイトル、説明が入る場所に灰色のブロック) を表示するため、アイテムが届いたときにページがずれることはありません。それ以降のアクセスでは、最後に読み込まれたアイテムがブラウザーのキャッシュから即座に表示され、バックグラウンドで更新されます。KB10371. RSS Reader のフィード ソース、並べ替え、自動更新、キャッシュを参照してください。
