レイヤーパネル

レイヤーパネルには、現在のページのすべての要素が階層ツリーで表示されます。左サイドバーのレイヤーをクリックすると開きます。小さい要素や、ほかの要素の後ろに隠れた要素、深い階層にある要素を簡単に選択できます。

レイヤーを開くと、キャンバスは編集に切り替わります。ツリーは編集中のページをもとに作成されるためです。コードエディターでは、このパネルは使えません。

要素の検索と選択

各行には要素の種類、またはコンポーネント名が表示されます。行の横にある矢印をクリックすると、展開または折りたたみができます。

• 行をクリックすると、その要素が選択されます。キャンバスがその位置までスクロールし、編集パネルに設定が表示されます。
• キャンバスで要素を選択すると、ツリーがその要素の行まで展開されます。
• 行にカーソルを合わせると、キャンバス上の要素が強調表示されます。キャンバス上の要素にカーソルを合わせると、対応する行が枠線で囲まれます。
• パネルの何もない場所をクリックすると、選択が解除されます。

キーボードでもツリー内を移動できます。Up と Down で行を移動し、Right で行を展開、Left で折りたたみ、Enter または Space で選択します。Delete、⌘C、⌘V、⌘X、⌘D、⌘Z（Windows では Ctrl）などのショートカットは、選択した要素に適用されます。⌘K / Ctrl+K を押すと、行の下に AI で編集バーが開きます。

要素の並べ替え

行を上下にドラッグすると、要素の順序を変更できます。同じ親要素の中にある、同じ階層の行の間で移動できます。ドロップすると、すぐにキャンバスが更新されます。

WebTwizz がコード内で要素を見つけられない場合、その行はドラッグできません。その行にカーソルを合わせると、理由が表示されます。

右クリックメニュー

行を右クリックすると、キャンバスと同じメニューが表示されます。

項目	ショートカット	機能
編集	⌘E	要素を選択し、編集パネルを開きます
コピー、貼り付け、切り取り	⌘C, ⌘V, ⌘X	要素をコピー、貼り付け、切り取りします
複製	⌘D	要素のコピーを作成します
削除	⌫	要素を削除します
スタイルをコピー、スタイルを貼り付け	⌘⌥C, ⌘⌥V	要素のスタイルをコピーし、別の要素に貼り付けます
コンポーネントに変換	⌘⇧K	再利用できるコンポーネントに変換します
AI で編集	⌘K	その要素の AI で編集バーを開きます

Windows では、⌘ の代わりに Ctrl、⌥ の代わりに Alt を使います。

AI の作業中

AI がサイトを編集している間は、行をドラッグできず、右クリックメニューのすべての項目がグレー表示になります。AI の作業が終わると、すべての操作が再び使えるようになります。