読者の利便性を高めてくれる目次は、ブログ記事に無くてはならないものです。
目次の作成は、WordPressテーマSWELLなら簡単に行うことができます。
SWELLには目次作成の機能が標準装備されているので、プラグインを入れる必要もありません。
さらに、目次のデザインも４種類と豊富に揃っています。
とても使いやすい機能なので、サクサクと目次が出来上がり、記事作成も捗りますね。
この記事では、初心者の方向けに、SWELLのページに目次を作る方法と、カスタマイズの方法についても解説していきます。
SWELLのページに目次を作る方法
トピック・見出し・目次
ブログの記事は、複数のトピック（話題）が集まって出来ています。
でも、トピックをそのまま集めただけだと、記事の全体像が掴みにくいですよね。
そこで、トピックの内容を簡潔に示す標題として、見出しをつけます。
さらに、見出しを順序立てて並べることで、目次が出来上がります。
こうすれば、目次をザッと眺めただけでも記事の全体像が掴めるようになるのです。
このことは紙の本でも全く同じですね、
SWELLの目次作成の仕組み
SWELLの目次作成機能は、１つ目の「H2タグ」の直前に目次を自動的に表示するというものです。
目次を作成したい場合には、見出しに「タグ」をつける必要があります。
「タグ」とは、Webページ上の文字などをどこに表示させるか命令する文字列のことです。
「H」はHeadingの略で、見出しという意味です。
「2」は見出しの階層を表す数字で、Ｈ1~Ｈ6まで6つのＨタグがあり、数字の小さいＨタグほど階層が高くなります。
SWELLの目次作成機能で主に使用するのは、「H2」「H3」の2つです。
見出しにタグをつける
それでは、実際に目次を作ってみましょう。
タグは見出しの抽象度によって使い分けていきましょう。
複数の見出しをまとめた見出しにはH2タグ、具体的な方法について記述しているトピックの見出しにはH3タグを使用すればいいと思います。
H2タグ
下図の中にある「方法１：直接URLを貼り付ける方法（簡単）」という見出しに、H2タグを付けてみます。
タグを付けたい文章を選択し、一番左の¶（段落）マークをクリックします。
見出しにカーソルを合わせると、プレビューが表示されます。
そのままクリックすると、見出しにH2タグを付けることができます。
タグが付いた見出しは字が大きく太くなり、装飾も施されて、他の文章よりも目立つようになりました。
H3タグ
続いて、下図の中の「手順１：動画のURLをコピーする」という見出しにもタグ付けをしていきます。
こちらは具体的な方法を解説したトピックの見出しなので、H3タグを付けます。
タグを付けたい文章を選択し、一番左の¶（段落）マークをクリックします。
見出しにカーソルを合わせると、プレビューが表示されます。
そのままクリックすると、見出しにH2タグが付きました。
この見出しにはH３タグを付けたいので、「Ｈ２」をクリックしてタグの階層を変更します。
H3タグに変更しました。
H3タグは、H２タグに比べると装飾も大人しくなっていますね。
この作業を繰り返していけば、目次が出来上がります。
このブログは、２つ以上の見出しで目次が表示されるように設定しています。
この見出しの数は変更できます。（後述します。）
目次が出来ているか確認する
それでは、実際に目次が表示されているか見てみましょう。
SWELLの記事作成の画面では、目次は表示されていません。
「投稿を表示」をクリックして、実際の記事を見て目次が表示されているか見てみましょう。
実際の記事には、目次が表示されていますね。
SWELLの目次のカスタマイズ方法
SWELLの目次は、目次タイトルやデザイン等をお好みに合わせて変更することができます。
「外観」⇒「カスタマイズ」⇒「投稿・固定ページ」⇒「目次」の画面から、目次のカスタマイズができます。
目次のタイトル
タイトルに自由にテキストを入力できます。
「もくじ」のようにひらがなで表記することもできます。
目次のデザイン
目次のデザインを以下の４種類から選択できます。
シンプル
ボックス
上下ボーダー
ストライプ背景
目次のリストタグ
目次のリストタグを以下の２種類から選択できます。
olタグ
ulタグ
疑義要素（ドット・数字部分）のカラー
疑似要素（ドット・数字部分）のカラーを、「テキストカラー」「メインカラー」「カスタムカラー」から選択できます。
テキストカラー
メインカラー
どの階層の見出しまで抽出するか
「H2」と「H3」の２種類から選択できます。
「H2」を選択した場合、H2タグを付けた見出しだけ目次に表示されます。
見出しが何個以上あれば抽出するか
見出しが何個以上あれば目次を表示するかというルールです。
１個以上から選択できます。
まとめ
この記事では、SWELLのページに目次を作る方法を解説しました。
SWELLの目次作成機能があれば、プラグインがなくてもお手軽な操作で目次をサクサクと作っていくことができます。
目次を作ることで利便性を高め、読者の満足度の高いブログを作っていきましょう。
