メインコンテンツにスキップ
すべてのコレクションはじめに
10. 【応用編】テンプレートの編集方法
10. 【応用編】テンプレートの編集方法

テンプレート編集のコツとテキストや画像などの編集手順をご紹介します。

Saika avatar
対応者:Saika
今週アップデートされました

【応用編】テンプレートの編集方法

この記事では、テンプレートのリンクやマップの変更方法などをご紹介します。テキストや画像の変更方法については、基本編で解説しています。

Tipsテンプレート編集のコツを先に確認して操作すると、よりスムーズに編集ができます。

リンクを変更する

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

リンクの変更手順

  1. リンクを変更・設定したいボックスを選択します。

  2. 画面右側の設定パネルを開きリンクを設定します。

リンクを変更する様子。

Tips:電話をかけるリンクを設定したい場合は、「tel:」を使います(例「tel:0312345678」)。詳しい手順は、電話をかけるリンクの設定方法をご覧ください。

フォントを変更する

Webサイトに使用されているフォントを一括で変更することができます。

変更手順

  1. 画面左側のスタイルパネルを開く。

  2. 変更したいフォントをクリックします。

  3. フォント名にカーソルを載せると表示される矢印をクリックします。

  4. 変更先となるフォントを選ぶと変更完了です。

フォントを変更する様子。

マップを変更する

Googleマップが埋め込まれている場合、マップの位置を変更することができます。

マップの変更方法

  1. Google Mapsを開きます。

  2. ピンを指定して「共有」→「地図を埋め込む」タブからコードをコピーします。

  3. エディタを開き、マップをクリックします。

  4. 画面右のパネル内のコードをコピーしたコードに差し替えると変更できます。

マップを変更する様子。

フォームを編集する

項目やデザインの変更

項目追加とデザイン変更手順

  1. エディタにてフォームを選択します。

  2. 画面左の追加パネルからフォームパーツを追加します。フォームは通常のボックスと同じようにデザインできます。

フォームを編集する様子。

メール通知先設定

フォームに回答があった際に通知するメールアドレスを設定することができます。

通知先の設定手順

  1. エディタでフォームを選択し、[通知先の設定・集計結果]をクリックします。

  2. [有効化する]をクリックします。

  3. フォーム設定画面が表示されるので、通知先のメールアドレスを登録します。

フォームの通知先を設定する様子。

記事を書き換える

記事のテキストや画像の書き換えはCMSダッシュボードで行います。記事ページのデザイン編集はエディタにて行います。

コンテンツの書き換え手順

  1. ページパネルを開き、チップの表示を確認します。

  2. 変更したい箇所を選択し、設定パネルを開きます。

  3. プロパティが紐づいているか確認します。プロパティが紐づいている場合は、CMSダッシュボードで編集します。

  4. CMSダッシュボードへ移動し、モデルを選択します。ページパネルに表示されてたチップがモデル名です。

  5. アイテムをクリックしテキストや画像を編集します。

  6. プレビューで内容を確認し、問題がなければ記事のステータスを公開にし、サイトも公開または更新します。

記事を書き換える様子。

一覧(リスト)にコンテンツを追加する

リストの種類によってコンテンツの追加方法が異なります。リストアイコンのみの表示は静的リストでアイコンの横にチップが表示されている場合はCMSリストです。それぞれでの追加方法をご紹介します。

リストアイコン(静的リスト)のみ表示される場合

リストアイコンが表示されている場合、レイヤー上でタイトルや画像の編集が可能です。

スクリーンショット:リストを編集する様子。

アイテム・プロパティの追加方法

  1. リストを選択します。

  2. レイヤーパネルを開き、[+]をクリックして追加します。リストをダブルクリックしてボックスを追加し[+リストデータに追加]をクリックして追加することもできます。

リストにアイテムやプロパティを追加する様子。

リストアイコン+チップが表示される場合(CMSリスト)

リストアイコンとチップが表示される場合、タイトルや画像の編集はCMSダッシュボードで行います

スクリーンショット:CMSリストを編集する様子。

CMSリストへのアイテム追加手順

  1. リストに紐づくモデル名を確認します。

  2. CMSダッシュボードを開きます。

  3. モデルを選択し、アイテムを追加します。

CMSリストへアイテムを追加する様子。

以上がテンプレート編集方法の応用編です。次の記事では、Studioを利用する上で役立つサポートコンテンツをまとめてご紹介します。


コレクション目次

こちらの回答で解決しましたか?