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

 

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

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

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

（ベーステンプレート・デザイン5）

 

 

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

1カラムページの商品紹介ページなんかでたまに見かけるページ内リンクです。

 

 

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

 

表示見出し

表示可能な見出しはH2のみで、H3以下の見出しは無視されます。

 

表示列

PCでは1列・1段表示。2段にはまたがらない仕様です。

よってあまりにH2見出しが多いとテキストの量によってはかえって見づらくなる場合もあります。

 

タブレットでは2列表示。スマホでは1列表示です。

 

 

背景色

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

 

こちらは白の背景色を付けたサンプルです。

 

 

目次設定

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

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

 

 

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

 

 

実際のデモがこちらのページでご覧になれます。