テンプレートからはじめる
Studio Storeで配布・販売されているテンプレートから始めたプロジェクトは、色や配置などを自由に編集できます。テンプレートを活用すると、Webサイト制作に不慣れな方でも取り組みやすく、効率的にサイトを作成できます。
注意：テンプレートをダウンロードすると、そのテンプレートが適用された新しいプロジェクトが自動的に作成されます。既存のプロジェクトに後からテンプレートを適用することはできません。
Tips：テンプレート出品者に質問する
テンプレートは、Studioユーザーであるテンプレートデザイナーによって制作されているため、テンプレートごとに使用されている機能や構造が異なります。
各テンプレートに関する疑問がある場合は、以下の手順でテンプレートを制作したデザイナーに直接問い合わせてください。
＜テンプレートデザイナーへの問い合わせ方法＞
Studio Storeにアクセスします。
対象のテンプレートの詳細ページを開きます。
詳細ページ左上のテンプレートデザイナーアイコンをクリックします。
テンプレートデザイナー詳細ページ左上の[メッセージを送信]をクリックします。
メッセージを作成し、[デザイナーにメッセージを送信]をクリックします。
テンプレート編集時のポイント
サイトのデザインを編集したり内容を差し替えたりする際は、以下のポイントを意識すると作業がスムーズになります。
Point：エディタ上での編集内容は、常時自動保存されています。
(1)ボックスの種類を理解する
Studioには、用途に応じたさまざまなボックスがあり、 ボックスの種類によって右パネルで編集できる項目が異なります。
ボックスの例 | 説明 |
ボックス | 基本的なボックス。中に他のボックスを入れたり、複数のボックスを一つにまとめたりする |
画像を表示するボックス | |
テキストを表示するボックス | |
アイコンを表示するボックス | |
リッチテキストを表示するボックス | |
動画を表示するボックス | |
各種埋め込みボックス | 外部SNSやGoogleMap、HTML・CSS・JavaScriptコードを埋め込むボックス |
(2)ボックスの重なりを意識する
Studioのレイアウトは、複数のボックスを親子階層で重ねる「ボックスレイアウト」で構成されます。 そのため、特定のボックスをクリックしたつもりでも、実際にはそれを内包している親ボックスが選択される場合があります。
特定のボックスを選択しにくい場合は、次の方法を試してください。
レイヤーパネルから選択する
左パネルでレイヤーパネルを開き、選択したいボックス名をクリックします。
ダイレクト選択機能を使う
目的のボックスを直接選択する機能です。Macは⌘キー、WindowsはCtrlキーを押しながらボックスをクリックすると、内包されている子ボックスを直接選択できます。
(3)サイトのメタ情報を編集する
テンプレートから始めたプロジェクトには、サイトのメタ情報（タイトル・説明文・ファビコンなど）にあらかじめダミー情報が入力されています。これらの情報は検索結果などに表示されるため、デザインだけでなくメタ情報も必ず確認し、実際のサイトに合わせて編集してください。
(4)編集内容が反映されるタイミング
デザインエディタで行った編集内容は、ライブプレビューと公開サイトで反映されるタイミングが異なります。
デザインを編集する
ここでは、テンプレートの画像やテキストなどのコンテンツを差し替える主な操作を説明します。
Point：任意のボックスをクリックしても編集できず、以下に当てはまる場合は、後述の説明をご覧ください。
(1) 画像を差し替える
画像ボックスをダブルクリックすると、左パネルが自動で開き、同様に差し替えができます。
編集したいテキストのボックスが、紫や水色でハイライトされている場合には、後述の手順を参照してください。
参考記事：
(2) テキストを差し替える
テキストボックスをダブルクリックして、スクリーン上で直接テキストを編集することも可能です。
編集したいテキストのボックスが、紫や水色でハイライトされている場合には、後述の手順を参照してください。
参考記事：
注意：テキストを直接編集できない場合（リッチテキストボックス）
テキスト配置に使用するボックスには、テキストボックスとリッチテキストボックスの2種類があります。 リッチテキストボックスは、文章内の一部の文字だけに装飾を適用したい場合や、Studio CMSで作成した記事本文を紐付けて表示する場合に使用します。
リッチテキストボックスの見分け方：
テキストを表すボックスを選択したとき、右パネルの一番左のタブが［テキスト］ではなく［コンテンツ］の場合、そのボックスはリッチテキストボックスです。
リッチテキストボックスに、デザインエディタ外で管理するStudio CMSコンテンツの「本文」や「タイトル」が反映されている場合があります。この場合、編集方法が通常のテキストボックスとは異なります。
詳しくは、リッチテキストボックス のヘルプページをご覧ください。
(3) フォントを変更する
フォントを変更したいテキストボックス、またはリッチテキストボックスを選択します。
右パネルの[テキスト]タブを開きます。リッチテキストボックスの場合は[コンテンツ]タブを開きます。パネルが閉じている場合は、右パネルを開いてください。
[フォント]のトグルから、任意のフォントを選びます。
公開済みのサイトを編集していた場合は、サイトを更新します。 更新するまで、変更内容は反映されません。
編集したいテキストのボックスが、紫や水色でハイライトされている場合には、後述の手順を参照してください。
参考記事：
注意：フォントを変更できない場合
右パネルの[テキスト]タブにフォントの設定箇所が無い場合、そのテキストにはフォント設定を含むテキストスタイルが反映されている可能性があります。
右パネルの[テキスト]タブを開き、[テキストスタイル]名の右側にあるリンク解除アイコンをクリックして、テキストスタイルの反映を解除してください。
Tips：サイト全体で使用しているフォントは、一括変更機能を使うと効率的に変更できます。 参考：フォントを一括で変更する
(4) リンクを設定する
プロジェクト内のページやアンカー、外部サイトのURLをリンク先として設定できます。
編集したいテキストのボックスが、紫や水色でハイライトされている場合には、後述の手順を参照してください。
参考記事：
(5) Googleマップを追加・変更する
Googleマップの位置情報を変更できます。もし選んだテンプレートに無い場合や、地図を増やしたい場合は追加することできます。
詳しくはGoogle Mapsを埋め込むの記事を参照してください。
Google Mapsを追加する
画面左のナビゲーションから追加パネルを開きます。
[基本]タブを開きます。
[埋め込み]ボックス群にある[Map]の埋め込みボックスを選択して設置します。
Google Mapsの情報を変更する
設置されたGoogle Mapの位置情報は、以下の方法で変更できます。
(6) フォームの項目追加・メール設定をする
フォームは複数のボックスで構成されており、通常のボックスと同様にデザインを編集できます。
フォームの質問項目を追加する方法
エディタでフォームを選択します。
画面左で[追加]パネルを開きます。
[基本]タブの[フォームパーツ]から追加したいフォームパーツを選択します。
選択中のフォームの直下に追加されるので、ドラッグしてフォーム内の任意の位置に移動します。
公開済みのサイトを編集していた場合は、サイトを更新します。 更新するまで、変更内容は反映されません。
編集したいテキストのボックスが、紫や水色でハイライトされている場合には、後述の手順を参照してください。
参考記事：
フォーム回答のメール通知先を設定する方法
エディタでフォームを選択します。
右パネルの[フォーム]タブを選択します。パネルが閉じている場合は、右パネルを開いてください。
[通知先の設定・集計結果]をクリックすると、フォームダッシュボードへ遷移します。
画面右上の[設定]をクリックします。
[フォーム設定]画面の左タブで[全体設定]または[個別設定]の任意のフォームを選び、通知先メールアドレスを登録します。
フォームダッシュボードからデザインエディタに戻るときは、画面右上の[デザインエディタ]をクリックします。
編集したいテキストのボックスが、紫や水色でハイライトされている場合には、後述の手順を参照してください。
参考記事：
CMS記事を書き換える
テンプレートには、Studio CMS機能が使用されている場合があります。（主な用途：お知らせ・ニュース、導入事例、記事一覧など）
ここでは、Studio CMSを活用した記事ページの仕組みや、編集方法の概要を説明します。
Point: Studio CMSとは
Studio CMSは、Studio上で利用できるCMS（Content Management System）機能です。
仕組みや概要については、以下のヘルプ記事をご覧ください。
CMS記事のしくみ
ニュース記事やお知らせ、導入事例などの投稿ページで、画像やテキストなどをエディタ上で編集できない場合は、そのページが動的ページである可能性があります。 動的ページでは、Studio CMSを使って記事を一元管理することで、複数ページの更新や運用を効率的に行えます。
CMS記事のデザイン管理とコンテンツの管理
| 記事のデザイン | 記事のコンテンツ |
具体例 | ボックスの配置、テキストのサイズ、余白など | 記事タイトルの文言、本文の内容、記事ごとのカバー画像など |
CMS記事の特徴 | どの記事でも共通 | 記事ごとに異なる |
管理場所・編集画面 |
CMS記事を編集するには、以下の手順をお試しください。
手順 (1) CMSが紐づいた動的ページかを確認する
CMS記事ページは、エディタ上で動的ページというページタイプを使用しています。
コンテンツを表示するページのページタイプが、CMSと連携した「動的ページ」かどうかを最初に確認します。
ページパネルを開き、確認対象の記事ページを選びます。
何もボックスを選択していない状態で、右パネルを開きます。
[ページ]タブを開きます。
ページの[タイプ]が動的ページになっていて、[CMS Model]に何かしらのモデルが表示されている場合、このページはCMSが紐づいた動的ページです。
手順 (2) CMSプロパティが紐づく要素を確認する
このページ上で、どのボックスが「共通デザイン」としてエディタ上で編集する要素で、どのボックスが「記事コンテンツ」（CMSプロパティ）を反映する要素かを確認します。
動的ページ上で任意のボックスを選択し、右パネルを開きます。パネルが閉じている場合は、右パネルを開いてください。
右パネルで[データ]タブを開きます。
[データ]タブ内の各プロパティ（Title、Coverなど）にカーソルを当てると、青いコネクタ線が表示されます。
コネクタ線がつながるボックスが、記事ごとのコンテンツ（記事タイトル、本文、カバー画像など）を反映している要素です。
コネクタ線がつながる要素はCMSダッシュボードで内容を編集し、コネクタ線がつながっていない要素はデザインエディタ上で直接編集します。
手順 (3) 記事コンテンツを編集する
記事ごとのテキストや画像などのコンテンツは、CMSダッシュボードで編集します。
公開後のサイト全体への反映には、別途公開パネルからサイトを更新する必要があります。サイトを公開する操作については、サイトを更新を参照してください。
よくあるつまずき
テンプレート編集時に、ボックスが紫色や水色でハイライトされて編集できない場合について解説します。
(1)ボックスが紫色でカバーされる場合（コンポーネント）
ボックス選択時に次の挙動がある場合、そのボックスはコンポーネント化されています。
ボックスの枠線が紫色
ボックス全体が紫色でハイライトされる
選択ボックスの左上や、レイヤーパネルのレイヤー名の先頭に、コンポーネントアイコン
/
が表示される
コンポーネントは、ヘッダーやフッターなど共通して使う要素を管理するための機能です。 誤編集を防ぐため、選択しただけでは編集できません。編集可能な状態にするには、選択後にEnterキーを押すか、ダブルクリックをしてください。
注意：1つのコンポーネントを編集すると、他のページ上を含む全てのコンポーネントに変更が反映されます。
コンポーネントごとに表示を変化させる方法など、詳細はコンポーネントの記事を参照してください。
(2)ボックスが水色でカバーされる場合（リスト）
ボックス選択時に次の挙動がある場合、そのボックスはリスト化されています。
ボックスの枠線が水色
ボックス全体が水色でハイライトされる
選択ボックスの左上やレイヤーパネル名の先頭に、リストアイコン
/
や、カルーセルアイコン
が表示される
リストは、共通した構造やレイアウトを持つボックスをまとめて管理するための機能です。例えば一覧になったカード形式のように、デザインは共通で内容だけが異なる要素の一覧表示に利用します。
静的リストか動的リストかを判別する
リストには静的リストと動的リストの2種類があり、それぞれ編集方法が異なります。動的リストには、Studio CMSやRSSなど、外部データが反映されています。
以下の方法で、どちらのリストかを判別してください。
リストを選択します。
右パネルの[データ]タブを開きます。右パネルが閉じている場合は、右パネルを開いてください。
リストの種類を判別します。
静的リストの場合
右パネルの[リスト]という文字の右に[データを紐付け]のチップが表示されます。
[データを紐付け]というチップが表示されます。外部データが紐づいていない状態だと判断できます。
静的リストでは、テキストや画像の変更をスクリーン上ではなく、右パネルの[データ]タブにあるプロパティ管理表から行います。詳細はリストの記事を確認してください。
動的リストの場合
右パネルの[リスト]という文字の右に連携先のデータ名が表示されている場合、そのデータと連携された動的リストだと判別できます。
動的リストの参照データがStudio CMSである場合 - 連携データ名にはCMSモデル名が表示されます。テキストや画像の差し替えは、エディタ上ではなくCMSダッシュボードで行います。詳細は動的リストの記事を参照してください。
