データを作っただけでは表示されない

まず、3-4で登録した記事4件が、現時点でサイトのどこにも表示されていないことを確認します。エディタを開いても、ライブプレビューを開いても、お知らせに関する表示は、どこにもありません。

これは、CMSがデータの保管庫であり、そのデータをどう見せるかは、ページ側で別に設計する必要があるためです。同じ記事のデータでも、トップページでは小さなカードに、詳細ページでは大きな見出しと本文に、というように、見せ方を自由に選べます。

ここから、①データを表示する場所（カード）を作る → ②データソースを指定する → ③プロパティを結びつけるという順序で、お知らせを一覧に表示します。

NEWSのセクションとカード1枚を作る

NEWSのセクションの土台には、3-1で置いた、2つ目の仮セクションを使います。SERVICEと同じように、全幅のセクションの内側に、幅1280px・高さ100%のコンテンツ用ボックスを入れます。上下のパディングは80pxにして、高さはautoにします。

見出しエリアは、SERVICEで作ったものを、コンポーネントにして使い回します。見出しエリアを選んで、メニューからコンポーネント化し、英字と日本語のテキストを、プロパティにします。NEWSのセクションに同じコンポーネントを置き、データのタブで、英字を NEWS、日本語を お知らせ に書き換えます。複製ではなくコンポーネントにしておくと、あとで見出しのデザインを直したときに、SERVICEとNEWSの両方に、まとめて反映されます。

見本サイトのNEWSは、記事が縦に並ぶ一覧です。1件分のカードは、横並びで、左にサムネイル画像、右に、日付・タイトル・カテゴリー・本文の冒頭を縦に並べます。まず、カード1枚を、仮の内容で組みます。

この時点のカードの中身は、仮のテキストと仮の画像のままで構いません。次の手順で、CMSの実際のデータに置き換えます。

①データソースを指定する

カードが1枚できたら、外枠のボックスを選択し、Ctrl/⌘+L でリストにします。3-3でSERVICEのカードを3枚に増やしたときと同じ操作です。解説動画では、左のパネルのCMSのタブから、お知らせのモデルをNEWSのセクションに置いて、リストを作っています。次に、右パネルの[データ]タブを開いて、データソースにお知らせのモデルを指定します。すると、カードが自動的に、登録した記事の件数と同じ、4枚に増えます。

3-3のリストでは、データを手作業で入力しましたが、今回は、CMSに登録済みのデータを、データソースとして指定します。同じリストの仕組みを使いながら、データの出どころが、自分で入力した値から、CMSの記事に変わったと考えるとわかりやすくなります。

②プロパティを結びつける

カードの中の各パーツを選択して、[データ]タブで、対応するプロパティに結びつけます。結びつけるたびに、そのパーツが、1枚ずつ実際のデータの内容に変わります。

すべての結びつけが終わると、4枚のカードが、それぞれ別々の内容になります。この、データソースの指定と、プロパティの結びつけの2ステップが、CMSのデータを、実際にページへ表示するための、基本の型です。

並び順を設定して、ナビをつなぐ

リストを選択して、[データ]タブでソートを開くと、並び順を指定できます。公開日時の降順（新しい順）にすると、最新のお知らせが一番上に来ます。見本サイトのNEWSは、4件がすべて縦に並ぶため、表示件数の制限は設けません。

NEWSのセクションができたので、3-1で保留にしていた、ヘッダーのナビのお知らせも、ここでつなぎます。NEWSのセクションに、ID news を付けて、ナビのお知らせから、そのIDへのアンカーリンクを設定します。3-1のサービスと同じ、先にID、あとでリンクの順序です。

動的ページで記事の詳細を作る

記事の詳細ページは、4件分を1つずつ手作業で作るのではなく、動的ページという仕組みを使います。ページパネルで新規ページを作るときに、ページタイプ「動的ページ」を選び、データソースにお知らせを指定します。すると、1ページ分のデザインを作るだけで、登録した記事の数だけ、詳細ページが自動で作られます。

