Web サイトサービス編集ツールの使い方－「ページ」タブ編

Houzz Pro の Web サイトサービスで編集作業をする際に、理解しておくべきツールバーの重要な機能があります。この記事では、左側のツールバーにある「ページ」タブについて説明します。全体的な編集ツールの概要については、こちらの記事をご覧ください。

Webサイトサービス編集ツールの「ページ」タブでは、ページの作成・複製・削除および基本的なページ設定の変更ができます。また、「ページ」タブ内には、ページ要素の表示順やセクション・コンテンツブロックの編集を管理する「レイヤー」パネルがあります。

Web サイトサービス編集ツールの左側にある「ページ」タブでは、Web サイトサービスで構築されたホームページ上のすべてのページにアクセスできます。

各ページの横には歯車（設定）のアイコンがあります。

その歯車のアイコンをクリックすると、新しい画面が表示され、以下の操作ができます。

新しいページを追加するには、「サイトのページ」のタイトルの横にある＋アイコンをクリックします。

すると、新しい画面が開き、追加するページの種類をテンプレートから選択できます。

新しいページのタイトルを入力すると、自動的にページ URL が設定されます。完了したら［保存］ボタンをクリックします。

新しページが追加され、編集可能な状態になります。

メモ：新しく追加したページをナビゲーションバーに表示させたい場合は、こちらの記事をご覧ください。 read How to Edit the Header on Your Houzz Website.

ページのコピー機能は、レイアウトを複製する際に便利です。既存ページのデザインとレイアウトを複製することで、同じデザインを別のページでも共有でき、一貫性のある見た目になります。

複製したいページについて、その横にあるコピーアイコン（四角形が重なった状態のアイコン）をクリックします。

新しいページのタイトルを入力し、必要に応じてページの URL を変更します。完了したら［保存］ボタンをクリックします。

すると、新しページが開き、編集できるようになります。

不要なページがある場合は、削除したいページの横にあるゴミ箱のアイコンをクリックします。

メモ：いったん削除されたページは復元できません。

ページレイヤーは透明なシートが重なっているような構造で、テキスト・画像・ボタンなど各要素はそれぞれ異なるレイヤーに配置されています。レイヤーの構造を理解して活用することで、サイトのレイアウトやデザインを緻密にコントロールできます。

ページレイヤーは、「ページ」タブ内のページ一覧の下に表示されます。ここには、ページ上のすべてのセクションやブロックが、上から下へ順番に階層順で表示されます。

要素の階層

各ページのコンテンツはセクションに分けられ、さらにそのセクションの中には入れ子になったコンテンツブロックがあります。

セクションをクリックすると、その中にあるコンテンツブロックが表示されます。以下の例では、セクションの中に「列」のレイアウトが含まれています。

グリッド、列、画像＋テキストブロック、カードなどのコンテンツブロックは、さらに内部にコンテンツブロックを含むことができます。ページレイヤー上でこれらの要素をクリックすると、それぞれの内部構造が表示されます。

深い階層に移動した場合でも、レイヤーパネルの上部にあるナビゲーションから上のレイヤーに戻ることができます。

ドラッグ＆ドロップによる要素の並び替え

ページレイヤーを使うことで、セクションやコンテンツブロックの順序変更が簡単にできます。移動したい要素について、左端の６点ドット（グリップツール）をクリックしたまま、ドラッグ＆ドロップで好きな場所へ移動できます。

レイヤーパネルでの要素の編集

レイヤーパネルで要素にマウスカーソルを合わせると、右側に小さな鉛筆のアイコンが表示されます。それをクリックすると、その要素を編集できます。

Web サイトサービス編集ツールの使い方 －「ページ」タブ編