メインコンテンツにスキップ

CMS記事作成から公開までの流れ

CMS機能を活用したコンテンツ公開までの流れをまとめました。CMSダッシュボードでのコンテンツ作成から、エディタでのデザイン調整、その後コンテンツを公開するまでの流れをステップごとに解説します。

今日アップデートされました

CMS記事作成から公開までの流れ

CMS機能を使った、記事作成から公開までの手順を紹介します。 StudioのCMS機能では、ブログ記事などのコンテンツをCMSダッシュボードで作成し、コンテンツの見せ方(ページのデザイン)はデザインエディタで設定します。

CMSとは

CMS(コンテンツ管理システム)とは、コンテンツの中身(記事や画像など)と、コンテンツの見せ方(Webページのデザイン)を分けて管理できる仕組みです。詳しくは7. CMSの使い方をご覧ください。

CMSを使うメリット

  • ブログ記事やメンバー紹介など、同じ形式で内容が異なる複数のコンテンツに、統一したデザインを適用できます。

  • デザインを変更したい場合も、既存のコンテンツに一括で反映できるため、ページの作成や管理がスムーズになります。

  • デザイン編集に慣れていない人が執筆や更新をする場合でも、シンプルな管理画面から簡単に操作を行うことができます。

StudioでのCMS管理

Studioでは、コンテンツの中身と見せ方(Webページのデザイン)を、それぞれ以下の場所で管理します。

  • コンテンツの中身の作成・管理:CMSダッシュボード

  • コンテンツの見せ方(Webページのデザイン):デザインエディタ上の動的要素(動的ページ動的モーダル動的リストなど)

この記事では、CMS機能を活用してブログ記事などのコンテンツを公開するまでのおおまかな流れを解説します。

1. CMSをはじめる

まずは、プロジェクトでCMS機能の使用を始めましょう。

  1. CMSダッシュボードにアクセスする

    CMSダッシュボードは、該当プロジェクトのダッシュボードまたはデザインエディタからアクセスすることができます。

    • ダッシュボードから開く場合:画面上部の「CMS」タブをクリック

すでにCMSを利用中のプロジェクトでは、この「はじめよう」のページは表示されません。

  • デザインエディタから開く場合:左上のプロジェクト名にカーソルを当て、「CMS」をクリック

2. CMSを空白からはじめる

CMS機能を有効化していないプロジェクトでは、以下のようなCMSの始め方を選択する画面が表示されます。この記事では、テンプレートを使用しない方法を紹介するので、[空白からはじめる]を選びます。

すでにCMSを利用中のプロジェクトでは、この「はじめよう」のページは表示されません。

Tips: その他の方法でCMSを始める

テンプレートから始める場合

モデルアイテムがあらかじめセットされたテンプレートデータを作成できます。同時に、プロパティが紐付いた動的ページ検索ページがデザインエディタ上で自動作成されるため、CMSダッシュボードでコンテンツを編集するだけですぐに利用を開始できます。

CMSの代表的な用途に合わせて、以下のテンプレートを用意しています。

  • メディア・ブログ

  • メンバー紹介

  • ニュース・お知らせ

WordPressのデータを引き継いで始める場合

画面下の[XMLファイルをインポート]を選択します。 詳しい手順は、WordPressからStudioへデータをインポートするをご覧ください。

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

CMSの利用を開始したら、このダッシュボードでコンテンツを作成していきます。 まずは、コンテンツを同じ種類でまとめて管理するための単位である「モデル」を追加します。 テンプレートから選ぶことで、必要なモデルをまとめて追加することもできます。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

5. アイテムを公開

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

※公開前にも、ライブプレビュー機能を使うことで、下書きのまま表示を確認できます。

6. サイトを公開

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

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

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

CMS記事作成から公開までの流れは以上です。

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

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

Studioにはチャットサポートもございます。画面右下の[?]ボタンから[チャットで問い合わせる]をクリックし、サポートへお問いわせください。

関連記事

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

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