Webflow CMS

ブログやニュースなどの動的なデータをWebflowで設定する方法を説明する講座です。

学べること

  • CMSの概念
  • データベースの構築
  • ページ上でデータをリスト表示
  • コレクションリストの設定
  • データアイテムの個別ページ
  • データコレクションの間の連携

コースの詳細

こちらのコースはWebflowのCMS機能を紹介します。記事の投稿するブログサイトやニュースを配信する企業サイトでは必ず使わなければならない機能です。

Webflow CMSコースを受講することで、そのCMSの設定方法を1から100まで一気に学習できます。実際にブログとしてデザインされたWebサイト上で設定するので、実務に出てくるような作り方が学べます。の

CMSとは?

CMSは、英語の「Content Management System」から省略したWebの用語です。いわいる「コンテンツ管理ツール」です。

記事数の多いブログやニュースなどのWebサイトでは、入力したデータからWebページのテンプレートを使用して自動的に記事のページを作成する機能です。

CMSの必要な理由

Webサイト上でコンテンツをページで表示することになっています。例えばブログ記事は、その特定のページで表示しています。記事を静的ぺーじとして作成することもできます。ただ、その記事が少数の場合は、複数のページの管理が楽ですが、もしその記事の数が10件、1000件や1万件以上だとしたら、そのそれぞれのページの構築と更新が非常に大変になってきます。

そしてそれぞれの記事のページを見ると、ほとんど一緒です。上にタイトルがあって、本文があって、他に関連する記事があります。CMSを使用することで、このページのテンプレートを作成して、記事ごとに変わるタイトルや本文などをデータベースからそれぞれのものをもってきて、ページ上で表示することができます。

WebflowのCMSの仕組み

特的のURLにアクセスした時に、WebflowがそのURLに該当するテンプレートページを探して、そしてそれに該当するブログ記事のタイトルやカテゴリーと本文を探します。そして、そのデータをテンプレートに当てはめて、完成のブログ記事のページを私たちに届けてくれます。

全てのページに一気に何かの変更を加えたい場合は、その一つのテンプレートページだけを編集します。そのように、ブログというコンテンツの管理が楽になります。それはCMSの効果です。

Lessons

CMSコレクションの作成

この動画では CMSコレクションの概念や設定について紹介します。ウェブサイトの製作者だけでなく、共同編集者も記事を投稿できるよう、使いやすくわかりやすいシステムを構築します。

CMSデータの追加

前回のレッスンで私たちはCMSコレクションを作成しました。 今回はデータを入力しアイテムを作成していきます。今後のレッスンで入力したデータはCMSコレクションリストを使って画面上に表示させます。

データと要素の接続

まずはウェブサイトのデザインを作成するために、前回作成したアイテムを削除して、 複数のダミーデータを作成します。 そしてデータを画面上に表示されるよう設定を行います。 これによってユーザはデータを目で見ることができます。

CMSテンプレートページ

前回のレッスンでは作成したブログのCMS(記事一覧)を画面上に表示しました。 今回のレッスンではブログ記事の詳細ページを作成します。 サイト訪問者は記事一覧から見たい記事をクリックし、 すべての情報を読むことができます。

CMSレファレンス項目

今回はカテゴリーCMSコレクションを作成して、 ブログにレファレンスで繋がりを作成します。 そうすることでブログにカテゴリを持たせ、記事の分類をすることができます。

CMSマルチレファレンス項目

今回はマルチリファレンスを使用して前回作成したカテゴリーのCMSに 複数のブログ記事を繋げます。 レファレンスは1つのデータを紐付けることができましたがマルチリファレンスは複数のデータを紐付けることができます。

CMSフィルターと並び順

このレッスンでは ブログ記事の一覧をカテゴリー別でフィルタリング、 最新の投稿順で記事が並ぶように序列の設定を行っていきます。 これにより サイト訪問者は見たいカテゴリをクリックして最新順に並んだブログ記事を閲覧することができます。

CMSダイナミックなスタイリング

このレッスンでは CMSのデータに応じて要素のレイアウトを変える方法を紹介します。 CMSコレクションのカラー、画像の情報をレイアウトに表示することでダイナミックなスタイリングができます。

CMSリストの空の状態

CMSリストの表示アイテム数の制限

CMSリストのページ切り替え

CMS要素の表示条件

CMSページ設定

CMSコレクションのURLフォルダ

カスタムコード内のCMSデータの使用

CMSデータをコンポーネントで使用