【高機能】SANGOテーマで目次を表示する方法(プラグイン不要)

男の子
男の子

SANGOで目次ってどうやって設定するの?

Table of Contents Plusプラグインいれておけばいいの?

SANGOテーマでは標準で目次生成機能が搭載されているため、プラグインを入れる必要はありません

この記事ではSANGOでの目次の設定方法を解説していきます。

SANGOの目次でできること

SANGO標準の目次機能は便利な機能を多く搭載しています。
機能設定は高機能ながら、実際の画面を見ながら設定できるので非常にわかりやすいです。

  1. 記事内・サイドバー用目次切り替え
  2. 目次の開閉機能
  3. 目次へ戻るボタン
  4. メニューハイライト
  5. スムーススクロール
  6. 複数デザイン利用可能

パフォーマンス向上などの観点からも、SANGOではEasy Table of ContentsやTable of Contents Plusといったプラグインを入れるのはお勧めしません。

目次デザイン

デフォルト以外に、SANGO Landで複数のデザインが配布されています。自分でカスタマイズする必要はありません。

目次の設置方法

さて、ここからは目次を設定する方法を見ていきます。

SANGO目次はブロックとして用意されています。ウィジェット画面に追加して設定します
投稿画面やコンテンツブロック内では利用できないので注意しましょう。

①ウィジェット画面に行く

まずは外観ウィジェットに移動し、ウィジェットの編集画面を開きます。

注意

ウィジェット画面が上の画像のようなブロックウィジェットエディターでないと目次機能は利用できません。

旧タイプのウィジェット画面が表示されている場合、

3系

SANGO設定>⚒基本設定 からレガシーウィジェットを利用のチェックを外してください。

2系

外観>カスタマイズ>⚙詳細設定 からレガシーウィジェットを利用するのチェックを外してください。

②記事内目次を設定

まずは記事の中に表示する目次を設定します。記事内目次用エリアを開きます。

+ボタンを押して、目次ブロックを呼び出します。このまま保存すれば目次は表示されますが、さらに設定していきましょう。

右上の⚙(設定)ボタンを押して設定項目を開きます。

表示スタイル記事内目次を選択
タイトル目次のタイトルを設定します。お好みのタイトルを入力します。
条件設定投稿ページで表示には必ずチェックを入れておきましょう。
見出し数見出しが何個あると目次を表示するかの設定です。1個でOKです。
表示する階層リストを何階層まで表示するかを設定します。2から3の数字がおすすめです。
目次を開閉する目次を開閉できるボタンを表示します。お好みで選択します。
目次リストを開いて表示チェックすると目次は閉じた状態で表示されます。お好みで選択します。
開閉ラベル目次を開閉するをオンにしているときのラベル文章を設定します。
目次へ移動ボタンを表示する目次に移動できるボタンを表示します。
表示形式リスト形式か、数字リスト形式で選ぶか選択します。お好みで選択します。

これで設定は完了です。

必ず右上の更新を押して設定を保存しておきましょう。

③サイド用目次を設定

さらにPCのサイドバーで追尾するサイドバー目次を設定しましょう。追尾サイドバー(PCのみ)を開きます。

先ほどと同じように、+ボタンを押して、目次ブロックを呼び出します。

表示スタイルはサイド用目次を選択します。基本設定は先ほどと同様です。
サイドメニュー設定でタイトルなどの設定をしていきます。

タイトルを中央表示目次のタイトルを中央に表示します。お好みで選択します。
タイトル文字色タイトルの文字色を選びます。
タイトル背景色タイトルの背景色を選びます。
メニューハイライト今記事のどこを読んでいるかわかりやすく表示するきのうです。オンにするのがおすすめです。
メニューハイライトの例

その他利用できる設定

特定の記事で目次を表示したくない場合、記事ごとに目次を出さないことができます。

右サイドバーの投稿設定>SANGO設定からこの記事では目次を隠すにチェックを入れておきましょう。

FAQ集

SANGOで目次プラグインは必要ですか?
いいえ。SANGOテーマには標準で目次機能が搭載されているため、Table of Contents Plusなどのプラグインを入れる必要はありません。
どのようなデザインが使えますか?
SANGOに搭載されているデザインのほかに、SANGO Landで配布されている様々なデザインの目次が利用できます。
SANGO目次でメニューハイライトは使えますか?
はい。メニューハイライトは標準搭載されていて、設定なしで使うことができます。