LikePay Academyが「スーパーサイトAcademy」に変わりました。詳しくはこちらです。

CMSの紹介

Webflow CMSは、サイト全体のコンテンツ構造とデザイン方法を完全に制御する機能を提供します。

この投稿は公式のWebflow Universityを元に作成しました。翻訳したテキストと画像は引用元のものを使用する場合があります。引用元はこちらです。

CMS(コンテンツ管理システム)は、サイト上の動的コンテンツを格納して管理する場所です。動的なコンテンツ(つまり、変化するコンテンツ)をサイトデザイン内で参照できます。その後、あなたやチームメンバーがCMSでコンテンツを作成または変更すると、それが参照されているすべてのページで即座に更新されます。

このレッスンで学ぶこと

CMS内で動的コンテンツの構造をどのように作成するか

すべてはコレクションの作成から始まります。コレクションは、コレクション項目内に動的コンテンツを格納します。そして、この動的コンテンツをサイト全体で参照できます。

各コレクションは異なるタイプのコンテンツを格納します。例えば、ブログ投稿、チームメンバー、求人情報、レシピなどのコレクションを作成できます。そして、各コレクションはコレクション項目で構成されています(例:Team membersコレクションの各コレクション項目は1人のチームメンバーです)。

コンテンツが同じ構造を使用するため(例:各チームメンバーには同じコンテンツが含まれる)、コレクションはこのコンテンツを格納しメンテナンスする効率的な場所を提供します。

コレクションフィールドの定義方法

コレクションを作成する際、そのコレクション内の各コレクション項目がどのような構造を持つかを決定します。たとえば、team membersのコレクションを作成する場合、各チームメンバーの名前、写真、メールアドレスを追加したいかもしれません。各タイプのコンテンツに対してコレクションフィールドを追加します — この場合、名前にはプレーンテキストフィールド、写真には画像フィールド、メールアドレスにはメールフィールドを使用します。

コレクションフィールドやコレクションフィールド内のコンテンツをいつでも更新や削除することもできます。

コレクションフィールドを使用してコレクションを構造化する方法について詳しく学ぶ。

コンテンツの作成方法

コレクションフィールドが整ったら、コレクション項目を作成し始めることができます。コレクション項目は、コレクション内の個々のコンテンツセクションです。

たとえば、Team membersのコレクションを作成した後、各チームメンバーのコンテンツを追加し始めることができます。各コレクション項目(つまり、各チームメンバー)ごとに、先に定義したコレクションフィールド(名前、写真、メールアドレス)を入力します。

プロのヒント: 一度に多くのコレクション項目をインポートしたい場合、CSVファイルを使用して行うことができます。

コレクションの作成と構造化について詳しく学ぶ。

サイト上で動的コンテンツを参照する方法

コレクションの構造を作成し、コレクション項目を追加したら、その動的コンテンツをサイトに追加することができます。これを行う方法は2つあります。コレクションリストを使用するか、コレクションページをデザインするかです。

コレクションリスト(Collection lists)

コレクションリスト要素は、動的なコレクションのコンテンツをサイトの任意のページ(静的ページを含む、たとえばサイトのホームページ)で参照できます。フィルターやconditional visibilityによって、フィールド内の値に基づいて特定のアイテムを表示または非表示にすることができます。また、コンテンツの並べ替えもできます。

コレクションページ(Collection pages)

コレクションページは、コレクション内のすべてのコレクション項目に自動的に作成されます。コレクションページは、コレクション内のすべてのアイテムのデザインテンプレートと考えることができます — コレクション内のすべてのコレクション項目は、コレクションページで作成したデザインを使用します。

コレクションページのデザイン時には、コレクションフィールドを参照することで動的なコンテンツを追加できます。そして、コレクションページのデザインや動的な参照を編集する際、そのコレクション内のアイテムのすべてのコレクションページが自動的に更新されます。

注意: コレクションページに追加された要素は、コレクションフィールドに接続されるまで静的です。

動的コンテンツの編集方法

いつでもコレクションの編集や追加が可能です。編集や追加は、デザイナーやエディターから行うことができます。また、**コンテンツエディター(content editors)**はエディターでコレクションにアクセスできるため、直接コンテンツを追加や編集することができます。

目次

あなたもNoCodeのプロに

充実したサポートであなたも、最短3ヶ月間でノーコードWeb制作のプロになれます。

  • 300以上のノーコード動画教材

  • チャットサポート

  • 個別ビデオ通話相談