Editor X:マスターセクションを使用する
読了時間:7分
Editor X は、代理店とフリーランサー向けの新しいプラットフォームである Wix Studio に移行します。Wix Studio について
マスターセクションを使用すると、コピー&ペーストすることなく、同じコンテンツを複数のページに簡単に表示することができます。任意のセクションをマスターとして設定し、追加するページを選択することができます。マスターセクションに加えた変更は、マスターセクションが表示されるすべてのサイトページに適用されます。
![Editor X でマスターヘッダーが表示されている様子。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/03/08/0fca6d65-281e-4d17-80c8-f4e06a884250/63ae6883-62e6-499b-aa0d-cc4aab579556.png)
ヒント:
マスターセクションにマウスオーバーすると、緑色でオーバーレイ表示されるため、すぐにマスターセクションかどうかを見分けることができます。
この記事では、下記の項目について説明します:
マスターセクションを設定する
サイトには、デフォルトですべてのページに表示されるマスターヘッダーとマスターフッターが設けられています。ただし、それら以外のセクションを複数のページに表示したい場合は、他のセクションをマスターとして設定することができます。
マスターセクションとして設定できるセクション
マスターセクションを設定する方法:
- Editor X で該当するセクションをクリックします。
- 「その他のアクション」アイコン
をクリックします。
- 「マスターセクションに設定」をクリックします。
- 該当するオプションを選択します:
- ヘッダー:ページの上部に表示されるセクション。
- セクション:ページの中央(ヘッダーとフッターの間)に表示されるセクション。
- フッター:ページの下部に表示されるセクション。
- マスターセクションの名前を入力します。
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/05/29/3174abca-31d1-404a-8ef6-b6ef0823239c/10ef5fe7-258c-43fc-8b3f-eb045693072f.png)
マスターヘッダーまたはマスターフッターを設定するオプションが表示されない場合
オプションがグレーで表示されている場合は、同じ位置に別のセクションがあることを意味します。他のセクションが表示されない場合は、「非表示」に設定されている可能性があります。
セクションをマスターヘッダーまたはマスターフッターとして設定するには、そのセクションをページの上部または下部に移動させます:
- Editor X 上部で「レイヤー」
をクリックします。
- マスターとして設定するセクション横の「その他のアクション」アイコン
をクリックします。
- オプションを選択します:
- 上に移動:マスターヘッダーとして設定する場合。
- 下に移動:マスターフッターとして設定する場合。
- 上または下に移動するオプションがグレーで表示されるまで、手順 2~3 を繰り返します。
- もう一度、セクションをマスターヘッダーまたはマスターフッターとして設定します。
マスターセクションを管理する
Editor X の上部で「マスターセクション」アイコン
をクリックすると、サイトのすべてのマスターセクションを表示することができます。このパネルから、マスターセクションの名前を変更したり、複製または削除したり、マスターセクションが表示されていないページにマスターセクションを追加したりすることができます。
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/9432a2ad-f01d-4a3d-ae53-370c37e15e62/2020/03/02/6cd72223-0c29-4cce-b8b2-afaf8537def2/17f5c756-7964-4cc7-9668-4123602b1726.jpg)
マスターセクションを管理する方法:
- Editor X の上部で「マスターセクション」
をクリックします。
- マスターセクションにマウスオーバーし、「その他のアクション」アイコン
をクリックします。
- 次に実行する内容を選択します:
- 編集:マスターセクションのコンテンツ、デザイン、レイアウトを編集します。
注意:変更を加えると、このマスターセクションが表示されるすべてのサイトページに適用されます。 - ページに追加:このマスターセクションを複数のサイトページに追加します。
- 名前を変更:マスターセクションの名前を変更します。
- 複製:マスターセクションのコピーを作成します。これは、既存のデザインを複製したい場合に便利です。
- 削除:不要なマスターセクションを削除します。
注意:これにより、サイトからこのマスターセクションが削除されます。
- 編集:マスターセクションのコンテンツ、デザイン、レイアウトを編集します。
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/05/29/750f2e49-6151-4596-9b3e-24ab6098bb94/d2f3fdb0-b6a3-4891-9c65-ef88d5df120b.png)
別のページにマスターセクションを表示する
セクションをマスターとして設定したら、それを他のサイトページに追加します。「マスターセクション」パネルでは、現在のページに表示されているセクションの横にチェックマーク
が表示されます。ここで、表示されていないセクションを確認して、ページにそのセクションを追加することができます。
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/02/22/3b7ed616-f606-4441-9649-1fac227a9490/2aa9c404-b7f3-4821-958e-0490ee526b20.png)
![「マスター」パネルのスクリーンショット](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/03/08/71ace65f-2c3a-415d-9594-fa473d5ae199/59c9fbd1-5067-410c-a8ad-6bf68fed0be4.png)
始める前に:![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/04/04/96939244-069f-4642-b18f-eb8136421150/e4b30bec-274a-4297-8259-731e8d1ab4e3.png)
「マスターセクション」パネルでセクションをクリックして、ページに追加する前にプレビューを確認します。
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/04/04/96939244-069f-4642-b18f-eb8136421150/e4b30bec-274a-4297-8259-731e8d1ab4e3.png)
別のページにマスターセクションを表示する方法:
- マスターセクションを追加したいページに移動します。
- Editor X の上部で「マスターセクション」
をクリックします。
- マスターセクションを追加する場所を選択します:
- 現在のページに追加する:該当するセクションにマウスオーバーし、「ページに追加」をクリックします。
- 複数のページに追加する:
- 該当するセクションにマウスオーバーし、「その他のアクション」アイコン
をクリックします。
- 「追加」をクリックします。
- 該当するページの横にあるチェックボックスを選択します。
- 「適用」をクリックします。
- 該当するセクションにマウスオーバーし、「その他のアクション」アイコン
- マスターセクションをページの適切な場所に移動させます:
- Editor X 上部で「レイヤー」
をクリックします。
- セクションを希望の場所にドラッグします。
- Editor X 上部で「レイヤー」
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/05/29/2c43d337-fc0b-41e4-bb1d-e201c85fa799/e39b75b6-33e5-41f3-a618-c1caa768129d.png)
ヒント:
マスターヘッダーまたはマスターフッターは、常にページの上部または下部に表示されます。ただし、その他のマスターセクションは、すべてのページで好きな場所に配置することができます。
特定のページからマスターセクションを切り離す
マスターセクションに変更を加えると、マスターセクションが表示されるすべてのサイトページにそれが適用されます。他のページに影響を与えず、特定のページのセクションにのみ変更を加えたい場合は、そのページからマスターセクションを切り離すことができます。
この場合、マスターセクション自体はサイトに残りますが、そのページとマスターセクションとの繋がりが解除され、ページ上の通常のセクションとして扱われるようになります。
特定のページからマスターセクションを切り離す方法:
- Editor X で該当するセクションをクリックします。
- 「その他のアクション」アイコン
をクリックします。
- 「マスターセクションから切り離す」をクリックします。
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/05/29/1d08ddc1-07ef-4e91-b0fd-bff687c41dcc/e2dc3038-ad8e-4fa7-8bb5-99b270a6c382.png)
マスターセクションを画面に固定する
マスターセクションを画面に固定すると、横向きのセクションであっても縦向きのセクションであっても、訪問者がページをスクロールした際に、常にそのセクションが同じ位置に表示されるようになります。これは、たとえばメニューやバナーを常に訪問者に表示させたい場合に最適です。
注意:
画面への固定は、ページの上部、下部、左端、または右端にあるマスターセクションにのみ適用することができます。
![マスターヘッダーが画面に固定され、ページをスクロールしても同じ位置に表示される様子を示した GIF。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2020/07/01/cc94174f-7d90-4759-979d-1c954c30e633/d3d6b3d7-d3b8-4efb-bb88-877f2d5f9439.gif)
お役に立ちましたか?
|