【カスタムコード無し】Webflowを使った、一番簡単な目次の作り方

【カスタムコード無し】Webflowを使った、一番簡単な目次の作り方

こんにちは。まさとです。

最近、ブログの記事を書いていく内に「目次で見たいところにすぐ飛べた方がいいな」と思いつきました。エジソン並の発想です。そこで今回はWebflowのCMS使ってリンク付きの目次を作ろうと思います。

しかしなんていうことでしょう…WebflowのCMSリッチテキスト内ではページ内リンクを作れねぇじゃんか。というかまず、リッチテキスト内ではIDをつけれないんだね…。ということで今回はCMSで作成したブログ記事にどうにかCMSを使用し、作業量をできる限り削った「ページ内リンク付きの目次を作成する方法」をご紹介していこうと思います。

今回行う方法をざっくり説明するとLISTとリンクをCMS以外で作って他をCMSで作成するという方法。CMS内のリッチテキストを分割し、IDをつけてリンクで飛ばします。ページ毎に編集を行わずにCMS内の作業で目次を作れるように作成しましょう。

と言ってもよくわからんと思うのでとにかく作っていきましょう。



↓この目次の作り方を解説します。

目 次

Webflowの目次作り:まずは土台作りから

Webサイトは基本、何通りかの作り方があります。

今回は以下の点を意識して作成しようと思います。

  • 追加でカスタムコードを使わない
  • Webflow内の機能だけで完結する
  • できるだけ作業工程を少なくする

リストを追加して作成開始

まずは土台の部分から作っていきましょう。

  • ナビゲーターを参考に要素を組み立てます。
コードを参考に作成

リストアイテムは一つ作ったら画像のようにコピーして5個に増やしておきましょう。
※目次を作りたい分増やしてOK。後でそれぞれ使うことになります。

Webflowの目次作り:CMSでセクション毎に分割

CMSコンテンツ

皆さんが使用しているブログのCMSがどないな物なのか、それによって多少作り方は変えたほう良さそうですけどとりあえず「よくわからない」って人は真似して作ってみてください。

ここで重要なのはこの2つの項目↓

  • Table of contents
    日本語で言うところの「目次」です。基本WEBで作るコードは英語なのでここでも英語を採用。
    目次に表示したい文章を入力するフィールドですよ。
  • Section1〜5
    目次で飛ばすため、各セクションにIDをつけます。そのための項目です。
    すでにブログを書いている方はセクション毎に分解してみましょう。

テキストにIDを付ける

CMSでリッチテキストを増やした分要素も増やして行く必要があります。なぜ、分割して増やすのかそれはまさしくIDをつけるため。増やしたリッチテキストにIDをつけましょう。

IDの付け方

「IDの付け方がわからない」という方がいるかも知れないのでチロっと紹介しときます。(僕も最初は探しました)

IDを左上からつける

IDは右上の歯車を選択すると、一番上に出てきます。各セクションにCMSフィールドと同じ名前を付けましょう。(Table of contents1〜5)

ちなみに目次が一番上に来ると僕的にはキモいと思うので、H1とリード文を入れる見出し用のフィールドを作っています。リッチテキストは合計で6つ。もっとセクションの数が欲しい方は同じ方法で増やしましょう。セクションをたくさん作ってもデザインには何も問題無いです。(重くなるかもってのはある多分大丈夫や)自分のブログに合った数を設定しましょう!

あとは各設定をいじるだけ

  • 目次のテキストにCMSを反映
    Table of contents を順番に設定
  • リンクにページ内IDへ飛ぶように設定
    各Sectionを設定します
  • 各リッチテキストにCMSを設定

これでページ内のセクションに飛べる目次を作成できたと思います。しか〜しここで一つ問題が。

「List」自体はCMSで作成していないので
「セクションが3つしかない!」という場合、空白の目次ができてしまいます

このエラーを解消する設定が
「コンディショナル ビジビリティ」
カタカナで表記するのなんかやばいね。

要するに下のやつ

この画像ではList item の1番目を選択しています。

ここで設定できる機能は「どんな時にこの要素を表示するか」です。上記の写真の設定では、「table of contents 1に入力がある時表示する」と、設定をしています。

この設定を上から順番に1〜5まで数字を合わせて設定しましょう。(例:List2にはtable of contents 2 is setと設定)
その設定をすると、入力のないリストは表示されず、セクションが3つ時は目次も3つのみ表示される設定ができます。

おまけに

目次全体を囲むDIVブロックにも同じ設定することで、目次の無いページの作成にも役立ちます。その場合、table of contentsになにも入力しなければ言いわけですから、簡単ですね。

