目次・改（ボタンリンク風）-volar2

 

【Volar2】では目次を《ボタンリンク風の並列表記》に変える機能を搭載してます。

1カラムページでの運用をベースに作ってみました。

こちらが通常の目次レイアウトです。

 

 

そしてボタンリンク風に一列表示にレイアウト変更したのがこちら。（※PC表示時）

1カラムの商品紹介ページなんかでたまに見かけるページ内リンクで、クリックすると該当するH2見出しまで一気にスクロールします。

 

 

やり方は目次用の独自タグを【Volar2】で用意している専用のクラスで囲むだけです。

 

表示見出し

表示可能な見出しはH2のみです。

 

表示列

PCでは横並び最大5見出しまで。6見出し以降は2段目に折り返されます。

（※各見出し枠の幅は固定）

 

 

 

背景色

デフォルト設定では背景は透明です。ただしユーザー指定スタイル上で変更することもできます。

 

目次設定

この機能を使うページでは『目次の個別設定』を選択します。

（全体設定のままだと通常の目次がついてるページも変換されてしまうため）

 

 

今回のサンプルでは『タイトル』は空欄にしてますが、入れた場合の設定も一応ついてはいます。