Wix Studio エディタ：シェイプ区切りを追加・カスタマイズする
6分
シェイプ区切りを使用すると、セクション間に魅力的でスタイリッシュな境界を作り出すことができます。これにより、セクション上下の境界部分を、単なる直線ではなく「楕円」や「波」の形に見えるようにしたり、「植物」のパターンで装飾したりすることができます。セクション上下に追加したシェイプ区切りはデザインを細かくカスタマイズできるほか、自身でアップロードしたファイルをシェイプ区切りとして使用することもできます。
シェイプ区切りを追加する
まず、該当するセクションにシェイプ区切りを追加します。シェイプ区切りは、セクションの上部、下部、またはその両方に追加することができます。
メディアマネージャーには、シェイプ区切りの追加のデザインが豊富に用意されています。また、独自の SVG ファイルをアップロードして、それをシェイプ区切りとして使用することもできます。
独自のファイルをアップロードする場合：
アップロードできるファイルサイズと縦横比については、以下の「よくある質問」をご覧ください。
セクションにシェイプ区切りを追加する方法：
- エディタに移動します。
- 該当するセクションを選択します。
- 「シェイプ区切り」アイコン
をクリックします。 - 「上」または「下」タブをクリックして、区切りを追加する場所を選択します。
- 追加する区切りを選択します：
- おすすめのデザイン：パネルで利用可能なスタイルのいずれかをクリックします。
- Wix が提供するその他のデザイン：
- 「＋もっと見る」をクリックします。
- （メディアマネージャーで）「Wix 画像・動画素材」タブからデザインを選択します。
- 「ファイルを選択」をクリックして適用します。
- 独自のシェイプ区切り：
- 「＋もっと見る」をクリックします。
- （メディアマネージャーで）「サイトファイル」タブでシェイプを選択するか、新しいシェイプをアップロードします。
- 「ファイルを選択」をクリックして適用します。
ヒント：
メディアマネージャーからシェイプを選択すると、特定のセクションの「シェイプ区切り」パネルで「もっと見る」として表示されます。メディアマネージャーから別のシェイプを選択したい場合は、「もっと見る」の上の「変更」アイコン 
をクリックしてください。
をクリックしてください。プリセットシェイプ区切りをデザインする
シェイプ区切りを追加したら、好みに合わせてデザインを変更します。不透明度、色、高さ、およびレイヤーエフェクトやそのフェード効果などを調整して、希望通りの見た目にカスタマイズすることができます。
注意：
利用可能なオプションは、選択したシェイプ区切りによって異なります。
プリセットシェイプ区切りのデザインをカスタマイズする方法：
- エディタに移動します。
- 該当するセクションを選択します。
- 「シェイプ区切り」アイコン をクリックします。
- 「上」または「下」タブをクリックして、デザインする区切りにアクセスします。
- 下部で「デザインを編集」をクリックします。
- シェイプ区切りの外観を調整する方法を選択します：
- 不透明度・色：シェイプ区切りの色を選択し、セクションでの視認性を調整します。
- 高さ：セクションでのシェイプ区切りの高さを設定します。
- 横の位置：シェイプ区切りの位置を変更し、左または右に移動させます。
- レイヤーエフェクト：トグルを有効にしてシェイプ区切りにフェード効果を追加し、ドロップダウンからエフェクトの方向を選択します：
- 中央揃え：エフェクトは区切り全体に表示されます。
- 上にフェード：区切りの上に行くほどエフェクトが弱まります。
- 下にフェード：区切りの下に行くほどエフェクトが弱まります。
- 切り抜き反転：区切りのシェイプを反転させます（縦方向）。
- ミラー反転：セクションで区切り線を水平に反転させます。
- リピート回数：パターンが区切りを横切って繰り返される回数を設定します。
カスタムシェイプ区切りをデザインする
独自のシェイプ区切りをアップロードする際、さまざまなオプションを使用してさらにカスタマイズすることができます。区切りの色、表示設定、スケーリングなどの設定を調整して、ページに独自の構造とデザインを作成します。
注意：
利用できるオプションは、アップロードするファイルによって異なります。詳細については、以下の「よくある質問」をご覧ください。
独自のシェイプ区切りのデザインをカスタマイズする方法：
- エディタに移動します。
- 該当するセクションを選択します。
- 「シェイプ区切り」アイコン をクリックします。
- 「上」または「下」タブをクリックして、デザインする区切りにアクセスします。
- 下部で「デザインを編集」をクリックします。
- シェイプ区切りの外観を調整する方法を選択します：
- 不透明度・色：シェイプ区切りの色を選択し、セクションでの視認性を調整します。
- 区切りのスケーリング：シェイプ区切りのパターンをセクション全体に引き延ばすか、繰り返して表示させるかを選択します。
- 高さ：セクションでのシェイプ区切りの高さを設定します。
- 横の位置：セクションに表示されるシェイプ区切りの中心位置を設定します。
- ミラー反転：シェイプ区切りを水平に反転させます。
よくある質問
シェイプ区切りに関する詳細については、以下の質問をクリックしてください。
シェイプ区切りはレスポンシブですか？
どのような種類のカスタムシェイプ区切りをアップロードできますか？
アップロードした独自のファイルのデザインをカスタマイズすることはできますか？
セクションからシェイプ区切りを削除するにはどうすればよいですか？
