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

CMSコレクション

CMSコレクションとは、Webflow CMS内でのブログ投稿、著者、ヘルプ記事などのようなカスタマイズ可能な構造を持つコンテンツタイプのグループ化です。

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

コレクションは、コンテンツを格納し、サイト全体で動的に参照できるデータベースのようなものです。各コレクションは異なる種類のコンテンツを示し、コレクション内の個々のコンテンツはコレクション項目と呼ばれます。

このレッスンで学ぶこと

コレクションの作成方法

CMSコレクションを作成するには、CMS panelに移動し、パネルの右上にあるCreate new Collectionアイコンをクリックします。その後、CMS panelでコレクションのデザインを行うことができます。

注意: サイトでEコマースを有効にすると、2つのEコマースコレクション（商品とカテゴリ）が自動的にEコマースパネルに作成されます。

コレクションテンプレートの使用

コレクションをデザインする際、いつでもCollection templates セクションにある事前に作成されたコレクションテンプレートの1つを使用できます。これは、コレクションのためにどのようなコンテンツ構造が必要か確信が持てない場合に便利です。テンプレートには以下が含まれます：

Blog posts
Authors
Categories
Projects
Clients
Team members
Listings
Events
Menu items
Songs
Shows
Recipes

これらのテンプレートを使用すると、Collection settingsと Collection fieldsが事前に埋められますが、各設定とフィールドはカスタマイズ可能です。また、カスタムフィールドを追加または削除することもできます。

コレクション設定（Collection settings)

In the Collection settings section, you can customize the Collection name and Collection URL.

Collection settings セクションでは、 Collection name と Collection URL.をカスタマイズできます。

コレクション名（Collection name）

Collection name フィールドにコレクションの名前を設定できます。コレクション名はいつでもカスタマイズできます。

コレクションの名前を指定すると、名前の単数形と複数形のバージョンが生成され、サイト内の異なる場所で使用されます。また、Collection nameフィールドの下にあるPlural versionまたはSingular version をクリックして、コレクション名の複数形と単数形のバージョンをカスタマイズすることもできます。

コレクションURL（Collection URL）

また、コレクションURLを選択することもできます。このスラッグは、コレクションページが格納されるフォルダの名前です。このテキストはまた、コレクションページのURL構造を決定し、各Collection item のために生成されます（例：コレクションURLに「blog-posts」と入力し、「cheesecake」というコレクションアイテムを作成すると、「cheesecake」ページのURLは「website.com/blog-posts/blog-post-article」となります）。コレクションURLは、コレクション名の単数形または複数形のバージョンと同じにするか、カスタマイズすることができます。

コレクションURLの名前変更

コレクションURLをいつでも変更できます。ただし、既にサイトを公開している場合、コレクション内のページへの既存の外部リンクが引き続き機能するようにするには、301リダイレクトを設定する必要があります。すべてのコレクションページをリダイレクトする必要はありません。以下の方法でリダイレクトを設定できます。

古いパス：/old-collection-url/(.*)
リダイレクト先パス：/new-collection-url/%1

注意: 一部のスラッグは、コレクションの名前付けに使用できない予約されたスラッグです。

重要: Eコマースコレクションのスラッグは変更できません。また、既存のサイトでEコマースを有効にする場合、Eコマース用のスラッグ（たとえば「product」や「category」など）を持つCMSコレクション、静的ページ、またはフォルダを使用することはできません。

コレクションフィールド（Collection fields）

コレクションフィールドはウェブサイトの要素ではなく、各コレクション項目のデータが格納されるフィールドです。これらのデータをCollection items に入力し、これらのデータ（すなわちコンテンツ）をサイトのデザインで参照することができます。

各コレクションには名前とスラッグのフィールドが付属しており、それぞれのCollection items の名前とスラッグを示します。スラッグは、コレクション項目の名前を入力すると自動的に生成されますが、独自のスラッグを作成するために上書きすることができます。

コレクションを構造化する際に選択できるさまざまなカスタムフィールドタイプがあります。

Plain text
Rich text
Image
Multi-image
Video link
Link
Email
Phone
Number
Date/Time
Switch
Color
Option
File
Reference
Multi-reference

注：Eコマースコレクションには、デフォルトフィールドのセット（「価格」など）が付属しており、カスタムフィールドセクションでは使用できません。Eコマースコレクションにカスタムコレクションフィールドを追加することはできますが、デフォルトフィールドを削除することはできません。

コレクションの編集方法

コレクションを作成した後でも、コレクションの構造や設定を編集できます。サイトを公開した後でも、コレクションの構造と設定を変更した場合、変更がサイトに反映されるように再度公開する必要があります。

コレクションをコレクション設定ページで編集するには：

Go to the CMS panel and click on the Collection name
Click on the Settings button, or the settings ****“cog” next to the Collection name in the Collection panel
CMS panelに移動し、Collection 名前をクリックします。
設定ボタンをクリックするか、コレクションパネル内のコレクション名の隣にある歯車アイコンをクリックします。

カスタムフィールドの追加、編集、削除ができます。各カスタムフィールド内では、フィールドラベルとヘルプテキストも変更できます。ヘルプテキストをカスタマイズすることで、各フィールドの意図を明確にすることができます。これは、コレクション項目の追加や編集時に便利です。

注意: カスタムフィールドは、現在デザイン、コレクションページとその設定、またはコレクションリストとその設定（たとえば、フィルターやvisibility）で使用されていない場合にのみ削除できます。

コレクションの複製方法

既存のコレクションと同じ形式で新しいコレクションを作成したい場合、コレクションの設定とフィールドを複製できます。コレクションの複製は、コレクションの設定ページのすべて（コレクション名、URL、基本情報フィールド、カスタムフィールド）を複製します。ただし、コレクションのテンプレートページの内容や、コレクション内のコレクション項目は複製されません。

コレクションを複製するには：

CMSパネルに移動します。
複製したいコレクションにカーソルを合わせます。
設定の歯車アイコンをクリックしてコレクションの設定を開きます。
コレクションの設定ページの上部にある「Duplicate collection」アイコンをクリックします。

コレクションを複製すると、新しいコレクションが「[元のコレクション名]コピー」としてCMSコレクションパネルに表示されます（例：「ブログ」コレクションを複製すると、複製されたコレクションの名前は「ブログコピー」となります）。コレクションのURLにも「コピー」が追加されます（例：元のコレクションのURLが「www.example.com/blog」の場合、複製されたコレクションのURLは「www.example.com/blog-copy」となります）。基本情報とカスタムフィールドも複製されます。

重要: 複製されたコレクションを保存するには、複製されたコレクションの設定ページでコレクションを作成をクリックする必要があります。それ以外の場合、複製されたコレクションは保存されず、CMSコレクションパネルから消えてしまいます。