WordPressテーマ「SWELL」には、記事を読みやすくするための目次機能が標準で備わっているので、記事を書くと自動で目次が表示されます。しかし、「どこで設定するの？」「サイドバーに表示できる？」「デザインを変えたい」など、初めて使う方には少し分かりにくい部分もありますよね！
本記事では、SWELLでの目次の表示方法からカスタマイズ方法までをわかりやすく解説します。サイドバーへの設置やデザイン調整の手順も画像付きで紹介するので、是非参考にしてください！
SWELLでの目次のカスタマイズ設定はココ！
SWELLをインストールするとデフォルトで目次の設定がされていますが、カスタマイズをしたいと思う人も多いと思います。SWELLの目次は以下の場所から設定することができます。
1.管理画面>外観>カスタマイズをクリック
管理画面から外観>カスタマイズをクリック。
2.「投稿・固定ページ」をクリック
3.「目次」をクリック
「目次」をクリックすると以下のような画面が表示されます。ここで目次のカスタマイズが可能になります。
SWELLの目次設定でカスタマイズできる項目
SWELLの目次カスタマイズ機能にはさまざまな項目があります。
1.目次を表示するかどうか
投稿ページか固定ページに目次を表示するかどうかを選択することができます。デフォルトでは、「投稿ページに目次を表示」にチェックが入っているかと思います。記事に目次が表示されない方はこちらにチェックを入れましょう。固定ページとは、サイト内でどのカテゴリにも含まれない、独立したページのことで、ブログメインでサイトを運営している人はプライバシーポリシーページがこの固定ページに該当するかと思います。基本的に、固定ページには目次は不要かなと感じるのでこちらはチェック項目を外しましょう。
2.「目次のタイトル」「目次のデザイン」
目次のタイトルは目次の上部に表示されるタイトルの部分になります。自由に目次タイトルを変更することができます。目次のデザインはSWELLでは4種類準備されており、
- シンプル
- ボックス
- 上下ボーダー
- ストライプ背景
の4つが備わっております。
シンプル
ボックス
上下ボーダー
ストライプ背景
3.「目次のリストタグ」「擬似要素(ドット・数字部分)のカラー」
目次のリストタグはolとulで選択することができます。
olタグは番号付きの目次、ulタグはドット付きの目次が表示されます。
olタグ
ulタグ
擬似要素(ドット・数字部分)のカラーは、
- テキストカラー
- メインカラー
- カスタムカラー
から選択することができます。
4.「どの階層の見出しまで抽出するか」「見出し何個以上で表示するか」
どの段階の見出しまで表示させるかも設定できます。こちらが仮に「h2」に設定すると以下のようになります。
↑h3の表示が消えてh2のみになる。
見出し何個以上で表示するかは、見出しが指定数字以内なら目次を非表示にすることができます。
5.目次の省略表示
目次の省略表示には、
- 省略しない
- 指定の数を超えた分を省略する
- h3以下を省略する
- 指定の数を超えた分 + h3以下を省略する
の4つの項目があるので自由にカスタマイズしてみてください。
また項目が何個超えると省略するかも設定できます。こちらも自分に合った設定をしてみてください！
目次をサイドバーに追従して設定する方法
基本目次は記事の上部に設置されていますが、サイドバーにも表示させることができます。常に右側に表示されているので、記事の全容が見えやすくおすすめです。それではどのように設定すればいいのか見ていきます！
1.外観>ウィジェット
管理画面から外観>ウィジェットをクリックします。
2.追従サイドバーに「SWELL」目次を加える
ウィジェット画面が表示されたら、右側にある「追従サイドバー」の箇所に、左側にある「SWELL」目次をドラック&ドロップで持っていきましょう！
タイトルは自由に変更することができます！
設定を完了すると上記のようにサイドバーに目次が追従されるようになったかと思います！
SWELLの目次設定はカスタマイズ自由自在
SWELLの目次機能は、標準装備ながら自由度が高く、シンプルな設定からデザイン変更、さらにはサイドバーへの追従表示まで幅広く対応することができます！記事に目次を設置することで、読者が必要な情報へすぐに飛ぶことができるので、見やすい記事にすることができます！
👉 さらにSWELLの機能を活用したい方は、ぜひ以下の記事も参考にしてください！
