GemPagesのレイヤーツリーを使用して非表示要素を選択する方法

GemPagesエディタで作業している際、レスポンシブデザインやレイアウト調整のために、セクション内の要素を非表示にすることがあります。非表示にした後、キャンバスから直接それらの要素を選択するのが難しくなる場合があります。

非表示の要素をより簡単に表示および選択するには、 レイヤーツリー 機能。レイヤーツリーを使用すると、セクション内のすべての要素（非表示の要素も含む）を表示し、構造化されたリストから直接選択できます。

Layer Treeはどのような場合に使うべきでしょうか？

レイヤーツリーは、特に次のような場合に役立ちます。

• キャンバス上の要素を直接クリックすることはできません
• 特定のデバイスでは要素が非表示になっています
• 複数の要素が重なり合っている
• 複雑なレイアウト内の要素を素早く見つける
• セクション内のすべての要素を確認する必要があります

キャンバス上をいちいちクリックする代わりに、レイヤーツリーを使えば、必要な要素をすばやく見つけることができます。

レイヤーツリーを使用して非表示の要素を選択する方法

レイヤーツリーを開き、非表示の要素を選択するには、以下の手順に従ってください。

ステップ1：検査したいセクションを右クリックします。

カーソルを、非表示の要素が含まれているセクションに移動してください。

その後：

• セクションを右クリックします
• コンテキストメニューが表示されます

探している隠し要素が含まれている正しいセクションをクリックしていることを確認してください。

ステップ2：[レイヤーツリーを開く]をクリックします

右クリックメニューから、 Open Layer Tree

このオプションをクリックすると、 レイヤーツリーパネル 表示されます。

このパネルには、選択したセクション内のすべての要素が構造化されたリストで表示されます。

ステップ3：セクション内のすべての要素を表示する

レイヤーツリーが開いたら：

• セクション内に含まれるすべての要素が表示されます
• 非表示の要素もリストに表示されます
• ネストされた要素を展開すると、その構造を確認できます。

これにより、キャンバス上に表示されていない要素をはるかに簡単に見つけることができます。

ステップ4：要素にカーソルを合わせて視覚的に識別します

どの要素がどれかを素早く識別するには：

• レイヤーツリー内の各要素にカーソルを合わせる
• 対応する要素は デザインワークスペースで強調表示されています

この視覚的なハイライト表示は、要素を選択する前にその正確な位置を確認するのに役立ちます。

ステップ5：要素をクリックして選択します

隠された要素を見つけたら：

• レイヤーツリー内でその名前をクリックします。
• 要素が選択されます
• その設定は「要素設定」パネルに表示されます。

必要に応じて、要素の編集、表示、移動、削除ができるようになりました。