- 目次とは
- 目次とは、ブログ記事などで見たいところにすぐ飛べるように、各セクションへのページ内リンクをまとめたものです。WebflowではCMSリッチテキストを分割してIDを付けることで、カスタムコード無しで作成できます。
※この記事の手順・画面は2021年時点のものです。Webflowの現行UIでは名称・配置が変わっている場合があります。
こんにちは。まさとです。
最近、ブログの記事を書いていく内に「目次で見たいところにすぐ飛べた方がいいな」と思いつきました。エジソン並の発想です。そこで今回はWebflowのCMS使ってリンク付きの目次を作ろうと思います。
しかしなんていうことでしょう…WebflowのCMSリッチテキスト内ではページ内リンクを作れねぇじゃんか。というかまず、リッチテキスト内ではIDをつけれないんだね…。ということで今回はCMSで作成したブログ記事にどうにかCMSを使用し、作業量をできる限り削った「ページ内リンク付きの目次を作成する方法」をご紹介していこうと思います。
今回行う方法をざっくり説明するとLISTとリンクをCMS以外で作って他をCMSで作成するという方法。CMS内のリッチテキストを分割し、IDをつけてリンクで飛ばします。ページ毎に編集を行わずにCMS内の作業で目次を作れるように作成しましょう。
と言ってもよくわからんと思うのでとにかく作っていきましょう。
↓この目次の作り方を解説します。
Webflowの目次作り：まずは土台作りから
Webサイトは基本、何通りかの作り方があります。
今回は以下の点を意識して作成しようと思います。
- 追加でカスタムコードを使わない
- Webflow内の機能だけで完結する
- できるだけ作業工程を少なくする
リストを追加して作成開始
まずは土台の部分から作っていきましょう。
- ナビゲーターを参考に要素を組み立てます。
リストアイテムは一つ作ったら画像のようにコピーして５個に増やしておきましょう。
※目次を作りたい分増やしてOK。後でそれぞれ使うことになります。
Webflowの目次作り：CMSでセクション毎に分割
皆さんが使用しているブログのCMSがどないな物なのか、それによって多少作り方は変えたほうが良さそうですけどとりあえず「よくわからない」って人は真似して作ってみてください。
ここで重要なのはこの２つの項目↓
- Table of contents 日本語で言うところの「目次」です。基本WEBで作るコードは英語なのでここでも英語を採用。 目次に表示したい文章を入力するフィールドですよ。
- Section1〜5 目次で飛ばすため、各セクションにIDをつけます。そのための項目です。 すでにブログを書いている方はセクション毎に分解してみましょう。
テキストにIDを付ける
CMSでリッチテキストを増やした分要素も増やして行く必要があります。なぜ、分割して増やすのかそれはまさしくIDをつけるため。増やしたリッチテキストにIDをつけましょう。
IDの付け方
「IDの付け方がわからない」という方がいるかも知れないのでチロっと紹介しときます。（僕も最初は探しました）
IDは右上の歯車を選択すると、一番上に出てきます。各セクションにCMSフィールドと同じ名前を付けましょう。（Table of contents１〜５）
ちなみに目次が一番上に来ると僕的にはキモいと思うので、H1とリード文を入れる見出し用のフィールドを作っています。リッチテキストは合計で６つ。もっとセクションの数が欲しい方は同じ方法で増やしましょう。セクションをたくさん作ってもデザインには何も問題無いです。（重くなるかもってのはある多分大丈夫や）自分のブログに合った数を設定しましょう！
あとは各設定をいじるだけ
- 目次のテキストにCMSを反映 Table of contents を順番に設定
- リンクにページ内IDへ飛ぶように設定 各Sectionを設定します
- 各リッチテキストにCMSを設定
これでページ内のセクションに飛べる目次を作成できたと思います。しか〜しここで一つ問題が。
「List」自体はCMSで作成していないので
「セクションが３つしかない！」という場合、空白の目次ができてしまいます。
このエラーを解消する設定が
「コンディショナル ビジビリティ」
カタカナで表記するのなんかやばいね。
要するに下のやつ
ここで設定できる機能は「どんな時にこの要素を表示するか」です。上記の写真の設定では、「table of contents １に入力がある時表示する」と、設定をしています。
この設定を上から順番に１〜５まで数字を合わせて設定しましょう。（例：List２にはtable of contents 2 is setと設定）
その設定をすると、入力のないリストは表示されず、セクションが３つの時は目次も３つのみ表示される設定ができます。
おまけに
目次全体を囲むDIVブロックにも同じ設定することで、目次の無いページの作成にも役立ちます。その場合、table of contentsになにも入力しなければ良いわけですから、簡単ですね。
後は目次の背景を変更したり文字の色やアンダーバーを消したり、お好きにCSS機能を使ってスタイル変更したら完成です。
文章途中に同ページ内に飛ぶリンクを作成できる？
上記の方法でCMSを分割すればできます。ですが、文章のCMSリッチテキストを分割しないといけないからかなりめんどい。今のところは「簡単に設定できる方法はない」と思っています。（あったら教えてくれぇ）
といってもカスタムコードを使えば簡単にできそうなんですけどね(笑)。いずれカスタムコードについての記事を書くので待っててください。まずはせっかくのノーコードを全力で活かす方法を探したいと考えています。
まとめ
今回作成した作業をおさらいしましょう。
- リストを挿入して土台作り
- CMSにリストタイトルを入れるフィールドを作成
- CMSコンテンツをセクションごとに分割
- コード画面でリッチテキスト挿入してIDをつける
- リストにCMS機能のリンク、テキストを反映
- リストに入力がある時のみ表示するように設定する
- リストのスタイル変更
まだ記事が多くないよって方やこれからブログを始めるという方はこの設定をしておくのも一つの方法だと思います。カスタムコード使いたい方は少し待ってくださいね。カスタムコードを使うと「ネット公開しないと効果が見えない」「少しレベルが上がる」等あるので今はノーコードを全力で使っていきたいと思います。
次回は「CMSリッチテキストで文字色を変更する・文字に色付きアンダーバーを引く」をお届けします。リンク作成よりも圧倒的に簡単な超パワープレイです。僕的には「これでもいいっしょ！」って思ってます。（SEOとかに影響するかもしれぬが。）
みんなで頑張りましょう。疲れたら休みましょう。頑張りを報告してくれたら嬉しいです。僕もがんばります。それではまた。
※完成図はこのブログの目次です。
よくある質問
WebflowのCMSリッチテキスト内にページ内リンクは作れますか？
リッチテキスト内ではIDを付けられないため、そのままではページ内リンクを作れません。リッチテキストをセクション毎に分割してIDを付けることで、CMSを使った目次からリンクで飛ばせるようになります。
カスタムコード無しでWebflowに目次を作れますか？
作れます。リストとリンクをCMS以外で作り、CMSに目次テキスト用のTable of contentsとID用のSectionフィールドを用意して、分割したリッチテキストにCMSフィールドと同じ名前のIDを付けて反映する方法です。
セクションが少ないページで空白の目次ができてしまう場合はどうすればいいですか？
コンディショナルビジビリティで「入力がある時のみ表示する」設定を各リストアイテムに行います。目次全体を囲むDIVブロックにも同じ設定をすれば、目次の無いページの作成にも役立ちます。
文章の途中に同じページ内へ飛ぶリンクは作成できますか？
CMSリッチテキストを分割すればできますが、かなり手間がかかります。今のところ簡単に設定できる方法はなく、カスタムコードを使えば簡単にできそうです。
Webflowの目次作りで意識するポイントは何ですか？
追加でカスタムコードを使わない、Webflow内の機能だけで完結する、できるだけ作業工程を少なくするの3点です。リストアイテムは目次を作りたい数だけコピーして増やしておきます。
