【Volar2】の動作検証でキャプチャした画像は、基本的には【Volar2】の開発ベースになってる「ベーステンプレート」のレイアウトデザインが元になってます。そのため他のテンプレート利用時には当サイトでご紹介しているキャプチャ画像とは若干異なる場合もあります。また他のテンプレート利用時には場合によっては動作に多少の違いが生じる可能性もありますこと予めご了承ください。【Volar2】では目次を”ボタンリンク風”の並列表記に変える機能を搭載してます。1カラムページでの運用をベースに作ってみました。変更のやり方こちらが通常の目次レイアウトです。（ベーステンプレート・デザイン5）そしてボタンリンク風に一列表示にレイアウト変更したのがこちら。（※PC表示時）1カラムページの商品紹介ページなんかでたまに見かけるページ内リンクです。上のサンプル画像はページ全体に和紙風の背景画像を敷いてるので、目次内に背景画像が透けて見えてます。やり方は目次用の独自タグを【Volar2】で用意している専用のクラスで囲むだけ。<div id="xxx"><% index %></div>基本仕様及びカスタマイズ表示見出し表示可能な見出しはH2のみで、H3以下の見出しは無視されます。表示列PCでは1列・1段表示。2段にはまたがらない仕様です。よってあまりにH2見出しが多いとテキストの量によってはかえって見づらくなる場合もあります。タブレットでは2列表示。スマホでは1列表示です。背景色デフォルト設定では背景は透明です。ただし専用スタイル上で変更することもできます。こちらは白の背景色を付けたサンプルです。筆者ページ全体が白背景の場合は枠内も白背景に見えるのであえてこの操作を行う必要はないです。目次設定この機能を使うページでは『目次の個別設定』を選択します。（全体設定のままだと通常の目次がついてるページも変換されてしまうため）今回のサンプルでは『タイトル』は空欄にしてますが、入れた場合の設定も一応ついてはいます。実際のデモがこちらのページでご覧になれます。
