![](https://mik2062.jp/wp-content/uploads/2022/08/fbb78db025839258a0abd0d6100df36a-150x150.png)
STUDIOでお知らせ一覧のようなリストは作成できますか?
![](https://mik2062.jp/wp-content/uploads/2022/08/1341584-150x150.jpg)
![](https://mik2062.jp/wp-content/uploads/2022/08/1341584-150x150.jpg)
![](https://mik2062.jp/wp-content/uploads/2022/08/1341584-150x150.jpg)
CMS機能を使って作成する方法を説明します。
WEBサイトのお知らせリストについて
企業やサービスのWEBサイトでは、最上部などに最新情報のリストを表示したいケースが多々あります。
この記事では、STUDIOでCMS機能を使ってお知らせ欄のリストを作成する方法を説明します。
![](https://mik2062.jp/wp-content/uploads/2023/11/image-11-1024x257.png)
![](https://mik2062.jp/wp-content/uploads/2023/11/image-11-1024x257.png)
STUDIOで、CMS機能でWEBサイトに更新可能なリストを表示する方法
STUDIOのCMSの構造
STUDIOのCMSは、扱う情報(今回の例では1件の”お知らせ”が持つ情報)をモデル
として定義して、その“お知らせ”モデルのデータを、必要な数だけ作成していきます。
次に、デザインエディタで“お知らせ”モデルのリストを画面に配置して、WEBページに表示します。
![](https://mik2062.jp/wp-content/uploads/2023/07/image-176-1024x633.png)
![](https://mik2062.jp/wp-content/uploads/2023/07/image-176-1024x633.png)
CMSで”お知らせ”の内容をモデル
として定義
まずは、CMSで1件の”お知らせ”が持つ情報を定義して、“お知らせ”モデルを作成します。
![](https://mik2062.jp/wp-content/uploads/2022/06/image-57.png)
![](https://mik2062.jp/wp-content/uploads/2022/06/image-57.png)
モデルタイプ | 説明 |
---|---|
記事タイプ | ブログの投稿時事などに適した項目が用意されたモデル |
ユーザータイプ | 人の管理を行うのに適した項目が用意されたモデル |
カテゴリータイプ | カテゴリーとして用いるのに必要な項目のみのモデル |
カスタムタイプ | タグとして用いるのに必要な項目のみのモデル |
画面左上の「モデル」の横にある「+」をクリックして「新規モデルの作成」画面を開きます。
ここでは「新規モデルの作成」でモデル名は”お知らせ”として、モデルタイプは「記事タイプ」を選択します。
![](https://mik2062.jp/wp-content/uploads/2022/06/image-58.png)
![](https://mik2062.jp/wp-content/uploads/2022/06/image-58.png)
「作成する」ボタンをクリックすると作成したモデルの設定画面が開くので、プロパティに必要な項目を追加します。
![](https://mik2062.jp/wp-content/uploads/2022/06/image-34-1024x652.png)
![](https://mik2062.jp/wp-content/uploads/2022/06/image-34-1024x652.png)
ここでは、お知らせに必要な情報の「日付」をテキストタイプのプロパティで追加します。
![](https://mik2062.jp/wp-content/uploads/2022/06/image-35-1024x608.png)
![](https://mik2062.jp/wp-content/uploads/2022/06/image-35-1024x608.png)
「日付」のプロパティが追加されます。これでモデルの作成は完了です。
![](https://mik2062.jp/wp-content/uploads/2022/06/image-36-1024x667.png)
![](https://mik2062.jp/wp-content/uploads/2022/06/image-36-1024x667.png)
お知らせ型 の実データを作成する
次に、作成した”お知らせ”モデルの実データを作成していきます。「新規追加」ボタンを押します。
![](https://mik2062.jp/wp-content/uploads/2022/06/image-37-1024x445.png)
![](https://mik2062.jp/wp-content/uploads/2022/06/image-37-1024x445.png)
データを編集する画面が開くので、登録する内容を入力します。
![](https://mik2062.jp/wp-content/uploads/2022/06/image-38-1024x430.png)
![](https://mik2062.jp/wp-content/uploads/2022/06/image-38-1024x430.png)
続けて、同じように3件のデータを登録します。
![](https://mik2062.jp/wp-content/uploads/2022/06/image-39-1024x476.png)
![](https://mik2062.jp/wp-content/uploads/2022/06/image-39-1024x476.png)
これでCMSで必要な作業は終わりです。「デザインエディタ」に戻ります。
![](https://mik2062.jp/wp-content/uploads/2022/06/image-40-1024x478.png)
![](https://mik2062.jp/wp-content/uploads/2022/06/image-40-1024x478.png)
デザインエディタでCMSのリストを配置する
CMSで作成したモデルのリストを、デザインエディタで配置できるようになっています。
画面左端のアイコンからパネルを開きます。
![](https://mik2062.jp/wp-content/uploads/2022/06/image-41-1024x427.png)
![](https://mik2062.jp/wp-content/uploads/2022/06/image-41-1024x427.png)
追加
タブでCMS
を選択するとお知らせ
のリストが表示されるので、選択して配置します。
![](https://mik2062.jp/wp-content/uploads/2022/06/image-42-1024x496.png)
![](https://mik2062.jp/wp-content/uploads/2022/06/image-42-1024x496.png)
配置したCMSリストのボックスを選択して、今回使用する日付とタイトル以外の項目を削除します。
![](https://mik2062.jp/wp-content/uploads/2022/06/image-45-1024x461.png)
![](https://mik2062.jp/wp-content/uploads/2022/06/image-45-1024x461.png)
残った項目を横並びにするために設定を変更します。ボックスを選択して矢印を押します。
![](https://mik2062.jp/wp-content/uploads/2022/06/image-47-1024x349.png)
![](https://mik2062.jp/wp-content/uploads/2022/06/image-47-1024x349.png)
右矢印を選択すると、ボックス内の項目が横並びになります。
![](https://mik2062.jp/wp-content/uploads/2022/06/image-46-1024x315.png)
![](https://mik2062.jp/wp-content/uploads/2022/06/image-46-1024x315.png)
投稿日のテキストボックスを選択します。「ボックス」タブで「テキスト」を「CMSプロパティから選択」の”日付”へと変更します。
![](https://mik2062.jp/wp-content/uploads/2022/06/image-48-1024x346.png)
![](https://mik2062.jp/wp-content/uploads/2022/06/image-48-1024x346.png)
お知らせ の詳細ページを作成する
次に、お知らせ一覧の各項目をクリックすると開く詳細ページを作成します。「ページを管理」メニューを選択します。
![](https://mik2062.jp/wp-content/uploads/2022/06/image-49-1024x335.png)
![](https://mik2062.jp/wp-content/uploads/2022/06/image-49-1024x335.png)
「ページ」タブの追加ボタンを押して、リストから「動的ページ(CMS)」を追加します。
![](https://mik2062.jp/wp-content/uploads/2022/06/image-50-1024x515.png)
![](https://mik2062.jp/wp-content/uploads/2022/06/image-50-1024x515.png)
次に「動的ページ用のモデルを選択」で”お知らせ”を選択します。
![](https://mik2062.jp/wp-content/uploads/2022/06/image-51-1024x455.png)
![](https://mik2062.jp/wp-content/uploads/2022/06/image-51-1024x455.png)
すると「お知らせ」モデルのデータを表示するページが作成されます。このページにテキストボックスを追加して、ボックスの「テキスト」を”Body”にします。
![](https://mik2062.jp/wp-content/uploads/2022/06/image-52-1024x649.png)
![](https://mik2062.jp/wp-content/uploads/2022/06/image-52-1024x649.png)
これで、追加したテキストボックスに本文が表示されるようになりました。
![](https://mik2062.jp/wp-content/uploads/2022/06/image-54-1024x627.png)
![](https://mik2062.jp/wp-content/uploads/2022/06/image-54-1024x627.png)
最初のページに戻り、リストのボックスの「リンク」プロパティで、初期設定のリンクを削除します。
![](https://mik2062.jp/wp-content/uploads/2022/06/image-55-1024x490.png)
![](https://mik2062.jp/wp-content/uploads/2022/06/image-55-1024x490.png)
先程作成したページを変わりに選択します。(入力欄にカーソルを入れるとページのリストが表示されて選択できます。)
![](https://mik2062.jp/wp-content/uploads/2022/06/image-56-1024x509.png)
![](https://mik2062.jp/wp-content/uploads/2022/06/image-56-1024x509.png)
以上で完了です。プレビュー表示すると以下のように表示されます。
![](https://mik2062.jp/wp-content/uploads/2022/06/20200622.gif)
![](https://mik2062.jp/wp-content/uploads/2022/06/20200622.gif)
独自ドメインの取得はお名前.comがおすすめ
WEBサイトを作るなら、独自ドメインを取得することをおすすめします。
独自ドメインにすることで以下のメリットがあります。
お名前.comのメリット
独自ドメインの取得は以下のメリットがあるお名前.comがおすすめです。
初年度1円〜のドメインがあり取得しやすい
WEBサイトを作成しても、続くかどうか分からない場合もあると思います。
お名前.comは初年度1円〜100円未満の格安料金のドメインがいくつもあるので、もしサイトが続かなかった場合でも損失を少なく抑えられます。
扱っているドメインが多い
ドメイン登録サービスによって取り扱うドメインが異なりますが、お名前.comは取り扱うドメインの数が多く、欲しいドメインを見つけやすいです。
利用者数が多いのでネットに情報が多い
独自ドメインは取得後、サーバーに設定する必要がありますが、お名前.comは利用者が多いので、分からないことが出てきた場合でも、ネットで情報を探しやすいです。