ノーコードツール Studio の初心者時（2024年前半頃）の殴り書きメモを公開します。
超初心者の場合、デザインエディタやCMSの管理画面にどう遷移するのかもままなりません。
そんな時期に書いたメモなので、完全初心者の方の痒いところに手が届く存在のメモかもしれないと思ったので、公開することにしました。
とは言っても、自分メモなので他者からは難解な部分もあるメモがあります。
そのため、この記事は余裕がある時に随時情報を補完していきます。
Studio の仕様変更等でUIの違いも今後出てくる可能性もあります。
2025年10月現在においては、特に大きなUI変更は入っていないと思われます。
ブログ機能をサイトに設置する手順
CMS機能を使ってブログ機能を設定し、記事がサイトに反映されるようにする手順です。
- デザインを決める
カテゴリやタグの有無など事前に構成を決めておく意図 - CMS機能で記事モデルを追加
記事を更新していく場所を作る目的。
記事タイプを選択し任意の名前をつける。
この時ダミーでも良いので複数の記事を制作しておくとデザインエディタで作業しやすい。 - カテゴリモデルを追加しカテゴリタイプを選択
カテゴリを入れたい場合、必要な作業。
カテゴリと名前をつけ、事前に決めていたカテゴリを追加していく。 - タグモデルの追加しカスタムタイプを選択
タグを入れたい場合、必要な作業。
タグと名前をつけ、事前に決めておいたタグを入れておく。 - 記事にカテゴリの項目を追加する
［＋］→［プロパティ追加］→［カテゴリ］→［シンプルセレクト］→［追加ボタン］で設定完了。
項目が増えるので、各記事のカテゴリ欄のボックスをクリックすると、あらかじめ設定しておいたカテゴリが表示させるので、任意のものを選択する。 - 記事にタグの項目を追加する
［＋］→［プロパティ追加］→［タグ］→［マルチセレクト］→［追加ボタン］の順にクリックで設定完了。
項目が増えるので、各記事のタグ欄のボックスをクリックすると、あらかじめ設定しておいたタグが表示させるので、任意のものを選択する - 記事を公開する
公開する記事にチェックをいれると右上にステータス変更というボタンが出るので、そこから公開を選択する。
公開しない限りサイトに反映されない。また、修正毎に公開しないとサイトに反映されないので注意。記事がサイトに掲載されない、記事の修正が反映されないという時は、大体公開を押し忘れている。 - デザインに反映していくためにデザインエディタに移動
左のサイト名をクリックすることで移動できる
左中央にある［＞］→［追加］→［CMS］→［記事モデルの一覧］の順にクリック - 記事の中身をデザインエディタに反映させる
ページのタブに移動
左の［追加］→［動的ページ］→［記事モデルを選択］の順にクリック
CMSと連携したページが生成されるが、この時点では見出ししか表示されない。 - 本文を表示させる
［追加］→［ボックス］→［リッチテキスト］の順にクリック
ページにテキストボックスが表示されたら、左のパネルをレイヤーに切り替え、bodyとリッチテキストのコネクタ（青丸）をつなげると反映される - Homeのページの一覧と記事をリンクさせる
Homeに配置している一覧の［div］を選択し右のリンクから記事モデルを選択する。
ライブプレビューを行ないクリックで該当のページに移動すれば成功。 - カテゴリを表示させる
今の段階では、カテゴリをタグが表示されていないので表示させる。
記事のデザインエディタに移動し、テキストを追加する。
右側のボックス設定パネルを開きテキストラ欄をクリック
カテゴリのtitleをクリックするとカテゴリ名が表示される。 - タグを表示させる
テキストを追加し右のボックスパネルのテキストをクリック。
CMSプロパティから選択の下にある［タグ］を選択すると設定していたタグが出てくる - 同じ手順でHomeの記事一覧にもカテゴリとタグをつけることができる
- 完成
公開日や更新日の時間を削除したい場合
デフォルトでは日付と時間がセットで表示されますが、時間はいらない場合、消すことが可能です。
その手順は下記
- 該当の日付をクリック。右パネルのテキスト下の青文字をクリック。
- フォーマットという編集できるボックスが表示されるので時刻を削除したら完了
また、日付の見せ方もここで編集可能、スラッシュからドットへ変更などもできる
カテゴリ分けの方法
同じモデル内でしか分けられない。詳細は下記。
カテゴリー別記事一覧ページの作成方法
ブログ一覧を横並びにする方法
- 追加から該当のモデルを追加
- 表示数を４つ以上にする
- ［div］の中の［a］のレイアウトを調整
- ［a］を選択した状態で［div］をクリックするとレイアウトの矢印が出るので折り返しの矢印を選択（レイヤーから［div］を選択しても矢印が出てこない。この方法だと［div］の矢印が出る）
- 完成
