この投稿は公式のWebflow Universityを元に作成しました。翻訳したテキストと画像は引用元のものを使用する場合があります。
引用元新しいアイテム（例：ブログ記事、ヘルプ記事など）をコレクションで作成するたびに、それに対応するページが自動的に生成されます。コレクションページはテンプレートのように機能し、そのデザインやレイアウトは自動的に生成されたアイテムページ全体に適用されます。
コレクションページは、ブログ記事、ヘルプ記事、またはランディングページなど、定期的に発生するコンテンツのためのテンプレートとして機能します。
このレッスン学ぶこと
コレクションページの作成
コレクションが作成されると、コレクションページも自動的に作成されます。このコレクションページを選択するには、Pages panelを開き、Collection pagesセクションで選択します。コレクションページの隣にある紫色のアイコンは、CMSが生成したページであることを示します。
コンテンツの追加と接続
コレクションページは、他の静的なページと同様にデザインおよび開発できますが、コレクションページの真価が発揮されるのは、そのデザインに動的コンテンツを取り込みたい場合です。
静的および動的要素の追加
コレクションページに追加された要素は、コレクションリストと同様に、コレクションのフィールドに接続されるまで静的です。コレクションページは他のページと同様にデザインしますが、このページはすべてのコレクションアイテムのテンプレートとして機能します。
デザインに含まれるさまざまな要素をコレクションのフィールドに接続するには、次の手順に従います。
- コレクションページ上の要素を選択します
- 設定アイコンをクリックします（またはElement Settings Panel — shortcut:D)）
- Get content from Collectionをチェックします
- ドロップダウンを開き、コンテンツを取得したいcollection fieldを選択します
要素がフィールドからコンテンツを取得すると、その要素は1つのアイテムだけでなく、そのコレクション内のすべてのアイテムのページにわたって接続されます。
プロのヒント：静的な要素には青いアウトラインが表示され、動的な要素またはCMSからデータを受け取る要素にはキャンバス上に紫色のアウトラインが表示されます。
コレクションページのプレビューと切り替え
コレクションページを編集していると、コレクション内のアイテムの1つだけを編集しているかのように見えますが、実際にはテンプレートを編集しているため、他のすべてのページを同時に編集しています。
ページ内のコンテンツを任意のコレクションアイテムに切り替えるには、上部バーのドロップダウンメニューを使用します。コレクションページのドロップダウンメニューの上部バー内で、ページの名前を入力して特定のページに移動することもできます。また、クイックファインドバーにページ名を入力しても同様に特定のページに移動できます。
便利なショートカット：キー キーボードの左右の矢印キーを押しながらShift+Option（Windowsの場合はShift+Alt）を押すと、コレクションアイテムをリスト内の次のアイテムに切り替えることができます。
コレクションページへのリンク
コレクションページへのリンクは、他のコレクションページからまたはコレクションリストから行うことができます。コレクションリストからリンクを貼る手順は以下の通りです。
- Collection listを追加します。
- Collectionに接続します。
- ボタン、またはリンク要素をコレクションリストに追加します。
- リンク要素を選択した状態で、歯車アイコンをクリックします（またはElement Settings Panelに移動します）。
- 紫色のCollection pageリンクオプションを選択します。
- Current Item（現在のアイテム）を選択します。
これにより、コレクションリスト内の各ボタンが、それぞれのアイテムに対応するコレクションページにリンクされます。
プロのヒント：リンク設定のURLフィールドタイプで、リンク要素をリンクフィールドに接続することもできます。
コレクションページの設定
コレクションページの設定では、SEOメタタイトル＆説明、オープングラフタイトル＆説明、RSS、およびカスタムコードをコレクションページテンプレートに対して設定できます。ただし、静的ページの設定とは異なり、コレクションページの設定には動的な値を設定でき、それにより各コレクションアイテムページに固有の情報が生成されます。
コレクションページの設定にアクセスするには、ページパネルでコレクションページテンプレートの上にカーソルを合わせると表示される設定アイコンをクリックします。
一般
コレクションテンプレートページをフォルダに追加することで、コレクションアイテムページのURLとSEOに対するより大きな制御を行うことができます。コレクションテンプレートページに親フォルダを設定すると、そのコレクションのアイテムページをサブディレクトリのURLで提供できます。たとえば、親フォルダ名が「コンテンツ」で、ブログ投稿のコレクションがある場合、URLは「website.com/content/blog/example-post」になります。
コレクションテンプレートページに親フォルダを設定する手順：
- Go to the Pages panel
- Hover over the Collection template page and click the settings “cog”
- Go to General > Parent folder
- Select your parent folder from the dropdown
- Click Save
Note: When you set a parent folder on a Collection template page, the Collection template page won’t appear under the folder name in the Pages panel.
- Pages panelに移動します。
- コレクションテンプレートページの上にカーソルを合わせ、設定アイコン（歯車）をクリックします。
- General > Parent folderに移動します。
- ドロップダウンから親フォルダを選択します。
- Saveをクリックします。
注意: コレクションテンプレートページに親フォルダを設定すると、ページパネルのフォルダ名の下にコレクションテンプレートページが表示されなくなります。
公開設定
コレクションのテンプレートページをサイトと一緒に公開するかどうかを決定できます。たとえば、コレクションのテンプレートページをライブで公開し、検索エンジンによるインデックス化を防止するのに役立ちます。
コレクションのアイテムページの公開を有効にするには：
- Pages panelに移動します。
- コレクションテンプレートページの上にカーソルを合わせ、設定アイコン（歯車）をクリックします。
- Publish settingsに移動します。
- トグルスイッチを「on」に切り替えます。
コレクションのアイテムページを公開しないようにするには：
- Pages panelに移動します。
- コレクションテンプレートページの上にカーソルを合わせ、設定アイコン（歯車）をクリックします。
- Publish settingsに移動します。
- トグルスイッチを「off」に切り替えます。
動的なSEO設定
コレクションフィールドを使用してページタイトルと説明のテンプレートを定義できます。検索エンジン結果ページ（SERP）でどのように表示されるかをプレビューボックスで確認できます。
動的なオープン グラフ設定
ここでは、Facebook、Twitter、LinkedIn、Pinterest、Google+でコレクションページへのリンクを共有する際に表示される情報を設定できます。コレクションフィールドを使用すると、各ページごとに一意のオープン グラフ情報を作成できるため、各ページに異なるオープン グラフ情報が表示されます。
RSS フィード設定
コレクションページの設定で、コレクションのためにRSS 2.0フィードを有効にできます。これにより、RSSリーダーユーザーは新しいコレクションアイテムを公開するときに更新情報を購読できます。
ここで、フィード設定を定義できます。コレクションフィールドを使用して、RSSチャンネルのタイトル、説明、およびその他の設定の動的なテンプレートを作成できます。また、ページの設定内でフィードのプレビューを表示できます。その後、RSS URLを他のアプリと共に使用するか、ウェブサイトにリンクを追加できます。
カスタムコード
コレクションページテンプレートの<head>または</head><body>タグにカスタムコードとスクリプトを追加できます。これはすべてのコレクションページに適用されます。そして、このコードに一意の値を持っている情報が含まれている場合、その値をコレクションフィールドで置き換えることができます。単に値を選択し、カスタムコードテキストフィールドの右上にある紫色の</body> + Add Field をクリックします。