コレクションに新しいアイテム（ブログ記事、ヘルプ記事など）を作成すると、いつでもそのアイテム用のページが自動的に作成されます。コレクションページはテンプレートのように機能します。コレクションページのレイアウトとデザインは、自動的に生成されるすべてのアイテムページに適用されます。

コレクションページは、基本的に、ブログ記事、ヘルプ記事、あるいはランディングページのような、繰り返し使用されるコンテンツのテンプレートです。

このレッスンでは

  1. コレクションページを作成する
  2. コンテンツの追加と接続
  3. コレクションページをプレビューする
  4. コレクションページへのリンク
  5. コレクションページの設定

について説明しています。

A diagram displays a dotted line connection from a Collection to both a Collection list and a Collection page. The Collection list branches off to three profile tab previews. The collection page branches off to a single profile card.

コレクションページの作成

コレクションが作成されると、コレクションページも自動的に作成されます。このCollectionページは、「ページパネル」の「Collectionページ」セクションで選択することができます。コレクションページの横にある紫色のアイコンは、CMSで生成されたページであることを示します。

The CMS collection pages section displays four page templates called, Authors, Blog posts, collections and projects.

1. コンテンツの追加と接続

コレクションページは、他の静的なページと同じように設計・開発できますが、その設計に動的なコンテンツを取り込む場合に、コレクションページの威力が発揮されます。

2. 静的・動的要素の追加

コレクションリストと同様に、コレクションページにドロップされた要素は、コレクションからフィールドに接続されるまでは静的です。Collectionページは他のページと同様にデザインしますが、このページはすべてのCollectionアイテムのテンプレートとして機能します。

以下の手順で、デザイン内のさまざまな要素を Collection フィールドに接続することができます。

  1. Collection ページで要素を選択する
  2. 設定アイコンをクリックします（または、要素設定パネルに移動します – ショートカット:D）。 
  3. コレクションからコンテンツを取得する]をチェックします。
  4. ドロップダウンを開き、コンテンツを取得するコレクションフィールドを選択します。
  5. 要素がフィールドからコンテンツを取得すると、それはその1つの項目だけのものではありません。このフィールドは、そのコレクション内のすべてのアイテムのページにわたって、要素に接続されます。

Step one on the left, select the settings icon on the H1 text element. Step two on the right, the choose heading type settings panel displays H1 through H6 buttons, a learn more message with a Ok, got it button, a check box for the CMS Get text from a collection called Blog posts with a dropdown menu and a show all settings button.

豆知識 :
キャンバス上では、静的要素は青色、動的要素（CMSからデータが来る要素）は紫色の輪郭線が表示されます。

3. コレクションページのプレビューと切り替え

コレクションページを編集しているとき、コレクション内のアイテムの1つだけを編集しているように見えます。実際には、テンプレートを編集しているため、他のすべてのページを同時に編集しています。

トップバーのドロップダウンを使って、ページ内のコンテンツを任意のコレクションアイテムに切り替えることができます。コレクションページのドロップダウン上部の検索バー、またはクイック検索バーにページ名を入力すると、特定のページに移動することができます。

The blog posts template collection page displays a dropdown to select between 6 different pages.

便利なショートカットキー：
‍Shift+Option（WindowsではShift+Alt）を押しながら、キーボードの左右の矢印を押すと、コレクションアイテムがリストの次または前のアイテムに切り替わります。

Three collection items displaying the process of switching from one to another.

4. コレクションページへのリンク

他のコレクションページまたはコレクションリストから、コレクションページにリンク することができます。コレクションリストからリンクするには、次の手順に従います。

  1. コレクションリストを追加する
  2. コレクションに接続する
  3. ボタン、またはその他のリンク要素をコレクションリストに追加します。
  4. リンク要素を選択した状態で、歯車のアイコンをクリックします(または要素設定パネルに移動します)。
  5. 紫色のコレクションページリンクオプションを選択します。
  6. ［現在のアイテム]を選択します。
  7. これにより、「コレクション」リスト内の各ボタンが、各アイテム用に作成されたそれぞれの「コレクション」ページにリンクされます。

豆知識 :
リンク設定のURLフィールドタイプで、任意のリンク要素をリンクフィールドに接続することもできます。

5. コレクションページ設定

コレクションページ設定では、SEOメタタイトルと説明、Open Graphタイトルと説明、RSS、およびコレクションページテンプレートのカスタムコードを設定することができます。ただし、静的なページ設定とは異なり、Collectionページ設定は動的な値を持つことができ、Collectionアイテムページごとに固有の情報となります。

コレクションページ設定には、ページパネルでコレクションページテンプレートにカーソルを置くと表示される設定アイコンを通じてアクセスできます。

A settings icon is highlighted on a Blog post template page under the CMS collection pages section.

ダイナミックSEO設定

コレクションフィールドを使用して、ページタイトルと説明文のテンプレートを定義できます。また、プレビューボックスで、検索エンジンの結果ページ（SERP）でどのように表示されるかを確認することができます。

The SEO settings panel displays a search result preview, a title tag with a Name field added and a meta description input field with a blog post summary field.

ダイナミックオープングラフ設定

ここでは、Facebook、Twitter、LinkedIn、Pinterest、Google+でコレクションページへのリンクを共有する際に表示される情報を設定することができます。コレクションフィールドを使用すると、各ページのテンプレートが作成され、各ページに固有のOpen Graph情報が表示されます。

The Open Graph Settings panel displays an image preview, an input field for a title, a check box for Same as SEO title tag, an input field for a description and a check box for Same as SEO meta description and a drop down menu for the open graph image.

RSSフィードの設定

コレクションページ設定で、コレクションの RSS 2.0 フィードを有効にすることができます。これにより、RSSリーダーユーザーが購読できるフィードが発行され、新しいコレクションアイテムを公開したときにアップデートを取得することができます。

The RSS Feed Settings panel displays a description and a radio button to Enable RSS 2.0 feed for a collection item called Blog Post pages.

ここでは、フィードの設定を定義することができます。Collectionフィールドを使用して、RSSチャンネルのタイトル、説明、その他の設定のための動的なテンプレートを作成することができます。また、ページ設定内でフィードのプレビューを見ることができます。その後、RSSのURLをコピーして他のアプリで使用したり、ウェブサイト上にリンクを追加することもできます。

カスタムコード

Collectionページテンプレートの<head>タグまたは</head><body>タグに、カスタムコードやスクリプトを追加することができます。これは、すべてのCollectionページに適用されます。また、このコードに、コレクションアイテムページごとに一意の値を持ちたい情報が含まれている場合、コード内のその値をコレクションフィールドに置き換えることができます。値を選択し、カスタムコードテキストフィールドの右上にある紫色の</body> + フィールドの追加をクリックするだけです。

注意点：
カスタムコードとスクリプトは、公開されたサイトのみに表示されます。

The Custom Code settings panel displays an Inside <head> tag input area and a Before </body> tag input area.” id=”” width=”auto” height=”auto” loading=”auto”></div> </figure> </div> <a href=
すべての記事を見る