SharePoint モダン ページに列を含むセクションを追加して、魅力的で整理されたレイアウトを作成します。 コンテンツを並べて表示するには、各セクションに最大 3 つの列を追加できます。 コミュニケーション サイトの一部であるページで作業している場合は、全角の列を追加することで、ページ全体 (端を含む) にまたがる列を作成できます。 列数の異なる複数のセクションを積み重ねることもできます。 右側に垂直セクションを追加することもできます。これは、クイック リンク、連絡先、天気、カウントダウン タイマーなどを表示するのに最適です。
次の例では、左側に 3 つの 1 列セクション、右側に垂直セクションがあります。
注
一部の機能は、対象指定リリース プログラムに参加した組織に段階的に導入されます。 つまり、この機能はまだ表示されない場合があります。または、このヘルプ記事で説明されている機能とは異なって見える場合があります。
ページにセクション レイアウトを追加する
セクションを追加するページに移動します。
まだ編集モードになっていない場合は、ページの右上にある [編集 ] を選択します。
セクションの境界線には、以下のように丸で囲まれた + の線が表示され、[ 新しいセクションの追加 ] というヒントが表示されます。ボタンにカーソルを合わせます。
[ + セクション] を選択します。
必要な列数を選択します。
注
全角セクションは、チーム サイトの一部であるページでは使用できません。 コミュニケーション サイトの一部であるページでのみ使用できます。
セクション テンプレートを追加する
注
セクション テンプレートは現在、Microsoft 365 の SharePoint でのみ使用できます。 この機能は、SharePoint Server 2019 および SharePoint Server サブスクリプション エディションでは利用できません。
セクション テンプレートを追加するページに移動します。
まだ編集モードになっていない場合は、ページの右上にある [編集 ] を選択します。
右側の
に移動します。 ツールボックスの下部に 2 つのセクション テンプレートが一覧表示されます。 これらのいずれかを使用するには、テンプレートを選択します。
その他のセクション テンプレートを表示するには、[ すべてのセクション テンプレートを表示] を選択し、リストからニーズに最も適したテンプレートを選択します。
そのテンプレートがページに追加されたら、テンプレートの各フィールドに目的のコンテンツを挿入します。
柔軟なセクションを追加する
フレキシブル セクションを追加するページに移動します。
まだ編集モードになっていない場合は、ページの右上にある [編集 ] を選択します。
セクションの境界線には、以下のように丸で囲まれた + の線が表示され、[ 新しいセクションの追加 ] というヒントが表示されます。ボタンにカーソルを合わせます。
[ + セクション] を選択します。
[ 柔軟] を選択します。
-
を使用して、フレキシブル セクションに Web パーツを追加します。
セクション ツール バーの [プロパティの編集 ] を選択して、セクション プロパティを編集します。
セクションのサイズを変更するには、セクションの右下にあるセクションのサイズ変更ハンドルを使用します。
垂直セクションを追加する
注
垂直セクションは現在、Microsoft 365 の SharePoint でのみ使用できます。 この機能は、SharePoint Server 2019 および SharePoint Server サブスクリプション エディションでは利用できません。
垂直セクションを追加するページに移動します。
まだ編集モードになっていない場合は、ページの右上にある [編集 ] を選択します。
セクションの境界線には、以下のように丸で囲まれた + の線が表示され、[ 新しいセクションの追加 ] というヒントが表示されます。ボタンにカーソルを合わせます。
[ + セクション] を選択します。
[垂直セクション] を選択します。
狭いブラウザー ウィンドウでは、垂直セクションをページの下部または上部に移動できます。 セクション ツール バーの [プロパティの編集 ] を選択して、ブラウザー ウィンドウが小さいサイズに縮小されたときに垂直セクションをページの最上部と最下部のどちらに移動するかを選択します。
注
- 現在、垂直セクションはページの右側でのみ使用できます。
- 垂直セクションの長さは、ページ上のコンテンツに基づいて調整され、非垂直セクションのコンテンツの長さとともに増減します。
- 全角の列と縦セクションを同じページに配置することはできません。
- 幅の狭いブラウザー ウィンドウでは、垂直セクションがページの下部に移動されます。 ウィンドウを広げると、垂直セクションはページの右側に戻ります。 これは、画面の幅が 1024 ピクセル未満の場合にも発生する可能性があります。 [ スケールとレイアウト] でディスプレイ設定を調整してみてください。たとえば、[ テキスト、アプリ、およびその他のアイテムのサイズを変更する] の下のドロップダウンで、125% 以下の値を選択します。
既存のセクションを変更する
注
コンテンツを 2 つ以上の列に含めている場合、列数を減らすと、右端の列のコンテンツが左の次の列に移動します。 1 つの列に縮小すると、2 列目または 3 列目のコンテンツは 1 列目の下に移動します。
セクションを変更するページに移動します。
まだ編集モードになっていない場合は、ページの右上にある [編集 ] を選択します。
編集するセクションを選択し、セクションの左上にあるツール バーで [ プロパティの編集 ] を選択するか、ページの右側にある [プロパティ] アイコンを選択します。
![セクション ツールバーで強調表示されている [プロパティの編集] ボタン。](../media/section-toolbar.png)
セクションのプロパティで、必要な列の数と種類を選択してセクションを編集します。 また、セクション内でコンテンツを揃えたり、セクションの背景を選択またはアップロードしたりすることもできます。 最初の 4 色の背景色は、サイトのテーマに基づいています。 グラデーションの色や画像を背景として設定すると、テキストが読みやすくなるようにオーバーレイが自動的に追加されます。
注
- セクションの背景色は、下に示すテキスト Web パーツ (左) のように、ほとんどの Web パーツを通して表示されます。 他の Web パーツは、セクションではなくページの背景を保持します。 アクセシビリティのために、リスト、ドキュメント ライブラリ、クイック グラフの Web パーツは常にページの背景を維持します。
- セクション レイアウトは、フレキシブル セクションのプロパティ ウィンドウには表示されません。 フレキシブル セクションの種類と他のセクションの種類の間の切り替えはサポートされていないため、他のセクションのレイアウト オプションには表示されません。
- 最終的にセクションの背景を表示できるが、現在は表示されない Web パーツは、サイト アクティビティ、Yammer の会話、Yammer の強調表示、リストのプロパティ、ページのプロパティ、グループ予定表、Bing ニュース、Microsoft Power Apps です。 最良の結果を得るには、これらの Web パーツを含むセクションにセクションの背景色を使用しないことをお勧めします。
セクションにコンテンツを追加する
まだ編集モードになっていない場合は、ページの右上にある [編集] を選択します。
右側の
を選択して、コンテンツを検索します。 目的の Web パーツを選択またはドラッグ アンド ドロップし、Web パーツにコンテンツを追加します。Web パーツを検索して使用する方法の詳細については、「Web パーツの使用」をチェックしてください。
セクションを折りたたみ可能にする
注
[セクションを折りたたみ可能にする] は、現在 Microsoft 365 の SharePoint でのみ使用できます。 この機能は、SharePoint Server 2019 および SharePoint Server サブスクリプション エディションでは利用できません。
まだ編集モードになっていない場合は、ページの右上にある [編集 ] を選択します。
折りたたみ可能にするセクションを選択し、セクション ツールバーの [ プロパティの編集 ] またはページの右側にある [プロパティ] を選択します。
[セクション プロパティ] の [ このセクションを折りたたみ可能にする] で、トグルをオンに切り替えます。
トグルを目的のオプションに切り替えて、セクション タイトル を使用するかどうかを決定します。 その場合は、セクションの上部に名前を入力し、タイトルの見出しレベルを調整します。
[ セクション間の区切り線を表示する ] トグルをオンまたはオフに切り替えて、セクション間の区切り線を有効にするかどうかを選択します。
[ 左] または [右] を選択して、展開/折りたたみアイコンの配置を選択します。
セクションごとに、トグルを目的のオプションに切り替えて、 既定の表示 を展開するか折りたたむかを決定します。
