pages」の内容を元に作成しています。引用元:https://university.webflow.com/lesson/structure-and-style-collection-pages‍WebflowのCMS機能を使えば、ノーコードでブログやお知らせなどの一覧・詳細ページを制作することができます。詳細ページは、テンプレートを1つ作っておけば、後はCMSコレクションにデータを投稿していくだけで、詳細ページが自動的に生成されていきます。このように、CMSコレクションアイテムのデータに応じて、自動的に生成されていくページのことをWebflowでは、コレクションページと呼んでいます。この投稿では、コレクションページの構成とデザインの仕方について解説します。‍コレクションページの作成方法CMSコレクションが作成されると、コレクションページも自動的に作成されます。Pages」セクションで選択することができます。コレクションページの横にある紫色のアイコンは、CMSで生成されたページであることを示します。追加コレクションリストと同様に、コレクションページにドロップされた要素は、CMSコレクションからフィールドに接続されるまでは静的要素です。コレクションページは他のページと同様にデザインできますが、このページはすべてのコレクションアイテムのテンプレートとして機能します。以下の手順で、デザイン内のさまざまな要素をコレクションフィールドに接続することができます。ショートカット:D)コレクションから取得するコンテンツをチェックしますドロップダウンを開き、コンテンツを取得するコレクションフィールドを選択しますある要素とフィールドを接続すると、コレクションページごとにすべてのアイテムからそのフィールドに対してコンテンツを取得する様になります。これによって、CMSコレクションに登録したアイテムごとに自動的にページが生成できるわけです。一言メモ静的コンテンツは青枠で、動的要素は紫枠で表示されます。‍コレクションページをプレビューする方法コレクションページを編集しているとき、コレクション内のアイテムの1つだけを編集しているように見えます。実際には、テンプレートを編集しているため、他のすべてのページを同時に編集していることになります。トップバーのドロップダウンを使って、編集するページが参照するコレクションアイテムを切り替えることができます。コレクションページのドロップダウン上部の検索バー、またはクイック検索バーにページ名を入力すると、特定のアイテムのページを表示することができます。一言メモShift+Option(WindowsではShift+Alt)を押しながら、キーボードの左右の矢印を押すと、コレクションアイテムがリストの次または前のアイテムに切り替わります。‍コレクションページへのリンク方法コレクションページには、他のコレクションページまたはコレクションリストからリンクさせることができます。次の手順でコレクションリストからリンクを設定できます。{CMSコレクション名}」を選択しますこれにより、コレクションリスト内の各ボタンは、それぞれのアイテムに対応するコレクションページに遷移するリンクを保持します。description、オープングラフ・タイトル&description、RSS、およびコレクションページテンプレート用のカスタムコードを設定することができます。静的なページ設定とは異なり、コレクションページ設定は動的な値を持つことができ、コレクションアイテムページごとに表示する情報を変えることができます。ページパネルからコレクションページテンプレートの歯車マークをクリックすることで、コレクションページ設定を表示できます。動的SEO設定ページタイトルと説明文のテンプレートは、コレクションフィールドを使用して定義することができます。プレビューボックスで検索エンジンの結果ページ(SERP)でどのように表示されるかを確認することができます。動的オープングラフ設定ここでは、Facebook、Twitter、LinkedIn、Pinterest、Google+などのSNSでコレクションページへのリンクを共有する際に表示される情報を設定することができます。コレクションフィールドを使用すると、各ページのアイテム内の情報を引用してくれるため、ページ固有にオープングラフ設定を行うことができます。フィードを有効にすることができます。これにより、RSSリーダーのユーザーが購読できるフィードが発行され、新しいコレクションアイテムを発行したときに更新を取得することができます。ここでは、フィードの設定を定義することができます。コレクションフィールドを使用して、RSSチャンネルのタイトル、説明、その他の設定のための動的なテンプレートを作成することができます。ページ設定内でフィードのプレビューを見ることができます。RSSのURLをコピーして他のアプリで使用したり、ウェブサイト上にリンクを追加することもできます。‍カスタムコードコレクションページテンプレートの<head>タグまたは</head><body>タグに、カスタムコードやスクリプトを追加することができます。これは、すべてのコレクションページに適用されます。このコードに、コレクションアイテムページごとに一意の値を持ちたい情報が含まれている場合、コード内のその値をコレクションフィールドに置き換えることができます。Field」をクリックするだけです。一言メモカスタムコードによって記述されたスクリプトなどは、サイトをパブリッシュして初めて確認できます。‍まとめいかがでしょうか。当社では、Webflowの関心を持ってくださった方々に向けて、無料Webflow説明会を実施しています。以下よりお問い合わせフォームにアクセスし、お気軽にお申し込みください。ご発注を検討されている企業様だけでなく、フリーランスや制作会社など同業者様でも構いません。Webflowの広がりによって、発注側も制作側もより幸せになれる社会の創造に向けて、当社は邁進していきます。今後とも宜しくお願い致します。‍Webflowとはなにか?についてはこちらで解説しています。合わせてご覧ください。‍Webflowについての基本的な使い方について解説した他の記事はこちらからご覧ください。Webflowのメリットについて解説した記事も投稿しています。よろしければご覧ください。