Webflowで作成したブログページに自動生成される目次を追加する方法
WebflowのCMS機能を用いて作成したサイトのブログで、目次を自動生成する方法について解説していきます。
この手順に沿って行えば、ブログの見出しタグから自動で目次が生成されるようになります。目次を追加することで、UXが高まるので、是非追加してみましょう。
今回は、こちらのページに目次を追加することを想定して作成していきます。
※最後にコピペするだけのコードを記載しておりますので、理解していくのがめんどくさいという方は最後のコードをお使いください。
表示エリアの設置とSelectorの設定
目次を表示するエリアを作成し、ブログの本文のエリアに対してSelectorを設置していきます。
目次エリアの追加とSelectorの設定
CMS Collection PagesにあるBlog Posts Templateで、ブログタイトルの下に目次のエリアを追加する必要があります。
今回は、目次のエリアとしてDiv Block(Selectorは「Post Outline」とします)を追加し、その子要素として「目次」というテキストと、自動生成される目次を表示するエリアになるDiv Block(Selectorは「toc」とします)を追加します。
ブログのコンテンツにSelectorを設定
ブログのコンテンツから目次を自動生成するために、コンテンツのエリアのSelectorに「Post Content」を追加します。
この段階でのWebflowで表示はこのようになっているはずです。

Javascriptのコード追加
ブログ本文の見出しタグから目次を自動生成するために、Javascriptのコードを追加していきます。
弊社ではブログのタイトルにh1タグをつけ、見出しにはh2、h3タグをつけるというルールで本文の作成を行なっているため、
h2・h3タグから目次を自動生成するというルールで行なっていきます。
h4タグも使っているという方は、h4タグに関するコードを追記いただければ、h4タグも含めた自動生成を行うことが出来ます。
ここでは、コードをBlog Post Templateのページの「Before tag」に追加していきます。
「Before tag」に追加する手順は下記になります。

目次を自動生成するコードの追加
下記のコードを追加し、ブログ本文から目次が自動生成されるようにします。
今回はブログ本文のエリアに「Post Content」というSelectorを設定しており、ブログページが表示される際には、このエリアのclass名はpost-contentとなります。
本文のエリアに設定するSelectorに応じて、追加するスクリプト内にある'containar'の箇所は変更してください。
コード追加後の目次エリアの表示はこのようになります。

各見出しにidを付与
この状態でも目次内の項目をクリックした際に該当する見出しまでスクロールがされますが、正しく動かないケースがあります。
これは、各見出しに付与されているidが見出しのタイトルに依存しているためです。
例えば見出しにアルファベットが含まれない場合は、同じidが付与されるといった事象が発生するため、正しくスクロールが行われません。
今回は、下記のコードを追加し、見出し順にidを1,2,3・・と付与していきます。
これで、目次クリック時に正しくスクロールが行われます。
目次エリアの表示非表示
ブログページに寄って、見出しが存在しないケースもあるかもしれません。
今回は、ブログ本文にh2タグの見出しがない場合には、目次エリアを非表示にします。
目次エリアには「Post Outline」というSelectorを設定しており、下記コードを追加することで、表示非表示の切り替えを行うことが出来ます。
cssのコード追加
今の状態では、h2の見出しもh3の見出しも並列で表示されており見にくいので、見た目の改善を行います。
目次にナンバリングを行うためにコードを追加
ナンバリングを行うために、下記のコードを追加してください。
コード追加後の目次エリアの表示はこのようになります。

見た目を整えるためのコードを追加
リストのマークは非表示にし、またh3タグの見出しに対応する箇所は、左側にmarginを作ることで、少し右にずらします。
下記のコードを追加してください。
コード追加後の目次エリアの表示はこのようになり、これで完了です。

コピペするだけのコード
ここまで長々と解説してきましたが、最後にここまで解説してきた全コードを載せておきます。
これをコピペするだけで、目次の自動生成を実装することができます。
お疲れ様でした!!