コレクションに新しいアイテム(ブログ記事、ヘルプ記事など)を作成すると、いつでもそのアイテム用のページが自動的に作成されます。コレクションページはテンプレートのように機能します。コレクションページのレイアウトとデザインは、自動的に生成されるすべてのアイテムページに適用されます。
コレクションページは、基本的に、ブログ記事、ヘルプ記事、あるいはランディングページのような、繰り返し使用されるコンテンツのテンプレートです。
このレッスンでは
- コレクションページを作成する
- コンテンツの追加と接続
- コレクションページをプレビューする
- コレクションページへのリンク
- コレクションページの設定
について説明しています。
コレクションページの作成
コレクションが作成されると、コレクションページも自動的に作成されます。このCollectionページは、「ページパネル」の「Collectionページ」セクションで選択することができます。コレクションページの横にある紫色のアイコンは、CMSで生成されたページであることを示します。
1. コンテンツの追加と接続
コレクションページは、他の静的なページと同じように設計・開発できますが、その設計に動的なコンテンツを取り込む場合に、コレクションページの威力が発揮されます。
2. 静的・動的要素の追加
コレクションリストと同様に、コレクションページにドロップされた要素は、コレクションからフィールドに接続されるまでは静的です。Collectionページは他のページと同様にデザインしますが、このページはすべてのCollectionアイテムのテンプレートとして機能します。
以下の手順で、デザイン内のさまざまな要素を Collection フィールドに接続することができます。
- Collection ページで要素を選択する
- 設定アイコンをクリックします(または、要素設定パネルに移動します - ショートカット:D)。
- コレクションからコンテンツを取得する]をチェックします。
- ドロップダウンを開き、コンテンツを取得するコレクションフィールドを選択します。
- 要素がフィールドからコンテンツを取得すると、それはその1つの項目だけのものではありません。このフィールドは、そのコレクション内のすべてのアイテムのページにわたって、要素に接続されます。
豆知識 :
キャンバス上では、静的要素は青色、動的要素(CMSからデータが来る要素)は紫色の輪郭線が表示されます。
3. コレクションページのプレビューと切り替え
コレクションページを編集しているとき、コレクション内のアイテムの1つだけを編集しているように見えます。実際には、テンプレートを編集しているため、他のすべてのページを同時に編集しています。
トップバーのドロップダウンを使って、ページ内のコンテンツを任意のコレクションアイテムに切り替えることができます。コレクションページのドロップダウン上部の検索バー、またはクイック検索バーにページ名を入力すると、特定のページに移動することができます。
便利なショートカットキー:
Shift+Option(WindowsではShift+Alt)を押しながら、キーボードの左右の矢印を押すと、コレクションアイテムがリストの次または前のアイテムに切り替わります。
4. コレクションページへのリンク
他のコレクションページまたはコレクションリストから、コレクションページにリンク することができます。コレクションリストからリンクするには、次の手順に従います。
- コレクションリストを追加する
- コレクションに接続する
- ボタン、またはその他のリンク要素をコレクションリストに追加します。
- リンク要素を選択した状態で、歯車のアイコンをクリックします(または要素設定パネルに移動します)。
- 紫色のコレクションページリンクオプションを選択します。
- [現在のアイテム]を選択します。
- これにより、「コレクション」リスト内の各ボタンが、各アイテム用に作成されたそれぞれの「コレクション」ページにリンクされます。
豆知識 :
リンク設定のURLフィールドタイプで、任意のリンク要素をリンクフィールドに接続することもできます。
5. コレクションページ設定
コレクションページ設定では、SEOメタタイトルと説明、Open Graphタイトルと説明、RSS、およびコレクションページテンプレートのカスタムコードを設定することができます。ただし、静的なページ設定とは異なり、Collectionページ設定は動的な値を持つことができ、Collectionアイテムページごとに固有の情報となります。
コレクションページ設定には、ページパネルでコレクションページテンプレートにカーソルを置くと表示される設定アイコンを通じてアクセスできます。
ダイナミックSEO設定
コレクションフィールドを使用して、ページタイトルと説明文のテンプレートを定義できます。また、プレビューボックスで、検索エンジンの結果ページ(SERP)でどのように表示されるかを確認することができます。
ダイナミックオープングラフ設定
ここでは、Facebook、Twitter、LinkedIn、Pinterest、Google+でコレクションページへのリンクを共有する際に表示される情報を設定することができます。コレクションフィールドを使用すると、各ページのテンプレートが作成され、各ページに固有のOpen Graph情報が表示されます。
RSSフィードの設定
コレクションページ設定で、コレクションの RSS 2.0 フィードを有効にすることができます。これにより、RSSリーダーユーザーが購読できるフィードが発行され、新しいコレクションアイテムを公開したときにアップデートを取得することができます。
ここでは、フィードの設定を定義することができます。Collectionフィールドを使用して、RSSチャンネルのタイトル、説明、その他の設定のための動的なテンプレートを作成することができます。また、ページ設定内でフィードのプレビューを見ることができます。その後、RSSのURLをコピーして他のアプリで使用したり、ウェブサイト上にリンクを追加することもできます。
カスタムコード
Collectionページテンプレートの<head>タグまたは</head><body>タグに、カスタムコードやスクリプトを追加することができます。これは、すべてのCollectionページに適用されます。また、このコードに、コレクションアイテムページごとに一意の値を持ちたい情報が含まれている場合、コード内のその値をコレクションフィールドに置き換えることができます。値を選択し、カスタムコードテキストフィールドの右上にある紫色の</body> + フィールドの追加をクリックするだけです。
注意点:
カスタムコードとスクリプトは、公開されたサイトのみに表示されます。