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

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

こんにちは。HULUEです。

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

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

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

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



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

まずは土台作りから

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

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

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

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

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

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

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

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でお問い合わせフォームを作成する方法【9Dsys/Webflow大学】

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

Read more...

【Webflow】今日から使える無料のテンプレート10選

Webflowで初心者でもスグに使えるテンプレートを知りたいですか?本記事ではWebflowの今日から使えるテンプレートをジャンル別にまとめました。Webflowでテンプレートを使用して自社サイトを自作してみましょう。

Read more...

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

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

Read more...
くりたまさと
Masato Kurita

大学卒業後、セブ島とオーストラリアに1年間、語学留学。

現在は、Webflow専門のウェブサイト制作・SNS運用代行、MEO対策などを行っています。

#
Webflow 使い方
アフィリエイト
ご質問ありがとうございます。
確認次第、返信致しますので、
少々お待ち下さい!
エラーが発生致しました。もう一度お試し頂くか、Twitterより連絡ください。