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

当ページのリンクには広告が含まれています。
  • URLをコピーしました!
生徒

STUDIOでお知らせ一覧のようなリストは作成できますか?

先生

CMS機能を使って作成する方法を説明します。

目次

WEBサイトのお知らせリストについて

企業やサービスのWEBサイトでは、最上部などに最新情報のリストを表示したいケースが多々あります。

この記事では、STUDIOでCMS機能を使ってお知らせ欄のリストを作成する方法を説明します。

この記事で分かること

STUDIOで、CMS機能でWEBサイトに更新可能なリストを表示する方法

STUDIOのCMSの構造

STUDIOのCMSは、扱う情報(今回の例では1件の”お知らせ”が持つ情報)をモデルとして定義して、その“お知らせ”モデルのデータを、必要な数だけ作成していきます。

次に、デザインエディタで“お知らせ”モデルのリストを画面に配置して、WEBページに表示します。

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

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

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

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

画面左上の「モデル」の横にある「+」をクリックして「新規モデルの作成」画面を開きます。

ここでは「新規モデルの作成」でモデル名は”お知らせ”として、モデルタイプは「記事タイプ」を選択します。

分かりやすさのために日本語で名前を付けています。(半角英数にするなど自由に変更していただいて構わないです。)

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

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

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

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

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

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

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

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

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

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

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

CMSで作成したモデルのリストを、デザインエディタで配置できるようになっています。

画面左端のアイコンからパネルを開きます。

追加タブでCMSを選択するとお知らせのリストが表示されるので、選択して配置します。

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

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

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

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

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

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

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

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

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

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

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

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

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

独自ドメインの取得はお名前.comがおすすめ

WEBサイトを作るなら、独自ドメインを取得することをおすすめします。

独自ドメインにすることで以下のメリットがあります。

独自ドメインがおすすめの理由
  • 好きな文字のドメインを選べる
  • サイトの独自性が上がり覚えてもらいやすい
  • サイトの信頼性が上がる
  • SEOの効果が期待できる

お名前.comのメリット

独自ドメインの取得は以下のメリットがあるお名前.comがおすすめです。

世界にたった一つ、あなただけのドメインを登録しよう!

お名前.comがおすすめの理由
  • 初年度1円〜のドメインがあり取得しやすい
  • 扱っているドメインが多い
  • 利用者数が多いのでネットに情報が多い
  • 大手企業のサービスで信頼できる

初年度1円〜のドメインがあり取得しやすい

WEBサイトを作成しても、続くかどうか分からない場合もあると思います。

お名前.comは初年度1円〜100円未満の格安料金のドメインがいくつもあるので、もしサイトが続かなかった場合でも損失を少なく抑えられます。

扱っているドメインが多い

ドメイン登録サービスによって取り扱うドメインが異なりますが、お名前.comは取り扱うドメインの数が多く、欲しいドメインを見つけやすいです。

利用者数が多いのでネットに情報が多い

独自ドメインは取得後、サーバーに設定する必要がありますが、お名前.comは利用者が多いので、分からないことが出てきた場合でも、ネットで情報を探しやすいです。

よかったらシェアしてね!
  • URLをコピーしました!
目次