Editor X：レイヤーパネルを使用する | サポートセンター

Editor X：レイヤーパネルを使用する

読了時間：5分

Editor X は、代理店とフリーランサー向けの新しいプラットフォームである Wix Studio に移行します。Wix Studio について

エディタトップバーのレイヤーパネルからページのレイヤーを管理します。ページ上のすべてのパーツを表示し、パーツの選択、順序の変更、非表示などを行うことができます。

この記事では、下記の項目について説明します：

レイヤーパネルには、ページの最上部から最下部まで、階層内のすべてのセクションが表示されます。ページの上部にヘッダーがある場合、リストの上部に表示され、下部にフッターが表示されます。

ページ内の他のパーツ内にパーツをネストすると、HTML と CSS から派生した親子関係が作成されます。たとえば、コンテナ内のテキストパーツはその子になります。そのコンテナは、それを表示するセクションの子になります。

レイヤーパネルは、この親子関係のロジックに従って整理されているため、親パーツをクリックすると、子パーツが表示されます。ページにマスターパーツがある場合、緑色でハイライトされます。

注意：

セクション内のコンテナとパーツは Z オーダーで表示されます。つまり、あるパーツが別のパーツの上にある場合、リストの上位に表示されます。

レイヤーパネルには、選択したページのパーツが表示されます。別のページのレイヤーを表示するには、「ページ」ドロップダウンメニューから目的のページを選択する必要があります：

レイヤーパネルは、ページ上の特定のパーツにすばやく移動する便利な方法です。また、重複するパーツがあり、必要なパーツを見つけられない場合など、パーツを見つけるのに最適です。

レイヤーにマウスオーバーすると、ページ上でハイライト表示されるので、簡単に見つけることができます。レイヤーをクリックすると、エディタはそのパーツまで直接スクロールします。この時点でパネルを閉じても、選択内容は保存されます。

ヒント：

Shift キーを押しながら複数のパーツをクリックして選択します。

必要なレイヤーが見つかりましたか？このパネルから、レイヤーのコピー、パネル内でレイヤーを上下に移動、表示するページの選択などのアクションを実行できます。

次のいずれかの操作を行って、レイヤーを管理します：

重複するパーツを操作する場合：

キャンバス上で直接異なるレイヤー間を移動することができます。必要なパーツを含むパーツを右クリックし、「レイヤーを選択」をクリックしてアクセスします。

複数のセクション、コンテナ、パーツをページに追加すると、レイヤーパネルでそれらを区別するのが難しくなる場合があります。簡単に識別できるように、レイヤー名を変更することができます。該当するレイヤーをダブルクリックし、テキストボックスに新しい名前を付けます。

開発モードを使用している場合：

レイヤーパネルに要素 ID を表示して、コード内の要素を簡単に識別できます。「ID を表示」トグルを有効にして、プロパティパネルで定義された ID を表示します。

レイヤーパネルを使用すると、リストを上下にドラッグして、同じ親コンテナ内のパーツを簡単に並べ替えることができます。

パーツの順序を変更すると、Z オーダーが変更されます。たとえば、シェイプの上にテキストを表示する場合は、レイヤーパネルでシェイプの上にテキストが配置されている必要があります。

サイトのパーツは右クリックメニューから非表示にできます。ただし、パーツを再表示するには、レイヤーパネルから行う必要があります。

非表示のパーツには「非表示」アイコン

が表示されます。

ヒント：

パーツを小さいブレイクポイント（例：モバイル）に追加すると、大きいブレイクポイント（例：タブレット）では常に非表示になります。上記の手順に従って、パーツを他のブレイクポイントにも表示することができます。

この記事では下記を説明します：