SWELL目次の作り方とカスタマイズ設定｜サイドバーに追従表示する方法も紹介

「ページ内に目次を作りたい…」

「目次のデザイン変更や目次広告を設定できる？」

「目次をサイドバーに追従表示させるには？」

この記事ではそんな方に向けて、SWELLで目次の作り方とカスタマイズ設定を解説します。

この記事を読めば、あなたも簡単に

• 目次をページ内とサイドバーに設置できる

ようになります。

私もあなたと同じことに悩んでたのですが、本記事の方法でサクッと解決でき、ユーザーの利便性を高めることができました。

どこよりも分かりやすく書いている自信がありますので、あなたもパパッと解決してみてください！

＼SWELL購入を検討中の人はこちらもご覧ください！／

SWELL目次の作り方

SWELLで目次の作り方は、以下の3ステップです。

それぞれのステップを詳しく解説します。

H2見出しを作成する

まず始めに、ページ内にH2見出しを作成していきます。

H2見出しの作成方法は以下の4パターンから選んでください。

SWELLではH2見出しのデザインを12種類の中から選べたり、画像やアイコンの挿入もできます。

見出しをおしゃれにデザインしたい場合は、下の記事を参考にしてください。

目次を表示したいページを選ぶ

つぎに、目次を表示したいページを「投稿ページ」「固定ページ」の2つから選びます。

最後に作成した見出しの数に応じて、目次の表示・非表示を決める設定を行います。

目次の表示条件を満たす

同ページの左サイドバーに「見出し何個以上で表示するか」という項目があります。

ここでは目次の表示条件を設定でき、設定した数字がページ内の見出し数より小さければ目次を表示させることができます。

例えば、以下の例を見てみましょう。

ページ内の見出し数	見出し何個以上で表示するか	目次の表示/非表示
２	１	表示されない
5	8	表示されない
4	2	表示される

つまり、

ということです。

これで目次を作成できます。

ページ編集画面で目次は表示されません。目次が作成されているかはプレビューで確認してください。

SWELL目次のカスタマイズ設定8つ

SWELLでは目次を以下の8項目でカスタマイズ設定できます。

それぞれ詳しく解説します。

これか紹介するカスタマイズ設定の全項目は、カスタマイザーから行います。

目次のデザインを4種類から選択する

SWELLでは目次のデザインを以下の4種類から選べます。

「目次のデザイン」からカスタマイズしてください。

目次のリストタグ(ドットor数字)を決める

目次のリストタグを「ドット」or「数字」の2種類から選べます。

「目次のリストタグ」から設定してください。

擬似要素(ドット・数字部分)のカラー設定

目次のリストタグのカラーを以下の3種類から選べます。

「擬似要素(ドット・数字部分)のカラー」から設定してください。

どの階層の見出しまで抽出するか

目次に表示させる見出しのレベルを「H2」~「H5」まで選べます。

「どの階層の見出しまで抽出するか」で設定してください。

目次の省略表示を設定する

目次の省略表示を以下の4パターンから設定できます。

• 省略しない…「どの階層の見出しまで抽出するか」で設定した見出しすべてが表示される
• 指定の数を超えた分を省略する…「項目が何個を超えると省略するか」で設定した数を超えた分だけ見出しが省略される
• h3以下を省略する…「項目が何個を超えると省略するか」で設定した数を超えた分だけH3見出しが省略される
• 指定の数を超えた分+h3以下を省略する…「項目が何個を超えると省略するか」で設定した数を超えた分だけH3見出しとその他見出しが省略される

「目次の省略表示」と「項目が何個を超えると省略するか」でカスタマイズしてください。

個人的には、「省略しない」か「指定の数を超えた分を省略する」のどちらかがおすすめです。

H3見出し以下を省略した場合、H2見出しだけでは情報が細かく伝わりずらくなるからです。

H3見出しを表示させれば、ユーザーのニーズを細かく把握しやすくなりますよ。

目次のタイトルを編集する

目次のタイトルを自由に編集できます。

「目次のタイトル」でカスタマイズしてください。

開くボタン・閉じるボタンのテキスト変更

目次の開くボタンと閉じるボタンのテキストを自由に変更できます。

「開くボタンのテキスト」と「閉じるボタンのテキスト」で設定してください。

開くボタンと閉じるボタンは目次から見出しが省略されたときのみしか表示されません。見出しの省略度合いは「目次の省略表示」で設定できます。

目次広告の表示設定

SWELLでは目次の前か後に広告を表示させることができ、表示させるページの種類も「投稿ページ」「固定ページ」で選択できます。

以下の表は、目次前と後にGoogleアドセンス広告を設置した場合の収益比較です。

広告の種類	広告の位置	収益
			Googleアドセンス	目次前	多い
目次後	少ない

目次前に広告を設置した場合、ページ内リンクがない限り、必ず広告を目にします。

一方、目次後に広告を設置すると目次から任意の見出しへジャンプされてしまい、広告を見せずに終わってしまう可能性があるでしょう。

SWELLでGoogleアドセンス広告の設定がまだな方は、下の記事を参考にしてください。

広告を表示させるページの種類は投稿ページのみでOKです。

固定ページは主に、「プロフィール」「プライバシーポリシー」「お問い合わせ」「サイトマップ」であり、広告が邪魔になるケースがあるでしょう。

SWELL目次をサイドバーに追従表示させる方法

SWELLでは目次をページ内だけではなく、サイドバーに追従表示させることができます。

追従表示とは…ページをスクロールしても常に画面の一定位置に表示されること

設定方法は以下のとおりです。

「追尾サイドバー」に目次以外のウィジェットを複数入れると目次の表示面積が小さくなるので注意してください。

SWELL目次ボタンを画面右下に固定表示させる方法

SWELLではかんたんに目次ボタンを画面右下に固定表示できます。

設定方法は以下のとおりです。

ちなみに、この目次ボタンをクリックすると以下のような見出し一覧が表示されますよ。

まとめ：SWELL目次を作成してユーザーの利便性を高めよう

今回は、SWELLで目次の作り方とカスタマイズ設定を紹介しました。

当ブログではSWELLに関する記事をいくつか書いてます。

下のページにまとめていますので、のぞいてみてください。