SharePoint Online でページを作成するときに気を付けていることのひとつとして、テキスト Web パーツでは「見出し」をしっかり活用するというのがあります。見出しを利用することでページ全体の書式を簡単に統一できるだけではなく、便利な機能も利用できるようになります。
そんなわけで、使うと便利な見出しの使い方を紹介します。
テキスト Web パーツの見出しを使う
テキスト Web パーツで見出しを使うには、見出しにしたい段落を選択したあとに、Web パーツのメニューから「見出し」のいずれかを選択します。
見出しの設定はこれだけで完了です。
見出しにすると、その下に続く本文との間に程よいスキマが出来るため、とても読みやすくなります。また、見出しは階層応じて「見出し 1」「見出し 2」「見出し 3」の 3 種類があります。それぞれ設定した直後の文字の大きさが異なります。
HTML のタグとしては、「見出し 1」が「H2」、「見出し 2」が「H3」、「見出し 3」が「H4」になっているようですね。
（2023/8/30 追記）最近のアップデートで、見出しの選択肢が「見出し 2」「見出し 3」「見出し 4」に変更されました。それぞれ「H2」「H3」「H4」となります。
見出しに設定したあとでも他の文字と同じように、文字の大きさや色を設定できます。ただし、あまり弄りすぎると、ページやサイト全体での統一感を出すのに手間がものすごくかかってしまうので、ほどほどにしておくのが良さそうです。
必要なところに見出しを設定したら完成。簡単に統一感も出て、見やすさもアップしました。
見出しを利用するために憶えておくのはこれだけです。簡単に利用できますね。
見出しのアンカーリンクを利用する
見出しを設定すると、アンカーリンクが利用できます。アンカーリンクを使うことで、ユーザーがページを開いたときに、ページ内の指定した見出しのところまで自動的にスクロールした状態で表示されます。例えば規程などがまとめられたページがあったときに、何条の何項などと指定してリンクを作ることができます。
アンカーリンクは、見出しを設定すると自動的に作成されます。作成されたアンカーリンクを確認するには、ページ上の見出しにマウスカーソルを移動したときに表示されるオバケの Q 太郎の口のようなアイコンをクリックすると、ブラウザのアドレスバーに表示される URL がアンカーリンクのものに変わります。
アンカーリンクの URL をよく見ると、「#」に続く部分に見出しに設定した文字が入っているのが分かります。このように「#<見出しの文字>」と URL の後ろに付けることで、アンカーリンクの URL が作成できるわけですね。
この URL を使うと、他のページからページ内の見出しの場所を直接開くリンクを作ることができます。
アンカーリンクで目次を作る
アンカーリンクを利用するとページに目次を作ることができます。テキスト Web パーツを利用してページ内の見出しをリスト形式で書き出し、それぞれに対応する見出しへのアンカーリンクを設定します。このとき「アドレス」の設定には、「#<見出しの文字>」とアンカーリンクの部分だけを指定するだけで OK です。
この方法で作った目次は、文章中の見出しを直したときには、その都度該当する目次の箇所も直す必要があるので注意です。
SharePoint のモダンページには、目次 Web パーツが欲しいという声も多いようなのですが、なかなか実装されないのが残念ですね。コミュニティによる PnP の SharePoint Framework サンプルには、目次を自動で作成してくれる Web パーツもあるようです。標準機能でも実装されると嬉しいのですが……。
さいごに
SharePoint のモダンページを作成するには、用意されているものを適切に使うことを意識することが大切です。テキスト Web パーツの「見出し」の利用もそのひとつではないでしょうか。見出しをきちんと使うことで、作成したページをより見やすく、そして、使いやすくすることができます。見出しを使うことを忘れずにコツコツと行っていきましょう。
