エディター左側のレイヤーパネルでは、ページ内に配置されたボックスの階層構造や、リストデータなどが確認できます。

画面左下のレイヤーアイコンをクリックするか、ショートカットキー（Macでは ⌘ + 2、Windowsでは Ctrl + 2）でレイヤーパネルを開くことができます。

レイヤーとデータ

レイヤー

STUDIOでは「ボックスレイアウト」手法を採用しています。これにより、STUDIOで構築されるサイトは、「ボックスが積み上げられたり、入れ子になるような構造」になります。

レイヤーパネルでは、この構造の確認や、条件付きスタイルやレスポンシブの設定の有無などが確認できます。また、レイヤーパネルから要素の選択、コピー＆ペースト、削除なども行えます。

ボックスレイアウトについて詳しくは、以下のヘルプ記事をご覧ください。

各レイヤーは名称をダブルクリックして編集できます。この変更は公開サイトには反映されず、エディター上での要素管理に使用します。

条件付きスタイルに切り替えると、条件付きスタイルのカーソルとアニメーションが設定されているか確認できます。

設定内容は、エディター右上の条件付きスタイルから確認します。

レスポンシブに切り替えると、タブレットとモバイル時にレスポンシブ設定がされているか確認できます。

設定内容は、それぞれのブレイクポイントに切り替えて確認します。

レイヤーリスト上部に、選択した要素に関するデータが表示されます。

各データの右横にある青い丸をボックスに引っ張り繋げて、データの紐付けが可能です。

エディター上で管理するリストデータや、CMSダッシュボードで管理するCMSデータ、APIやRSS連携データなどが表示されます。

詳細については以下の記事をご覧ください。