top of page

Wix セクションの使い方

更新日:2023年6月20日



こんにちは!

Wixパートナーレベル最上位 レジェンドを取得しています

合同会社アクトワン代表 和田英也です!


今回はWix セクションの使い方というテーマで解説致します!


ここまでのブログ記事では、Wixの大まかな使い方と、 編集画面や初期設定について解説してきましたが、今回よりそれぞれのパーツの具体的な使用方法について解説していきます。


セクションはサイト上にあらゆるパーツを置くための下地のようなもので、全てのパーツはまず、このセクションをエディタ上に置くことから始まります。


それでは早速始めましょう!


▼ 目次


セクションの背景を設定する

セクションで背景を設定する

エディタを開いた状態でバーの左側に"セクション"があります。

Wixではセクションを置いた上に様々なパーツを置いていくことになります。


では、このセクションでは一体何ができるかというと、まずはセクションの背景を変更することができます。

セクションで背景を設定する

これは後に解説するストリップでも同じです。

背景には色や画像、動画も選べます。

セクションで背景画像を選択

例えば、赤枠のような背景画像を設定します。

セクションで背景を設定する

するとこのようにセクションに背景が追加されます。

コンテンツのボリュームによって高さも調節していきましょう。

セクションで背景を設定する

そしてこのセクションの上に文字を置いていきます。


セクションの追加方法

セクションの追加方法

セクションを追加する時はセクションの下にある"セクションを追加"ボタンです。

セクションの追加方法

様々なデザインのテンプレートがありますが、空のセクションもあります。


スクロールエフェクトの設定

パーツをのせたセクションにはスクロールエフェクトを設定することができます。

スクロールエフェクトとは、私たちは実際のサイトを見るときに画面をスクロールしていきますよね。


その時のセクションの背景の動きを設定することができます。

スクロールエフェクトの設定

矢視のアイコンの背景を選択します。

スクロールエフェクトの設定

すると様々なスクロールエフェクトが表示されます。


代表的なスクロールエフェクトに"パララックス"と"リヴィール"があります。

パララックスはリヴィールと違って背景が固定されるイメージではありますが、スクロールから僅かに遅れて動く効果があり、立体感や奥行きを演出します。


YouTube動画ではパララックスやリヴィールの視覚効果もみることができるので、ぜひご確認ください。


他のスクロールエフェクトがどのような動きをするのかも、アイコンから確認することができます。


セクションに名前をつけて管理

ここからはセクションならではの機能なのですが、セクションには名前を付けることができます。

セクションに名前をつけて管理

名前を入れるメリットは、セクションはリンク先として設定することができます。

セクションに名前をつけて管理

ページのアンカーとしてセクションを選べるようになっているので、リンク先にセクションを設定しておくことで、メニューバーにセクションを表示させ、クリックしたユーザーを選択したセクションに遷移させることができるんですね。


またセクション単位でエディタを管理することができるので、セクション自体の移動も簡単にできます。


クイック編集機能について

セクションを選択した状態で"クイック編集"を押すと、

セクションのクイック編集機能

先ほど編集したタイトルや背景などの内容を一元管理することができます。

セクションのクイック編集機能

さらにクイック編集が便利なのは、セクション内にテキストやボタンなどの様々なパーツがある場合に、見出しや段落になる箇所をクイック編集で編集することができます。


ここでテキスト自体の書き換えや全ての文字編集が可能です。

テキストだけでなく、ボタンパーツの内容やリンク先の設定などもクイック編集できます。

クイック編集からさらにテキストなどを追加、編集することも可能です。


レイアウト調整

セクションのレイアウト調整

レイアウトを押すと、レイアウトのテンプレートが出てきます。

セクションのテンプレートの中で区切りのあるようなものを選択してみます。

セクションのレイアウト調整

この区切りはセクション自体が分割されたのではなく、中にストリップというパーツが追加された状態です。


ストリップはカラムによって2つの領域に区切られていますが、そういったことをしたい場合はストリップを設定しなければいけません。


よって、セクションとは、あくまで下地となるものを作成する時に設置するといった感じです。


セクションの複製

既存のセクションは複製可能です。

セクションの複製

セクションを選択した状態でCtrl+Dもしくは、右クリックで"複製"です。

セクションの複製

すると、同じセクションが追加されます。

都度セクションを設定していると工数がかかってしまうので、こうしたことから工数を削減していきましょう。


セクションURLの発行

セクションURLの発行

YouTube動画を出した時点ではこちらの機能がなかったので、紹介できていませんでしたが、セクションにURLを発行する機能がリリースされました!


エディタ上でセクションを選択し、セクションのタブにマウスオーバーすると、右端に[T]と出ますので、ここから"セクション名を変更"に進みます。


セクションの名前を設定する箇所の下に"URLサフィックスを入力してください"と出ますので、ここでセクションのURLを設定できます。


こちらで設定したURLを開くと、ページだけでなく、セクションがある箇所に遷移します。


スクロールエフェクトを使ったテクニック

このようなスクロールによって、中心の画像が変化するエフェクトを作ります。

スクロールエフェクトを使ったテクニック

まずは複製によって同じセクションを2つ作ります。

さらに上の画像のように形状が同じで背景色の違う画像を2つ用意します。

2つのセクションの背景にそれぞれの画像を設定し、それぞれのスクロールエフェクトを"リヴィール"にします。

スクロールエフェクトを使ったテクニック
スクロールエフェクトを使ったテクニック

こうすると、リヴィールの効果で、中央のアイコンの色が徐々に変化していくような面白い効果を作ることができます!


以上がセクションの使い方の解説となります。


動画解説版はコチラ


チャンネル登録・高評価・動画に対するコメントなどよろしくお願いいたします!


Wix Tech Salon

Wixのオンラインサロン Wix Tech Salonのバナー

アクトワンではWixクリエイターを中心としたオンラインサロンを運営しております!

Wixの知識のシェアや、ビジネスの課題解決、メンバー同士の交流を目的にしています。 ご興味がある方はぜひ覗いてみてください!


閲覧数:534回

関連記事

すべて表示

Comments


bottom of page