後は目次の背景を変更したり文字の色やアンダーバーを消したり、お好きにCSS機能を使ってスタイル変更したら完成です。

文章途中に同ページ内に飛ぶリンクを作成できる?

上記の方法でCMSを分割すればできます。ですが、文章をCMSリッチテキストを分割しないといけないからかなりめんどい。今のところは「簡単に設定できる方法はない」と思っています。(あったら教えてくれぇ)

といってもカスタムコードを使えば簡単にできそうなんですけどね(笑)。いずれカスタムコードについての記事を書くので待っててください。まずはせっかくのノーコードを全力で活かす方法を探したいと考えています。

まとめ

今回作成した作業をおさらいしましょう。

  • リストを挿入して土台作り
  • CMSにリストタイトルを入れるフィールドを作成
  • CMSコンテンツをセクションごとに分割
  • コード画面でリッチテキスト挿入してIDをつける
  • リストにCMS機能のリンク、テキストを反映
  • リストに入力がある時のみ表示するように設定する
  • リストのスタイル変更

まだ記事が多くないよって方やこれからブログを始めるという方はこの設定をしておくのも一つの方法だと思います。カスタムコード使いたい方は少し待ってくださいね。カスタムコードを使うと「ネット公開しないと効果が見えない」「少しレベルが上がる」等あるので今はノーコードを全力で使っていきたいと思います。

次回は「CMSリッチテキストで文字色を変更する・文字に色付きアンダーバーを引く」をお届けします。リンク作成よりも圧倒的に簡単な超パワープレイです。僕的には「これでもいいっしょ!」って思ってます。(SEOとかに影響するかもしれぬが。。)

みんなで頑張りましょう。疲れたら休みましょう。頑張りを報告してくれたら嬉しいです。僕もがんばります。それではまた。

※完成図はこのブログの目次です。

無料メルマガで追加情報を告知します。

WEBFLOW専門家として事業を行っている栗田自身が実際に使用し、便利だと感じたWebflowの使い方、事業計画、経験と過程について発信しています。不要なら1秒ですぐ解読できます。次は売上1000万を目指します。

ご登録ありがとうございます。次回の更新まで少々お待ちください。
なにかしらエラーがでています。治らない場合はXまでご連絡ください。
くりたまさと
Masato Kurita
栗田将人

併せて読むとおすすめの記事▼

Webflowでお問い合わせフォームを作成する方法【9Dsys/Webflow大学】

Webflowでのお問い合わせページの作り方を解説。Webflowを使えば、コードの知識不要でオリジナルのお問い合わせフォームを作成可能。しかも超短時間で簡単に作成できます。Web制作未経験者でも簡単にお問い合わせを作れるようになりますよ。

Read more...

Webflowを使って初心者でもプロのようなデザインを作る方法

初心者でもWebflowを使えるか知りたいですか?本記事ではWeb初心者の方でもスグにプロのようなWebサイトを作れる方法を解説しています。記事を読みながら手を動かしてWebサイト作ってみましょう。

Read more...

【2024年最新版】Webflowの使い方を項目別にまとめました

Webflowの使い方で迷っていませんか?本記事ではWebflowの使い方をCMSやリッチテキスト、独自ドメイン、フォントの追加方法など項目別にまとめました。Webflowの使い方で悩むことがある方は必見です。

Read more...
🎉【期間限定】無料キャンペーン実施中9/1まで
Beta

無料のWebflow
30分間レクチャー実施中!!

期間限定‼️
Webflowでこのポップアップの作り方わかりますか?このレクチャーではWebflowの使い方、Webflow導入後のサポートなどWebflowに関する質問はOK!完全無料で実施しているのでお気軽にお申し込みください。9月1日まで実施中
※ビデオ通話(Google meet)を使用します。
※予告なく、内容の変更やキャンペーンが終了する場合がございます。
※機密事項などを取り扱う際は事前にお申し付けください。内容はYoutubeなどSNSに 露出する場合がございます。お申し付けいただければ露出はしません。
※レクチャー時間は一組30分までとさせていただきます。それ以上は別途ご相談、ご依頼ください。30分の中に自己紹介や案件の相談時間などは含まれていませんので慌てずまずは自己紹介から行いましょう。
※自己紹介など含め45分を想定しています。
※ご予約機能はGoogleカレンダーで作成しています。
※こちらはベータリリースとして行っています。
※Webflowを学ぶ目的、サイト制作依頼の相談、Webflowサポートのお試し、以外の目的でのお申し込みはおやめください。
以上の注意事項の他に必要な情報は都度更新、変更していきます。
Dashboard mockup