Editor X:セクションを追加・管理する
読了時間:4分
Editor X は、代理店とフリーランサー向けの新しいプラットフォームである Wix Studio に移行します。Wix Studio について
ページセクションは、サイトの作業用ブロックです。関連するコンテンツをまとめて表示することで、整頓された、プロフェッショナルでしっかりした構造を持つサイトの印象を与えることができます。
セクションは、ブラウザの全幅に引き延ばされ、お好みの高さに設定することができます。
この記事では、以下の項目について説明します:
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/9432a2ad-f01d-4a3d-ae53-370c37e15e62/2020/02/11/d24ef5a3-52da-4271-bd38-1dd72c4783da/a48af89d-cab3-4e23-83f3-00863bd899eb.jpg)
ページセクションを追加する
各ページに必要なだけセクションを追加します。白紙のセクション、もしくはあらかじめデザイン済みのセクションを追加することができます。
白紙のセクションを追加する
白紙のセクションを追加し、自由ににデザインしましょう。ページのセクションをクリックし、セクションの垂直方向の端にある「追加」アイコン
をクリックします。
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/09/10/385be13a-c9d3-4a5a-a48b-96e0f3b1c03b/0811318d-b7a1-495f-a313-3438c7b73890.png)
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2022/09/27/181438f6-fc88-4e99-b762-1c3eb1721b81/8c7d6162-3a50-461d-8029-0834f78c08c3.png)
ヒント:
セクションの背景を色や画像、動画でカスタマイズしましょう。詳細はこちら
あらかじめデザインされたセクションを追加する
サイトのカラーパレットに合うデザインで、レスポンシブなセクションが多数用意されています。お好きなセクションを選択して、自身のスタイルに合わせてカスタマイズしてください。
セクションは、どのようなビューポイントでも見栄えするよう作られているため、異なるブレイクポイントをデザインする必要はありません。
- エディタ上部で「追加」
をクリックします。
- 「構成」をクリックします。
- お好みのセクションを探しましょう。
- デザイン済みのセクションをページにドラッグします。
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2022/09/27/c7dff2f6-8b1c-418b-9ed3-174857d8a9b2/7c0e610e-3c24-4225-954b-12b33aa1a638.png)
セクションを複製したい場合
統一感のあるサイトに仕上げるには、既存のセクションを複製して必要な変化を加えると簡易的な作業で済みます。セクションを右クリックして「複製」をクリックしてください。
ページセクションにグリッドを適用する
Editor X のセクションには、単一のセル(1x1 レイアウト)を持つレスポンシブな組み込み CSS グリッドが付属しています。より多くの行と列を含むグリッドを適用して、セクション内の要素を整理することができます。
セクションにグリッドを適用する方法:
- Editor X でセクションをクリックします。
- 次のいずれかの方法でグリッドを変更します:
- プリセットグリッドを選択する:「1x1」ドロップダウンをクリックし、別のグリッドを選択します(例: 2x2、2x1)。
- ページ上でグリッドをカスタマイズする:
- 「キャンバス上でグリッドを編集」アイコン
をクリックします。
- グリッドの左端または上端からドラッグして、新しいグリッド線を追加します。
- 「キャンバス上でグリッドを編集」アイコン
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2022/08/03/9620fc0e-4242-4558-a21e-b7a63689d4c9/c1068598-691d-4908-a860-d6ad45b38ab8.gif)
ページセクションを削除する
サイトのセクションはいつでも削除することができます。
セクションを削除する方法:
- 該当するページセクションの「その他のアクション」アイコンをクリックします。
- 「削除」をクリックします。
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2022/09/27/d1810fdb-b453-4b28-8ce5-271fe197413a/ba0d8d08-8bb0-4aff-8fd6-9500e27a1bbc.png)
一時的にセクションを非表示にしたい場合
「非表示」をクリックして、後で使用するためにセクションを非表示にします。レイアウトパネル内で非表示にしたセクションを確認することができ、そこから再度表示することも可能です。詳細はこちら
ページセクションを並べ替える
サイトの作成中に、コンテンツの構造・構成を変更すべきと判断した場合、セクションの便利な並べ替え機能をいつでも利用することができます。
ページセクションを並べ替える方法:
- ページセクションの「その他のアクション」アイコンをクリックします。
- 「上に移動」もしくは「下に移動」をクリックします。
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2022/09/27/fb3ef2a2-3ed4-4ce5-8299-a08bb4d1a775/11ed741d-0414-4e08-b3bf-ed575f25e36f.png)
ヒント:
右クリックメニューでセクションを並べ替えることができます。
ページセクションの向きを変更する
横向きのページセクションを縦向きに、また逆も同様に、反転することができます。縦・横向きのセクションを両方使いこなすと、洗練されたデザインになり、より魅力的なサイトに仕上げることができます。
セクションの向きを変更する方法:
- ページセクションの「その他のアクション」アイコンをクリックします。
- 「縦向きに反転」または「横向きに反転」をクリックします。
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2022/09/27/7c3b051d-f759-4561-ab6f-d2bdcfe63d88/c13935f7-244e-4d42-9567-dc62ac858dd8.png)
動画:セクションについて
お役に立ちましたか?
|