メインコンテンツにスキップ

Editor 5.0:エディタ内操作箇所の概要

Editor 5.0 Betaのエディタ内操作箇所を各パネル・機能ごとに解説します。左パネルや右パネルの役割、ナビゲーション、コンテンツ編集モード、ツールバーなど主要機能の場所や役割を紹介します。

今週アップデートされました

Editor 5.0 Beta:エディタ内操作箇所の概要

新しいエディタ内での操作箇所をご紹介します。

Editor 5.0 Betaの詳細やエディタの切り替え方法は、以下のヘルプページをご覧ください。

Editor 5.0の主な操作箇所

スクリーショット:ナンバリングされたナビゲーション

ナビゲーション

画面左のアイコンが並んだ操作セクションがナビゲーションです。各アイコンをクリックすると、それぞれの機能を持つパネルが開きます。

ナビゲーション内で可能な操作は以下の通りです。

  1. プロジェクト関連メニューを開く

  2. コメントモードへの切り替え

  3. サイト公開前のStudio設定ガイドを開く(アカウント設定で非表示にしている場合は表示されていません)

  4. ヘルプの検索や、不具合の報告を行う

左パネル

画面左側のパネルを総称して「左パネル」と呼びます。

追加パネル

各種ボックスやセクションなどの要素を追加します。パネル内には、以下3つのタブが配置されています。

  1. 基本

    各種ボックス、埋め込み、フォーム、フォームパーツ、インタラクションパーツ

  2. パーツ

    ボタンのデザインパーツ、テキストスタイル

  3. セクション

    各種セクションパーツ

Tips: [追加]アイコンをクリックせずホバーすると、ボックス、画像ボックス、テキストボックス、アイコンを素早く追加できるショートカットアイコンが表示されます。

ページパネル

編集するページを選択したり、ページの管理をします。

レイヤーパネル

ページ内の要素の構成(レイヤー)を確認します。

スタイルパネル

カラースタイルテキストスタイルの設定や管理をします。

アップロードパネル

接続パネル

デザインエディタ外のコンテンツ(StudioCMS、API連携、RSS連携)関連の設定をします。

設定済みのCMSコンテンツが紐付けられたCMSリストは、接続パネル内のCMSタブから追加が可能です。

コンポーネントパネル

コンポーネントとして登録した要素の確認ができます。

コメント

エディタ内にコメントを追加する際に使用します。右パネルで編集用のパネルが開きます。

コンテンツ編集モード

コンテンツ編集モードに切り替える際に使用します。右パネルで編集用のパネルが開きます。

サイト公開前のStudio設定ガイド

サイトの公開前に確認いただきたい設定のご案内を一覧で確認できるガイドです。アカウント設定から、表示/非表示の切り替えができます。

ヘルプ

チャットサポートへ、不具合やフィードバックを報告します。

注意:サポート窓口では、Editor 5.0 Betaの操作方法についての個別質問への有人回答は行なっておりません。

詳細は、Editor 5.0 Beta期間中のサポートポリシーをご確認ください。

右パネル

キャンバス上のいずれかの要素を選択すると、右パネルが開きます。

画面右上部に表示された開閉アイコンからも、右パネルの開け閉めが可能です。

右パネルは、選択した要素により表示されるパネルメニューが異なります。

デザイン編集パネル

画像、レイアウト、外観、トランスフォーム、アニメーション、選択色、リンク、タグなどのデザイン編集を行います。

表示されるデザインセクションは、選択した要素により異なります。

設定セクションが画面上で表示されていない場合には、パネル上でスクロールをしてください。

データ編集パネル

リストや動的ページなどに紐付くデータの設定をします。データ設定が不要な要素では、データ編集パネルは表示されません。

リストデータの編集や、StudioCMS内のデータとエディタ内の動的要素の紐付け設定を行います。

クイックバー

デザイン編集パネル内で行う設定の一部をパネルを開かずに素早く行うことができます。(編集可能な内容は要素によって異なります。)

キャンバス上の要素を選択すると表示されます。

ツールバー

レスポンシブ設定の編集や確認を行います。

エディタの画面下部に表示されています。


編集履歴

2025年9月22日:スタイルパネルに関する案内を追加 他

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