生徒STUDIOでブログを作成することはできますか？
先生STUDIOでのブログサイトの作り方を説明します
STUDIOでもブログサイトを作れる
STUDIOはHTMLやCSSを一切記述しないノーコードツールですが、WordPressのようなCMS機能を持っているので、ブログサイトを作成することもできます。
STUDIOのプロジェクトを作成する
プロジェクト一覧ページで ＋ 新しいプロジェクトボタンを押します。
デザインテンプレートの選択で空白を選択します。
プロジェクト名を入力して 作成ボタンをクリックします。
CMSデータの作成
プロジェクトの画面になりますので、上部のメニューを開いてCMSをクリックします。
CMSの画面に移動しますので CMSをはじめるをクリックします。
この記事ではテンプレートを使用しないので空白からはじめるを選択して CMSをはじめるをクリックします。
モデルの作成
CMS画面で モデルを追加するをクリックします。
モデルは、1件のデータが持つ情報を定義したものです。
ここでのデータはブログの記事を指し、1件の記事が持つデータの内容をモデルとして定義します。
新規モデルの作成画面が開くのでモデル名に投稿と入力して、モデルタイプで記事タイプを選択して 作成するをクリックします。
記事データの作成
記事を追加ボタンをクリックします。
記事の入力画面が表示されるので、題名や本文を入力します。
Slug欄をクリックして編集状態にします。
この記事に合った内容に書き換えます。（ここではfirstとしています。）
記事の各項目の内容を入力していきます、
カバー画像を設定するには、Coverのサムネイル表示欄をクリックします。
画像選択ダイアログが開くので画像ファイルを選択します。
すべての項目を入力したことを確認します。
この記事内容をWEBサイトに表示するには、このCMSのデータを公開する必要があります。
画面右側上部のメニューを開いて公開するを選択します。
公開中に変わったことを確認後← 戻るをクリックしてCMS画面に戻ります。
CMSを 新規作成ボタンをクリックして次の記事を作成します。
最初の記事と同様に記事の各項目の値を入力します。
2番目の記事も最初の記事と同じように公開します。
各記事の画面から複製メニューをクリックすることで、表示している記事を基にして新しい記事を作成することもできます。
複製すると、元の記事とタイトルとSlugだけ値の違う記事データが新たに作成されます。
新しい記事の内容に書き換えて、同じように公開します。
同じようにして表示したい記事を作成していきます。
記事データを公開後に編集した内容は「更新する」を選択しないと公開データには反映されません。
更新されていないデータは、CMS画面で青丸●が付きますので、クリックして更新するを選んで緑丸●に変更してください。
記事一覧ページの作成
デザインエディタで画面左端のアイコンメニューの一番下のアイコンをクリックしてメニューを表示します。
メニューの追加タブを開いてセレクションのナビゲーションをクリックしてページに配置します。
次に、CMSを選択すると表示される投稿モデルのリストをクリックして画面に配置します。
メニューからページに追加した内容がページの上部中央に配置されない場合は、以下の方法で配置位置を変更してください。
ページのボックスを選択すると配置位置のアイコンが表示されるので、垂直方向の配置位置のアイコンをクリックして上揃えを選択します。
水平方向についても同じように、中央揃えを選択します。
画面上部のメニューを開いてページを管理をクリックします。
ページを選択して追加アイコンをクリックします。
作成するページの種類を選択するアイコンが表示されるので動的ページ CMS を選択します。
紐付けるモデルを選択する画面が開くので、上で作成した投稿モデルを選択します。
作成ボタンを押すと、CMSデータと連携したページが作成されます。
ページに投稿モデルの記事データのタイトルが埋め込まれた形でページが作成されます。
記事データの本文もページに表示するために、画面左側のメニューを開いて追加タブのボックスからTextをページに追加します。
追加したテキストのボックスを選択して右上角のアイコンをクリックして画面右側のメニューを表示します。
テキスト欄をクリックしてCMSプロパティから選択にあるBodyをクリックして選択します。
追加したTextのボックスを適当な大きさに広げます。
記事詳細ページへのリンクを設定するのは、投稿モデルのリストの先頭項目のボックスです。（リストの先頭項目での設定だけでよくて、残りの項目への設定は不要です。）
リストのボックスにはリンクは設定しません。（ここに設定すると動的リンクが正しく機能しません。）
ここまで作成したら、一度ライブプレビューで動きを確認します。
画面右上にあるライブプレビューをクリックします。
このプロジェクトでライブプレビューを初めて行う場合スタートボタンが表示されるのでクリックします。
ライブプレビュー用のリンクが生成されて表示されるので、それをクリックします。
ライブプレビューで以下のような動作になっていることを確認します。
検索画面を作成する
STUDIOではCMSデータの検索画面を作成することができます。
プロジェクトのメニューからページを管理を選択します。
ページタブで追加をクリックします。
追加するページの選択で検索ページ CMSをクリックします。
CMSデータの検索が行えるページが作成されます。
検索ページは何も変えなくても最初から以下の動作になっています。
CMSの検索フォームは、自分で他のページに追加することもできます。
配置後、検索フォームの検索ページに、作成した検索ページを設定すれば、同じように検索が行えます。
