SharePointモダンページにセクションと列を追加する方法をわかりやすく解説

コンテンツをきれいに整理・構成するだけでなく、視覚的にも魅力的なデザインにすることは、読みやすいページを作るうえで非常に重要です。SharePointのモダンページ機能を使えば、レイアウトを自由にカスタマイズし、洗練されたページを作成できます。この記事では、SharePointモダンページにセクションや列(カラム)を追加する方法を、手順を追って詳しく解説します。

SharePointモダンページでのセクションと列の追加方法

SharePointモダンページは、以下のような方法でカスタマイズできます。

1. 列付きのセクションをページに追加する
2. 縦型セクション(垂直セクション)を追加する
3. 既存のセクションを変更する
4. 列にコンテンツを追加する

それでは、レイアウトを整理して列付きのセクションを追加し、魅力的なコンテンツを作成していきましょう。

1. 列付きのセクションをページに追加する

まず、列を配置したいページを開きます。

ページ右上にある「編集(Edit)」を選択します。

次に、マウスカーソルをページタイトル領域の下、または既存のWebパーツの上や下に移動します。すると、丸で囲まれた「+」マークが付いた線が表示され、「新しいセクションを追加」というオプションが現れます。

その丸いアイコンをクリックし、「セクションレイアウト(Section layout)」から必要な列数を選択します。なお、コミュニケーションサイトのページを編集している場合は、ページ全体に広がる「全幅(フル幅)列」を選択することも可能です。

2. 縦型セクション(垂直セクション)を追加する

縦型セクションを追加したいページを開きます。

マウスカーソルをページタイトル領域の下の左端、または既存のWebパーツの上や下に移動し、先ほどと同じように「新しいセクションを追加」を選択します。

丸いアイコンをクリックし、「セクションレイアウト」から「縦型セクション(Vertical section)」を選びます。

注意点として、縦型セクションは現在、ページの右側にのみ配置できます。高さはページ内のコンテンツ量に応じて自動的に調整され、通常のセクションの内容の長さに合わせて伸縮します。

また、ブラウザーのウィンドウ幅が狭い場合、縦型セクションはページ下部に移動します。ウィンドウサイズを広げると、再びページ右側に戻ります。同様に、画面の表示幅が1024ピクセル未満の場合も同じ挙動になります。そのため、「拡大縮小とレイアウト(Scale and layout)」の表示設定を調整することをおすすめします。たとえば、「テキスト、アプリ、その他の項目のサイズを変更する」のドロップダウンで125%以下の値を選択するとよいでしょう。

3. 既存のセクションを変更する

既存のセクションに変更を加えたい場合は、まず編集対象のページを開きます。

まだ編集モードになっていない場合は、ページ右上の「編集(Edit)」をクリックします。

編集モードでは、ページの各セクションが点線で囲まれて表示されます。列を追加したいセクションを選択し、ページ左側の「セクションの編集(Edit section)」をクリックします。

次に、右側に表示される「セクション」ツールボックスで、希望する列の数と種類を選択します。

さらにカスタマイズしたい場合は、セクションの背景色を設定すると、ページをより視覚的に魅力的なものにできます。選択できる色はサイトのテーマに基づいています。

なお、最良の結果を得るためには、特定のWebパーツが含まれるセクションには背景色を使用しないことをおすすめします。

4. 列にコンテンツを追加する

列にコンテンツを追加するには、必ず編集モードになっていることを確認してください。

次に、コンテンツを追加したい列に移動し、その列にマウスカーソルを合わせます。丸で囲まれた「+」マークをクリックすると、モダンWebパーツをページに追加できます。

列に追加したいWebパーツを選択し、そのWebパーツにコンテンツを入力します。

また、2つ以上の列にコンテンツがある状態で列数を減らすと、一番右の列のコンテンツは左隣の列に移動します。同様に、列を1つだけに減らした場合は、2列目や3列目にあったコンテンツは最初の列の下部へ移動します。

(画像出典：Office.com)

以上の手順で、SharePointモダンページにセクションと列を追加でき、ページをより整理された見やすいものにできます。ぜひ実際に試して、自分好みのレイアウトを作成してみてください。