目次の使い方-SIRIUS2の使い方

SIRIUS2では数クリックの設定で「ページ内の目次」を自動作成できます。
ページ内の見出しを自動で読み込むため、メンテナンスフリーで運用可能。

＜目次＞機能を使うためには事前の設定が必要です。

記事装飾メニューの［目次］→「目次の全体設定」をクリックすると下のような設定画面が開きます。

①（チェック項目）

＜目次＞機能を使うにはまずここにチェックを入れます。

②タイトル

目次最上段に表示するテキスト。

③配色

背景色の設定。デフォルトはグレーですが、ほかにもブルー/グリーン/レッドなど9色が用意されてます。

④デザイン

シンプル/ビジネス/ポップなど8種類のレイアウトが用意されてます。ちなみに下は「ビジネス」選択時のデザイン。

⑤リストタグ

目次の先頭に数字を付けるか付けないかの選択。

⑥見出し

どの見出しレベルまで目次内に表示するかの設定。

①表示するページ

「独自タグを指定したページのみ」を選択した場合はページ内に「<% index %>」という目次用独自タグを挿入したページのみ目次が表示されます。

［目次］→「目次タグの挿入」で入力できます。

「独自タグを指定したページのみ」以外を選択した場合はどの位置に目次を表示するかの『表示位置』選択肢がアクティブになります。

「独自タグを指定したページのみ」以外を選択した場合は「<% index %>」タグが挿入されてなくても自動的に目次が表示されます。

ただし「<% index %>」タグが挿入されている場合はそちらの方が優先されます。

②横幅を自動調整する

ここにチェックを入れると目次内のテキスト量に応じて横幅が自動調整されます。
チェックを外すと固定幅での表示になります。

③角丸ボックスにする

背景の四隅を角丸にします。

④目次を閉じた状態にする

通常は目次がすべて開いた状態になりますが、ここにチェックを入れると目次が閉じた状態で表示されます。
利用者は目次を見たい時に”開く”マークをクリックするという感じですね。

⑤閉じるボタンを非表示にする

ここにチェックを入れると「閉じる」ボタンが非表示になり、強制的に目次が全開放された状態になります。

⑥作成条件

「見出し」で設定した見出しの数がここで設定した数値以下の場合は目次を表示しないという設定です。
サンプル設定であれば「3つ以上の見出しがある場合のみ目次を生成・表示する」となります。

”見出しが少ない→記事量が少ない”のに目次を表示してもかえって邪魔になるという感じでしょうか。

⑦目次の制御

目次というのは基本的には目次より下にある内容の項目表示機能なので通常はこちらを選択します。

”いやいや目次には全見出しを表示させたい”というのであればもう一つの選択肢「全ての見出しを対象にする」に変えます。

①見出しタグに付与するIDの設定

ここは目次が生成するHTMLコードにどんなIDを自動付与させるかの設定で、特に問題がなければ通常はこのままにしておきます。

②横幅を100%にする

「横幅を自動調整する」で自動調整のチェックを外してる場合は固定幅での表示になり、ここがアクティブになります。
さらにここにチェックを入れるとコンテンツ表示幅いっぱいでの表示になります。

③目次の位置を左寄せにする

デフォルトではコンテンツ幅の中央に表示されますが、ここにチェックを入れると左寄せでの表示になります。

④H2見出しとH3見出しを分けて目次を作成

ここにチェックを入れると、H3見出しはH2見出しよりも少し右にずれて表示されます。
チェックを入れない場合はH2見出しもH3見出しもアタマの位置が揃って表示されます。

⑤記事タイトルをH2タグとして処理する

公式マニュアルでは次のように書いてあります。

SIRIUSの仕様上、記事タイトルはH3見出しとして扱っていますが、この項目にチェックを入れることで記事タイトルをH2として目次を作成する事ができます。

しかしながら筆者の環境では最初から記事タイトルはH2として扱われてます。なのでちょっとここはよくわかりません。
よってここのチェックは常にONにしてます。
（旧SIRIUSは確かにH3扱いだった）

⑥（数字付き）カウンターを入れ子にする

『リストタグ』で「数字付き」を選択している場合、通常はどのレベルの見だしでも”1,2,3”と整数で表示されます。
ですがここにチェックを入れた場合は深い階層にある見出しは入れ子形式で表示されます。

目次の上（もしくは下）に何らかのコンテンツを表示させておきたい時に利用します。
たとえば広告コードを貼るとかですね。

ここまでは目次全体に共通して適用される設定でした。

しかしながらページの内容次第では別のデザインに切り替えたり目次の上下に共通設定とは別のコンテンツを表示したい場合もあるでしょう。そういうときは『目次の個別設定』に切り替えます。

使い方は簡単。個別設定を適用したいページを開き、記事装飾メニューの［目次］→「目次の個別設定」を選択します。
『個別設定』→「個別に指定する」を選択します。

これでグレー表示になってた部分がアクティブになるので、必要箇所を適宜変更していきます。