メインコンテンツにスキップ
すべてのコレクションCMS
CMS記事作成から公開までの流れ
CMS記事作成から公開までの流れ

CMSダッシュボードとデザインエディターを使用してコンテンツを作成・デザイン

Saika avatar
対応者:Saika
2か月以上前に更新

CMSは、記事や作品といったコンテンツの管理が可能です。Studioでは、CMSダッシュボードからコンテンツデータを編集・管理し、デザインエディターでサイト上にどのように表示するかを設定できます。

この記事では、CMSダッシュボードで記事となるアイテムの作成から、デザインエディターでの表示。公開するまでの大まかな流れをご紹介します。事前に以下の記事をお読みいただくと、より理解が深まります。

1. CMSを有効にする

まず始めに、CMS機能を有効にしましょう。

ダッシュボード上部の「CMS」タブ、またはデザインエディター左上にある「CMS」リンクをクリックして、CMSダッシュボードを開き、「CMSをはじめる」をクリックします。

初期データの有無が選べるので、「空白からはじめる」を選択します。サンプルデータが追加される「テンプレートデータを使う」でも構いません。

※ CMS組み込み済みのテンプレートからプロジェクトを開始した場合、この選択画面は表示されません。

2. モデルとアイテムを追加する

まずは「モデル」を追加します。「モデル」は4種類で、記事タイプやユーザータイプなど用途によって使い分けます。今回は記事の執筆に特化した編集画面をもつ「記事タイプ」のモデルを使います。なおモデルは記事自体ではなく、「記事をひとまとめにしたグループ」と覚えておきましょう。

画面左上の「+」ボタンをクリックし、任意のモデル名を入力。作成するをクリックします。

作成した記事モデルが画面に表示され、中に記事(アイテム)を追加できるようになります。「記事を追加」ボタンからアイテムを追加しましょう。

記事を追加するとアイテム自体の編集画面に移動します。編集画面では、記事タイトル、本文、カバー画像など追加できるので、サンプルとしてそれぞれ追加しましょう。ここで追加した文章と画像は後のステップで、エディターで呼び出し表示させます。

3. デザインエディターで動的ページ作成

デザインエディターへ移動し、先ほど追加した記事を表示する「動的ページ」を追加します。このページは通常のページとは異なり、CMSデータを紐づけて表示・デザインできるページです。

1. スクリーン右上から追加アイコンをクリックします。

2. ページの種類を選択する画面が表示されるので、「動的ページ(CMS)」を選択します。

3.ページに表示したいモデルを選択します

今回は先ほど新規作成したモデルを選びます。

動的ページに選択したモデルのデータが紐付き、画像のようなタイトルのみデフォルトで配置されているページが現れます。

このページにダッシュボードで登録した本文やカバー画像を追加し、デザインを整えていきます。

4. ボックスに記事情報を紐付け

まずは、カバー画像を表示してみましょう。

  1. 画像ボックスを追加パネルよりドラッグ&ドロップで配置します。

  2. 画像ボックスを選択し、レイヤーパネルを開きます。Coverプロパティ右横の青い丸をクリックして、コネクタを画像ボックスへ繋げます。

    ※画面右側のボックス設定パネルでも設定可能です。

    これでカバー画像が表示できました。次は本文を追加していきましょう!本文はリッチテキストボックスを利用します。

  3. 画面左側の追加パネルから、リッチテキストボックスを配置します。

  4. レイヤーパネルを開き、Body プロパティ横の青い丸をクリックして、コネクタをリッチテキストボックスへ繋げます。

    ※画面右側のボックス設定パネルでも設定可能です。

データ表示ができたら、ボックスのサイズやマージン・パディングなどで整えていきましょう!

Studioの基本とレイアウトの流れ が参考になるのでぜひ読んでみてください。

Tips:動的ページでのアイテム切り替え

動的ページは、選択したモデルにリンクしています。そのため、同じモデル内の異なるアイテム(記事)も、エディター上で切り替えて確認することができます。

5. アイテムを公開

デザインが完成したら、記事(アイテム)を公開しましょう。編集画面右側にある「公開する」ボタンをクリックして公開します。

※公開前にライブプレビュー機能で下書きのまま表示確認も可能です

6. サイトを公開

Studioではサブドメイン(.studio.site)または独自ドメインでのサイト公開が可能です。ここでは、サブドメインでの公開をご紹介します。独自ドメインでのサイト公開方法は、以下の記事をご覧ください。

  1. デザインエディター右上の「公開」ボタンから公開パネルを開きます。

  2. お好きなサブドメインを入力・保存し、「公開」ボタンを押せば公開完了です。

大まかな流れは以上になります!

CMS機能を使えば、記事だけでなくメンバー情報や商品管理も行えます。

Studio Communityで受講可能な CMSの基礎 動画コースや、YouTubeチャンネルで公開している Studio CMS 2.0 でメディアサイトをゼロから作ってみよう 動画も活用してみてください。

関連記事

CMS blog 記事 ブログ 新規作成 動的ページ

こちらの回答で解決しましたか?