テンプレートを編集する

Studio.Storeのテンプレートには、ページのレイアウトや配色、フォントがあらかじめ設定され、組まれたデザインを元に最小限の操作でWebサイトを公開できます。
この記事では、テンプレートのデザインを活かしつつ、テンプレートに次のような編集をする方法を紹介します。

テンプレートを編集する前に、デザインエディタの基本的な操作を確認します。

Studioのページは、画像やテキストなどの「ボックス」を組み合わせて作られています。編集したいボックスを選択すると、右パネルにそのボックスの編集項目が表示されます。

Studioのレイアウトは、複数のボックスを親子ボックスの階層で重ねて作られています。そのため、目的のボックスをクリックしても、それを内包する親ボックスが選択される場合があります。

内側のボックスを選択できない場合には、次のどちらかの方法を試してください。

デザインエディタでの編集内容は、常に自動で保存されます。手動で保存する操作は不要です。

ただし、公開済みのサイトに反映するには、別途サイトの更新が必要です。

詳しくは編集内容を公開サイトに反映するを参照してください。

テンプレートの画像や文章を、自分のサイトの内容に差し替えます。

画像の差し替えは、アップロード＆置き換えパネルで行います。

参考記事：

参考記事：

テンプレートのスライドショーがカルーセルで作られている場合、画像は個々の画像ボックスではなく、カルーセルに接続したデータで管理されています。

データの管理場所は、カルーセル全体を選択して右パネルの[データ]タブを開くと確認できます。

参考記事：

テンプレートの色や文字のデザインは、スタイルを使ってまとめて変更するか、要素ごとに変更します。

スタイルは、テキストや色などのデザイン設定をあらかじめ登録し、プロジェクト内で繰り返し使い回せる機能の総称です。

テンプレートの色や文字のデザインは、「テキストスタイル」「カラースタイル」として登録されている場合があります。登録済みのスタイルを編集すると、そのスタイルを適用しているすべての要素に変更が反映されます。

登録済みのスタイルは、画面左のナビゲーションの[スタイル]アイコンから開くスタイルパネルで確認・編集できます。編集手順は、次の記事を参照してください。

特定のテキストだけ色やフォントを変えたい場合は、ボックスごとに変更します。

参考記事：

テンプレートにセクションを追加するには、既存のセクションを複製する方法と、セクションパーツを追加する方法があります。

テンプレートと同じデザインのセクションを足したい場合は、既存のセクションを複製し、内容を差し替えます。テンプレートのデザインに合ったセクションを追加できます。

参考記事： ボックスをコピー＆ペーストする

テンプレートにないレイアウトを足したい場合は、デザインが用意されたセクションパーツを追加します。

参考記事： セクション・セクションパーツ

ボタンのリンク先や、地図・フォームの内容を自分のサイト向けに設定します。

プロジェクト内のページやアンカー、外部サイトのURLをリンク先として設定できます。

参考記事：

Google Maps（Googleマップ）の位置情報を変更できます。もし選んだテンプレートに無い場合や、地図を増やしたい場合は追加が可能です。
詳しくはGoogle Mapsを埋め込むの記事を参照してください。

設置されたGoogle Mapsの位置情報は、以下の方法で変更できます。

フォームは複数のボックスで構成されており、通常のボックスと同様にデザインを編集できます。

参考記事：フォームの項目内容やデザインを変更する

フォームの回答を受け取るメールアドレスは、フォームダッシュボードで設定します。

参考記事：通知先メールアドレスを設定する

テンプレートから始めたプロジェクトでは、サイトのタイトル・説明文・ファビコンなどに、あらかじめ仮の情報が入っています。これらは検索結果などに表示されるため、実際のサイトに合わせて書き換えます。

テンプレートのお知らせや導入事例などのページには、Studio CMSが使われている場合があります。文章や画像は、デザインエディタではなくCMSダッシュボードで編集します。

Studio CMSが接続された記事ページのページタイプは「動的ページ」です。以下の手順で、対象のページのページタイプを確認してください。

書き換えたい文章や画像が、どのプロパティで管理されているかを確認してから、CMSダッシュボードで編集します。

コネクタ線がつながっていないボックスや、余白・文字サイズなどのデザインは、すべてのアイテムで共通です。これらはデザインエディタで直接編集します。

参考記事： Studio CMS：記事作成から公開までの流れ

デザインエディタでの編集内容は、ライブプレビューと公開サイトで反映されるタイミングが異なります。

公開済みのサイトを編集した場合は、エディタ右上の公開パネルでサイトを更新してください。この操作を行うまで、公開サイトへは反映されません。

テンプレートの編集中に、ボックスを選択すると紫色や水色でハイライトされ、そのままでは編集できない場合があります。ハイライトの色ごとに原因と対処法を説明します。

ボックス選択時に次の挙動がある場合、そのボックスはコンポーネント化されています。

コンポーネントは、ヘッダーやフッターなど共通して使う要素を管理するための機能です。 誤編集を防ぐため、選択しただけでは編集できません。編集可能な状態にするには、選択後にEnterキーを押すか、ダブルクリックをしてください。

コンポーネントごとに表示を変化させる方法など、詳細はコンポーネントの記事を参照してください。

ボックス選択時に次の挙動がある場合、そのボックスはリスト化されています。

リストは、デザインが共通で内容だけが異なる要素（カード形式の一覧など）をまとめて管理する機能です。

スクリーン上でリスト内のボックスを編集すると、すべてのアイテムに同じ変更が反映されます。アイテムごとの画像やテキストは、リストに接続されたデータ側で編集します。

どちらのリストかは、リストを選択して右パネルの[データ]を開くと確認できます。見分け方と、それぞれの編集方法は、リスト／カルーセルの種類を見分ける方法を参照してください。

参考記事：

テンプレートは、Studioユーザーであるテンプレートデザイナーが制作しています。テンプレートごとに使われている機能や構造が異なるため、テンプレート固有の仕様は、制作したデザイナーに直接問い合わせてください。