アウトライナーでドキュメント構造を操作する

アウトライナーでは、ドキュメント内の要素がツリービューで表示されます。[ウィンドウ] メニューで [アウトライナー] パネルに切り替えることができます。

アウトライナー

整理

複数ページの広告や HTML ドキュメントの場合、アウトライナーでドキュメント内の各ページにある要素を整理することができます。グループ編集モードでは、グループ内の要素のみが表示されます。

デフォルトでは、アウトライナーには詳細モードのタイムライン内のレイヤと同じ順序で要素が一覧表示されます。デザインビューの設定で、要素の表示順序を DOM 順に切り替えることができます。

要素を展開する、または折りたたむ: アウトライナー内の要素の横にある矢印をクリックして、ネスト要素の表示と非表示を切り替えることができます。

すべてのネスト要素を展開する、または折りたたむ: 要素の横にある矢印をダブルクリックすると、その要素の下に表示されるすべての要素を展開したり折りたたんだりできます。

選択

選択した内容は、ステージ、詳細モードのタイムライン、アウトライナーに反映されます。つまり、ある要素をこのいずれかで選択すると、他の 2 つでもその要素が選択されます。Google Web Designer は必要に応じて、ネスト要素内の別のレベルまたは別のページに切り替えます。現在の親要素のラベルは黄色で表示されます。

要素の選択: 選択する要素をクリックします。

複数の要素の選択: 同じ親要素を共有している複数の要素を選択できます。

  • Ctrl キー(Windows)または command キー(Mac)を押しながら、追加で選択する要素をクリックします。
  • 要素の範囲を選択するには、最初の要素をクリックして、Shift キーを押しながら最後の要素をクリックします。

要素の選択解除: Ctrl キー(Windows)または command キー(Mac)を押しながら、選択を解除する要素をクリックします。

要素内への移動: 要素をダブルクリックして、この内部に移動すると、これを親要素にすることができます。既存の子要素を編集したり、親要素の下に新しい要素をネストしたりすることができます。

要素のタイプとステータス

アウトライナーでは、各要素のタイプを示すアイコンが、要素 ID、名前、テキスト コンテンツ(可能な場合)とともに表示されます。

非表示になっている要素とロックされている要素にはステータス アイコンが表示されます。このアイコンをクリックすると、要素の非表示またはロックを解除できます。また、ガイドレイヤにもアイコンが表示され、このアイコンをクリックしてガイドレイヤを通常の要素に戻すこともできます。アウトライナーには、特定の要素のステータス アイコンが 1 つのみ表示されます。表示の優先順位は以下のとおりです。

各要素タイプのアイコン

ページ

メインページ
ページ

要素

グループ
div
画像
Icon for amp-img element amp-img(AMP ドキュメント内の画像)
動画要素です
テキスト コンテナ
番号付きリスト
箇条書き
リンク

図形

パス(ペンツールで描画)
長方形
楕円

コンポーネント

360 度ギャラリー コンポーネント
カルーセル ギャラリー コンポーネント
ギャラリー ナビゲーション コンポーネント
スワイプ ギャラリー コンポーネント
翻訳ギャラリー コンポーネント
amp-carousel コンポーネント
「カレンダーに追加」コンポーネント
ジェスチャー コンポーネント
画像ボタン コンポーネント
パララックス コンポーネント
Tap Area component icon タップ領域コンポーネント
タップして通話 / テキスト送信コンポーネント
地図コンポーネント
ストリートビュー コンポーネント
音声コンポーネント
動画コンポーネント
YouTube コンポーネント
Date Swap component icon Date Swap コンポーネント
iFrame コンポーネント
パーティクルのエフェクト コンポーネント
スプライト シート コンポーネント
星評価コンポーネント
ボタン コンポーネント
チェックボックス コンポーネント
プルダウン コンポーネント
ラベル コンポーネント
数値入力コンポーネント
ラジオボタン コンポーネント
スライダー コンポーネント
テキスト フィールド コンポーネント

ステータス アイコン

Icon for a hidden element 非表示
Icon for a locked element ロック済み
ガイドレイヤ

フィルタリング

アウトライナーに表示される要素のリストはフィルタリングできます。要素がフィルタに一致する場合、親要素と他の祖先要素も表示されるため、一致する要素がドキュメント構造内のどこにあるかを確認できます。

要素をフィルタリングするには、[アウトライナー] パネルの上部にある虫メガネアイコン Search icon の横のスペースをクリックし、要素 ID、名前のプロパティ値、タグ名、グループ名の一部を入力します。テキスト コンテンツによってはテキスト要素も一致します。

要素タイプのフィルタを使用することもできます。

要素タイプのフィルタ

アウトライナーには、テキストや図形などの特定の要素タイプのみを表示するフィルタが含まれています。パネルの上部で、アウトライナーに表示する要素タイプのアイコンをクリックします。要素タイプの複数のフィルタがアクティブになっている場合は、アクティブなフィルタのいずれかに一致する要素が表示されます。

要素タイプのフィルタのアイコン

画像と動画を表示
icon for a custom element in the Outliner コンポーネントを表示
テキストを表示
図形を表示
この情報は役に立ちましたか?
改善できる点がありましたらお聞かせください。