パスは /news/{スラッグ} の形式で設定します。{スラッグ} の部分には、3-4で記事ごとに設定した、スラッグの値が入ります。たとえば、1件目の記事は /news/isms-certification のように、記事ごとに、異なるURLが自動的に割り当てられます。

ヘッダーを、コンポーネントとして配置するために、解説動画では、ホームのヘッダーを選んで、ここでコンポーネント化しています。コンポーネントにしておけば、ホームページのヘッダーを変更したときに、記事の詳細ページのヘッダーにも反映されます。ここで、コンポーネント化の意味が、実際に確認できます。3-1の時点でコンポーネントにしている場合は、そのまま使います。

一覧から詳細へリンクする

最後に、一覧のカードから、詳細ページへ移動できるようにリンクを設定します。一覧のカードの外枠を選択して、右パネルの[設定]タブでリンクの設定を開き、リンク先に、動的ページを指定します。

動的ページへのリンクは、カード1枚ごとに、個別のURLを設定する必要がありません。リストの各カードが、結びついているアイテムに応じて、対応する記事の詳細ページへ、自動的に移動します。プレビューで、4枚それぞれをクリックして、違う記事に移動することを確認しましょう。

リンクは、カードの中の一部の文字ではなく、カード全体の外枠に付けます。外枠に付けると、サムネイルをクリックしても、タイトルをクリックしても、同じ記事に移動できて、押しやすくなるからです。

記事ごとのメタ情報とホームに戻るボタンを設定する

動的ページの右パネルの[ページ]タブでも、ページごとの、タイトルと説明文と、ソーシャルカバー画像を設定できます。ここでも、プロパティに結びつけると、記事ごとに自動で内容が変わるメタ情報になります。

この設定により、記事が増えるたびに、メタ情報を手作業で入力し直す必要がなくなります。動的ページを1つ作っておけば、記事ごとに、タイトルや説明文が自動で変わる仕組みになります。メタ情報の意味や役割は、3-6で、サイト全体の設定とあわせて学びます。

詳細ページの本文の下には、一覧へ戻るためのホームに戻るボタンを置きます。3-3で作ったボタンのコンポーネントを、コンポーネントのパネルから置いて、データのタブで、テキストのプロパティを ホームに戻る、リンクのプロパティを、ホームページにします。ボタンの見た目は、3-3の「詳しくはこちら」と同じです。1つのコンポーネントを、文字もリンク先も違う場所で、使い回せます。

記事を読み終えた人が、迷わずサイトの入り口に戻れるように、詳細ページにも、戻り道を用意しておくことが大切です。2つ以上の記事を開いて、どの記事からもホームへ戻れることを、プレビューで確認しましょう。

（余力があれば）カテゴリーで絞り込む

このセクションは、見本サイトの完成に必須ではありません。時間に余裕があるときに、カテゴリーで記事を絞り込む方法を、確認しておきましょう。絞り込みには、フィルターの機能を使います。フィルターには、3つの種類があり、目的によって使い分けます。

固定フィルターの設定は、リストの[データ]タブでフィルターを開き、カテゴリーが、プレスリリースのものだけに絞る条件を設定します。1つのリストに設定できる条件は、最大5つのプロパティまでで、複数を指定した場合は、すべての条件を満たすものに絞られます。

見本サイトのNEWSは、4件がすべて表示される構成のため、このレッスンの本編では、フィルターは使いません。記事が増えて、絞り込みが必要になる場面では、この3種類のフィルターが選択肢になることを、覚えておきましょう。

ここまでの完成状態

NEWSが完成したら、見本サイトの、ヘッダーからNEWSまでが、すべてできあがります。次の3-6では、フッターを作り、スマートフォンやタブレットでの表示を整えて、最終確認をしたうえで公開します。

完成状態と違う箇所があれば、該当するセクションの手順に戻って、設定を見直しましょう。原因が見つからないときは、1つ前の状態まで戻して、操作を1つずつ確認すると、見つけやすくなります。