Wix ヘルプセンター
    ホーム
  1. サイトの作成
  2. Editor X
  3. Editor X でのデザイン
    4. Editor X：シェイプ区切りを追加・カスタマイズする

Editor X：シェイプ区切りを追加・カスタマイズする

読了時間：5分
Editor X は、代理店とフリーランサー向けの新しいプラットフォームである Wix Studio に移行します。Wix Studio について
シェイプ区切りを使用すると、コンテンツを分割するセクションの上下を、スタイリッシュなデザインに変更することができます。これにより、セクション上下の境界部分を、単なる直線ではなく「楕円」や「波」の形に見えるようにしたり、「植物」のパターンで装飾したりすることができます。セクション上下に追加したシェイプ区切りはデザインを細かくカスタマイズできるほか、自身でアップロードしたファイルをシェイプ区切りとして使用することもできます。
セクションの上下にシェイプ区切りを追加したサイトの一例。
この記事では、下記の項目について説明します：

シェイプ区切りを追加する

まず、セクションにシェイプ区切りを追加します。シェイプ区切りは、セクションの上部、下部、またはその両方に追加することができます。
メディアマネージャーには、シェイプ区切りの追加のデザインが豊富に用意されています。また、独自の SVG ファイルをアップロードして、それをシェイプ区切りとして使用することもできます。
独自のファイルをアップロードする場合：
アップロードできるファイルサイズと縦横比については、以下の「よくある質問」をご覧ください。

セクションにシェイプ区切りを追加する方法：

  1. エディタ内でセクションをクリックします。
  2. 「シェイプ区切り」アイコン  をクリックします。
  3. 「上」または「下」タブをクリックして、区切りを追加する場所を選択します。
  4. 追加する区切りを選択します：
    • おすすめのデザイン：パネルで利用可能なスタイルのいずれかをクリックします。
    • Wix が提供するその他のデザイン：
      1. 「＋もっと見る」をクリックします。
      2. （メディアマネージャーで）「Wix 画像・動画素材」タブからデザインを選択します。
      3. 「ファイルを選択」をクリックして適用します。
    • 独自のシェイプ区切り：
      1. 「＋もっと見る」をクリックします。
      2. （メディアマネージャーで）「サイトファイル」タブから使用するシェイプを選択するか、新しいシェイプをアップロードします。
      3. 「ファイルを選択」をクリックして適用します。

シェイプ区切りをカスタマイズする

シェイプ区切りを追加したら、好みに合わせてデザインを変更します。不透明度、色、高さ、およびレイヤーエフェクトやそのフェード効果などを調整して、希望通りの見た目にカスタマイズすることができます。
注意：
利用可能なオプションは、選択したシェイプ区切りによって異なります。

シェイプ区切りをカスタマイズする方法：

  1. エディタ内でセクションをクリックします。
  2. 「シェイプ区切り」アイコン  をクリックします。
  3. 「上」または「下」タブをクリックして、デザインする区切りにアクセスします。
  4. 下部で「デザインをカスタマイズ」をクリックします。
  5. シェイプ区切りの外観を調整する方法を選択します：
    • 不透明度・色：シェイプ区切りの色を選択し、セクションでの視認性を調整します。
    • 高さ：セクションでのシェイプ区切りの高さを設定します。
    • 横の位置：シェイプ区切りの位置を変更し、左または右に移動させます。
    • レイヤーエフェクト：トグルを有効にしてシェイプ区切りにフェード効果を追加し、ドロップダウンからエフェクトの方向を選択します：
      • 中央揃え：エフェクトは区切り全体に表示されます。
      • 上にフェード：区切りの上に行くほどエフェクトが弱まります。
      • 下にフェード：区切りの下に行くほどエフェクトが弱まります。
    • 切り抜き反転：区切りのシェイプを反転させます（縦方向）。
    • ミラー反転：シェイプ区切りを水平に反転させます。
    • リピート回数：パターンが区切りを横切って繰り返される回数を設定します。

カスタムシェイプ区切りをデザインする

独自のシェイプ区切りをアップロードする際、さまざまなオプションを使用してさらにカスタマイズすることができます。区切りの色、表示設定、スケーリングなどの設定を調整して、ページに独自の構造とデザインを作成します。
注意：
利用できるオプションは、アップロードするファイルによって異なります。詳細については、以下の「よくある質問」をご覧ください。

独自のシェイプ区切りのデザインをカスタマイズする方法：

  1. エディタ内でセクションをクリックします。
  2. 「シェイプ区切り」アイコン  をクリックします。
  3. 「上」または「下」タブをクリックして、デザインする区切りにアクセスします。
  4. 下部で「デザインをカスタマイズ」をクリックします。
  5. シェイプ区切りの外観を調整する方法を選択します：
    • 不透明度・色：シェイプ区切りの色を選択し、セクションでの視認性を調整します。
    • 区切りのスケーリング：シェイプ区切りのパターンをセクション全体に引き延ばすか、繰り返して表示させるかを選択します。
    • 高さ：セクションでのシェイプ区切りの高さを設定します。
    • 横の位置：セクションに表示されるシェイプ区切りの中心位置を設定します。
    • ミラー反転：シェイプ区切りを水平に反転させます。

よくある質問

シェイプ区切りに関する詳細については、以下の質問をクリックしてください。

お役に立ちましたか？

|
この記事では下記を説明します：
  • シェイプ区切りを追加する
  • シェイプ区切りをカスタマイズする
  • カスタムシェイプ区切りをデザインする
  • よくある質問