Webflow CMS の紹介

Webflow CMS を使用すると、コンテンツ構造とサイト全体でのコンテンツのデザインを完全に制御できます。

コンテンツ管理システム (CMS) は、Web サイトで動的コンテンツが保存され、管理されるプラットフォームです。動的コンテンツ (変化するコンテンツ) は、サイトのデザインに組み込むことができます。あなたまたはチーム メンバーが CMS のコンテンツに対して行った更新や変更は、そのコンテンツが使用されているすべてのページに即座に反映されます。

このチュートリアルでは以下の内容を取り上げます。

  1. CMSで動的コンテンツを整理するプロセス
  2. ウェブサイト内に動的コンテンツを統合する
  3. 動的コンテンツの変更

CMS での動的コンテンツの整理

最初のステップは、 コレクションコレクションはコレクション アイテムに動的なコンテンツを保存し、Web サイト全体でこのコンテンツを参照できるようにします。

各コレクションは、特定の種類のコンテンツを保存するように指定されています。たとえば、ブログ投稿、チーム メンバー、求人情報、レシピ、その他の任意のコンテンツのコレクションを作成できます。各コレクションは、コレクション アイテムで構成されます。コレクション アイテムは、「チーム メンバー」コレクション内の 1 人のチーム メンバーなどの個々のインスタンスを表します。

コレクションは、一貫したコンテンツ構造を保存および管理するための効率的な方法を提供します。

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

コレクションを設定するときは、コレクション内の各コレクション アイテムの構造を決定します。たとえば、「チーム メンバー」のコレクションを作成する場合は、名前、写真、メールのフィールドを含めることができます。各コンテンツの種類はコレクション フィールドに対応します。たとえば、名前にはプレーン テキスト フィールド、写真には画像フィールド、アドレスにはメール フィールドです。

コレクション フィールドとその中のコンテンツは、いつでも更新または削除できます。

コレクションを整理するためにコレクション フィールドを活用する方法について詳しく説明します。

コンテンツの作成

コレクション フィールドが配置されたら、コレクション アイテムの作成を開始できます。各コレクション アイテムは、コレクション内のコンテンツの個別のセグメントとして機能します。

たとえば、「チーム メンバー」コレクションを作成した後、各チーム メンバーのコンテンツの入力を開始できます。各コレクション アイテム (つまり、各チーム メンバー) 内で、定義済みのコレクション フィールド (名前、写真、メール アドレスなど) を入力します。

プロのヒント: 多数のコレクション アイテムを同時にインポートする場合は、CSV ファイルの使用を検討してください。

コレクションの作成と構造化についてさらに詳しく学びます。

ウェブサイトに動的コンテンツを組み込む

コレクション構造を形成し、コレクション アイテムを追加したら、その動的コンテンツを Web サイトに含めることができます。これは、コレクション リストを使用するか、コレクション ページを設計するという 2 つの方法で実現できます。

図には、Webflow プロジェクトに動的コンテンツを追加する 2 つの方法が表示されています。プロファイル カードの元となる 2 つの主な要素は、コレクション リストとコレクション ページです。

コレクションの表示

コレクション リスト要素を使用すると、ホームページなどの静的ページを含むサイトの任意のページに動的なコレクション コンテンツを表示できます。これにより、表示するアイテムを指定したり、フィールド値に基づいてフィルターや条件付き表示を適用したり、コンテンツを整理したりできます。

コレクションページのデザイン

コレクション内のコレクション アイテムごとに、コレクション ページが自動的に生成されます。コレクション ページは、すべてのコレクション アイテムのユニバーサル デザイン テンプレートとして考えてください。コレクション ページで作成したデザインは、コレクション内の各アイテムに適用されます。

コレクション ページをカスタマイズするときに、コレクション フィールドを参照して動的コンテンツを統合できます。コレクション ページのデザインまたは動的参照に加えられた変更は、そのコレクション内のアイテムに関連付けられているすべてのコレクション ページに反映されます。

注記: コレクション ページに配置された要素は、コレクション フィールドにリンクされるまで静的のままです。

動的コンテンツの変更

コレクション内のコンテンツはいつでも変更または拡張できます。これはデザイナーまたはエディターから実行できます。

ユアン・マック