Studio制作：カスタマイズして作成
教科書で作成したプロジェクトを複製して、ポートフォリオサイトに改変してください。
参考サイト：https://202606akutsu-p.studio.site/
プロジェクトを複製する
プロジェクト一覧内の「テストプロジェクト」を複製します。
プロジェクト名を変更する
少し時間を置いた後にプロジェクト一覧をリロードすると「テストプロジェクトのコピー」が表示されます。
「Dashboard」をクリックしてダッシュボードを表示します。
左メニュー「プロジェクト設定」を選択、「プロジェクト名」の編集アイコンをクリックします。
プロジェクト名を好きな名称に変更して「保存」をクリックします。
必要ないページを削除する
必要ないページを削除します。
※念のためバージョン履歴を追加してバックアップをとっておきましょう（Freeプランのバックアップは24時間です）
必要なページは以下になります。
既存ページの名称とパスを変更する
作成したいページ構成に合わせて「ページ名」と「パス」を変更します。
ページ構成例
- ページ名「ホーム」パス「/」
- ページ名「sp_menu」パス「/sp_menu」
- ページ名「成果物一覧」パス「/works」
- ページ名「成果物詳細」パス「/works/:slug」
- ページ名「お問合せ」パス「/contact」
ページを選択して右パネル「ページ」の「ページ名」と「パス」を変更します。
パスを変更すると「リンクの更新」画面が表示されるので「更新」します。
古いパスのままだとリンクが正しく開かなくなる場合があります。「リンクの更新」を行うことで、Studio内でそのページに設定されているリンクを新しいパスに自動で変更できます。
変更すると以下のような「ページ名」と「パス」になります。
ヘッダーを変更する
サイト名を変更する
ヘッダー内のサイト名を好きな名前に変更します。
ナビゲーションを変更する
作成したいページ構成に合わせてメニュー項目を変更します。
ページ構成例
- HOME：ホーム
- ABOUT：自己紹介
- WORKS：成果物一覧
- CONTACT：お問合せ
必要ないパーツは削除します。
設定できるリンクは変更します。
メインビジュアルを変更する
写真とキャッチコピーを変更します。
「CONCEPT」を改変して「自己紹介（ABOUT）」を作成する
AIを使って自己紹介文やコンテンツの構成を考え、自由に作成しましょう。
構成の参考
レイヤー名とID名を変更する
左パネル「レイヤー」からレイヤー名を変更します。
変更前
変更後
右パネル「設定」から「ID名」を変更します。
変更前
変更後
ヘッダーのリンクを変更する
ヘッダーの「ABOUT」のリンクを変更します。
ライブプレビューでリンクが機能しているか確認しましょう。
カルーセルを変更する
写真や高さ、コントロールボタンなどを自由に変更します。
アクセスを削除する
必要ない場合はアクセスを削除します。
フッターを変更する
サイト名とナビゲーション名、リンクを変更します。必要ないパーツは削除します。
ライブプレビューでリンクが機能しているか確認しましょう。
CMSを変更する
デザインエディタ左メニュー「Studioロゴ」>「CMS」を選択して、ダッシュボードを表示します。
モデル「お知らせ」を「WORKS」に変更する
左メニューからモデル「お知らせ」を選択して、画面右上「モデル設定」をクリックします。
モデル名を「お知らせ」から「WORKS」に変更します。
モデル「お知らせカテゴリー」を「WORKSカテゴリー」に変更する
同じように「お知らせカテゴリー」も「WORKSカテゴリー」に変更します。
WORKSのプロパティ名を変更する
モデル「WORKS」のプロパティ名「お知らせカテゴリー」を「WORKSカテゴリー」に変更します。
変更前
変更後
WORKSカテゴリーを変更する
既存のカテゴリー名をダブルクリックして変更します。
既存のスラッグをダブルクリックして変更します。
必要に応じて新しくカテゴリーを追加します。
使用するカテゴリーを「公開中」にします。
WORKSを変更する
既存のアイテムを削除します。
新たにWORKSアイテムを作成して「公開中」にします。
CMSの一覧ページを変更する
デザインエディタの左メニュー「ページ」から「成果物一覧」を選択します。
下層ページ見出しを変更します。
新しいアイテムが表示されているか確認します。
リンクを変更する
左パネル「レイヤー」から「1件分のアイテム」を選択します。
右パネル「設定」>「リンク」から「成果物詳細」を選択します。
ライブプレビューで成果物詳細が表示されるか確認しましょう。
CMSの詳細ページを変更する
デザインエディタの左メニュー「ページ」から「成果物詳細」を選択します。
一覧に戻るボタンのテキストを変更する
「お知らせ一覧に戻る」を「WORKS一覧に戻る」に変更します。
リッチテキストボックスのデザインを調整する
リッチテキストボックスの「見出し」等のデザインを必要に応じて変更します。
以下の設定は「h2（見出し２）」の文字サイズを変更しています。
以下の設定は「h2（見出し２）」の上マージンを変更しています。
お問合せページを変更する
必要があればお問合せページを変更します。そのままでも問題ありません。
公開前チェック
「タブレット」「モバイル」の表示確認をしてデザインを調整しましょう。
タブレット
モバイル
スマホナビを変更する
スマホナビのメニュー名とリンクを修正し、ライブプレビューで確認します。
教科書のChapter7「サイトを公開する」を読んで、公開前の最終確認をしましょう。
