【ノーコード】カラムの中にタイトルがあっても、目次に反映させる方法

こんにちは、オズの魔物使い管理人おーやんです。

今回はノーコードで、カラム内にタイトルがあっても、目次に反映させる方法についてを解説します。

仕様について

テーマ：Lightning G3 （Lightning proでも確認済み）

プラグイン：VK Block pro

カラムの内部のタイトルは目次に反映されない！

Lightningでカラム内にタイトルをつけても、そのタイトルが目次には反映されません。実際に、Vektor社の石川氏はforumにて下記の通り書いていらっしゃいます。

Lightningのご利用ありがとうございます。株式会社ベクトルの石川と申します。

現状ではVK Blocks の目次ブロックについて、カラムブロック内の見出しを含めないのは仕様となっております。
これは
* カラム内部の見出しを取得しにいく処理が複雑である。
* 目次ブロックはもともと複雑で不具合が発生しやすいため、より複雑にすると他の不具合を引き起こしやすくなる。
* カラムに入るという事は、左右に並ぶ程度の項目なので、目次にいれなくても差し支えがないケースが多い（カラムの前に入れる見出しが存在するはずなので、親項目の見出しは目次に入るため）
* 機能の重要度・メンテナンス性と他の実装待ち機能を比較すると、他の機能追加の方が多くのユーザーにメリットがある という理由です。

ご希望に沿える回答でなく恐れ入りますが、その他機能鋭意改善しておりますので、 何卒ご理解いただけますと幸いです。 以上よろしくお願いいたします。

https://vws.vektor-inc.co.jp/forums/topic/2%e3%82%ab%e3%83%a9%e3%83%a0%e3%83%bb3%e3%82%ab%e3%83%a9%e3%83%a0%e3%81%a7%e3%81%ae%e8%a6%8b%e5%87%ba%e3%81%97%e3%81%8c%e7%9b%ae%e6%ac%a1%e3%81%a7%e8%a1%a8%e7%a4%ba%e3%81%a7%e3%81%8d%e3%81%be%e3%81%9b

こちらの記述が2020年11月20日。現在が2023年9月26日ですが、現在もこの点に関しては変わっていません。

ですが、今はカラムは横に表示するためだけではなくおしゃれなページを作るためにも使われていますよね。

例えばこんなデザインとか。

これはVK Pattern Library　でコピーしてきたものですが、
今は株式会社ベクトル様も使い勝手が良い様に、カラムを使った素敵なデザインをカンタンに作れるようにして頂いております。

ですが、上の目次でも確認いただけますが、前述の通り、カラムの中にあるタイトルは目次には反映されません。

今日はこの問題を解決します。

概要

• カラムの前に、レスポンシブスペーサーと見出しブロックを作る
• 見出しブロックは、非表示にして、アンカーをつける
• 同じアンカーをレスポンシブスペーサーにつける

これだけです。

方法の詳細

実際にこんな感じ！

ここまでご覧頂きありがとうございます。

実際に体験してもらいたいので、目次まで戻っていただいて、お試し下さい。

カラム内の見出しも目次に表示されて、リンクになってるかチェック！！

皆さんには青い吹き出しの見出しタグは見えないと思いますが、操作画面上では見えています。

皆さんには背景色もない、フォントサイズの大きいタイトルが見えてるだけになります。