%402x.svg){kind=icon}
こんにちは。まさとです。
最近、ブログの記事を書いていく内に「目次で見たいところにすぐ飛べた方がいいな」と思いつきました。エジソン並の発想です。そこで今回はWebflowのCMS使ってリンク付きの目次を作ろうと思います。
しかしなんていうことでしょう…WebflowのCMSリッチテキスト内ではページ内リンクを作れねぇじゃんか。というかまず、リッチテキスト内ではIDをつけれないんだね…。ということで今回はCMSで作成したブログ記事にどうにかCMSを使用し、作業量をできる限り削った「ページ内リンク付きの目次を作成する方法」をご紹介していこうと思います。
今回行う方法をざっくり説明するとLISTとリンクをCMS以外で作って他をCMSで作成するという方法。CMS内のリッチテキストを分割し、IDをつけてリンクで飛ばします。ページ毎に編集を行わずにCMS内の作業で目次を作れるように作成しましょう。
と言ってもよくわからんと思うのでとにかく作っていきましょう。
↓この目次の作り方を解説します。
Webflowの目次作り：まずは土台作りから
Webサイトは基本、何通りかの作り方があります。
今回は以下の点を意識して作成しようと思います。
- 追加でカスタムコードを使わない
- Webflow内の機能だけで完結する
- できるだけ作業工程を少なくする
リストを追加して作成開始
まずは土台の部分から作っていきましょう。
- ナビゲーターを参考に要素を組み立てます。
リストアイテムは一つ作ったら画像のようにコピーして５個に増やしておきましょう。
※目次を作りたい分増やしてOK。後でそれぞれ使うことになります。
Webflowの目次作り：CMSでセクション毎に分割
.jpg)
皆さんが使用しているブログの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専門家として事業を行っている栗田自身が実際に使用して便利だと感じたWebflowの使い方や小技などを共有しています。他にもノマドライフや、事業計画、経験と過程について発信しています。
これは僕からあなたへの手紙です。飾らない言葉で発信しています。登録が励みになります。メルマガ登録100人を最初の目標にしています。100人集まったら旅企画を告知します。海外旅行に一緒に行って新しい価値観を広げましょう。
