STUDIOのCMS機能でお知らせ一覧リストを作成する

企業やサービスのWEBサイトでは、最上部などに最新情報のリストを表示したいケースが多々あります。ここでは、STUDIOでCMS機能を使ってお知らせ欄のリストを作成する方法を説明します。

STUDIOのCMSの構造に付いて

CMSで”お知らせ”の内容をモデルとして定義する

まずは、CMSで1件の”お知らせ”が持つ情報を定義して、“お知らせ”モデルを作成します。

STUDIOのモデルは、完全に自由には作成できなくて、予め用意されている以下のモデルタイプの中から選んで、そこに項目を追加していく形のため、自分が必要な項目だけを持つモデルを作成することはできません。

モデルタイプ	説明
記事タイプ	ブログの投稿時事などに適した項目が用意されたモデル
ユーザータイプ	人の管理を行うのに適した項目が用意されたモデル
カテゴリータイプ	カテゴリーとして用いるのに必要な項目のみのモデル
カスタムタイプ	タグとして用いるのに必要な項目のみのモデル

ここでは分かりやすいように日本語で名前を付けています。（半角英数にするなど自由に変えていただいて構いません。）

「作成する」ボタンをクリックすると作成したモデルの設定画面が開くので、プロパティに必要な項目を追加します。

元からあるプロパティの削除や編集はできないです。

ここでは、お知らせに必要な情報の「日付」をテキストタイプのプロパティで追加します。

プロパティタイプは「テキスト」か「画像」のみで、日付形式などは無いためテキストタイプで追加しています。

「日付」のプロパティが追加されます。これでモデルの作成は完了です。

お知らせ の実データを作成する

次に、作成した”お知らせ”モデルの実データを作成していきます。「新規追加」ボタンを押します。

すると、データを編集する画面が開くので、登録する内容を入力します。

続けて、同じように3件のデータを登録します。

これでCMSで必要な作業は終わりです。「デザインエディタ」に戻ります。

デザインエディタでCMSのリストを配置する

配置したCMSリストのボックスを選択して、今回使用する日付とタイトル以外の項目を削除します。

残った項目を横並びにするために設定を変更します。ボックスを選択して矢印を押します。

右矢印を選択すると、ボックス内の項目が横並びになります。

投稿日のテキストボックスを選択します。「ボックス」タブで「テキスト」を「CMSプロパティから選択」の”日付”へと変更します。

お知らせ の詳細ページを作成する

次に、お知らせ一覧の各項目をクリックすると開く詳細ページを作成します。「ページを管理」メニューを選択します。

「ページ」タブの追加ボタンを押して、リストから「動的ページ（CMS）」を追加します。

次に「動的ページ用のモデルを選択」で”お知らせ”を選択します。

すると「お知らせ」モデルのデータを表示するページが作成されます。このページにテキストボックスを追加して、ボックスの「テキスト」を”Body”にします。

これで、追加したテキストボックスに本文が表示されるようになりました。

最初のページに戻り、リストのボックスの「リンク」プロパティで、初期設定のリンクを削除します。

先程作成したページを変わりに選択します。（入力欄にカーソルを入れるとページのリストが表示されて選択できます。）

以上で完了です。プレビュー表示すると以下のように表示されます。