みなさんおはようございます!Wixアニキです!
本日はWixエディタでの「ファーストビューに使われるスライド画像の追加」を説明していきます。
画像を使って当たり前のWebサイトですが、スライド画像も今のWebサイト制作では必要になってきます。
今回の記事を読んで「スライド画像の追加の仕方」をマスターしていきましょう!
●ファーストビューって何?
ファーストビューとは、WEBサイトを訪れたユーザーが最初に目に入る領域を指します。
ファーストビューはユーザーがWEBサイトに滞在するかどうかに大きく影響を与えるため、WEBサイト制作や運用の際に特に重要になってきます。
ファーストビューについて詳しく知りたい方はこちらへ
●スライド画面の追加の手順
サイト編集に入り、左上の+の「パーツを追加」をクリック。
![Wixサイト編集画面](https://wix-media.creative-raja.com/wp-content/uploads/2022/08/494a6acbc3560c2a5bfc63a4a0f6384e-1024x533.png)
たくさんパーツがある中で「ストリップ」をクリックして追加。
スライド画像はストリップで箱を作った後に作成します。
![](https://wix-media.creative-raja.com/wp-content/uploads/2022/08/8e74047991c4294e5ad7393ad32ff808-1024x562.png)
「ストリップ」追加後「パーツを追加」でインタラクティブをクリック。
全幅スライドショー/ボックススライドショーなどがありますが今回はファーストビューを作るため「全幅スライドショー」にします。
![](https://wix-media.creative-raja.com/wp-content/uploads/2022/08/8d397b7ba3849029aee4dc2c28fb0cce-1024x523.png)
「全幅スライドショー」を選択
![](https://wix-media.creative-raja.com/wp-content/uploads/2022/08/ce8439022ee3f74c938ed151fb382531-1024x523.png)
ストリップとスライドの高さを決める。
ストリップの高さを決めた後にスライドの高さも調整してください。
「ストリップの中にスライドショー」を入れる
WordPressでいうとストリップという箱にスライドショーを入れるイメージです。
ファーストビューの完成。
●スライドショーをカスタムする
○スライド写真の変更
スライドする写真を2枚にするのか5枚にするのか変更できます。
スライドショーをクリック。
![](https://wix-media.creative-raja.com/wp-content/uploads/2022/08/2ef942d5c0ccb76118f0d79bc676e4d2-1024x560.png)
スライド管理をクリック。
![](https://wix-media.creative-raja.com/wp-content/uploads/2022/08/75062b8e03616425995ad986cc19338c-1024x572.png)
変えたい写真を選択。
![](https://wix-media.creative-raja.com/wp-content/uploads/2022/08/a4ec4d8cda19f43cd57579974407f30c-1024x572.png)
スライド背景画像をクリック。
![](https://wix-media.creative-raja.com/wp-content/uploads/2022/08/27a22c14d15af498b173388ef01d18f8-1024x572.png)
画像をクリック。
![](https://wix-media.creative-raja.com/wp-content/uploads/2022/08/c32beb7ce79fdde856317c71754b88aa-1024x525.png)
変える画像を選択して「背景を変更」をクリック。
![](https://wix-media.creative-raja.com/wp-content/uploads/2022/08/65892faf46777f12bf56840a76ae4791-1024x513.png)
スライド画像の変更完了。
![](https://wix-media.creative-raja.com/wp-content/uploads/2022/08/8647055677d9cae7845753a12217e729-1024x522.png)
○スライドの設定
スライドショーをクリック。
![](https://wix-media.creative-raja.com/wp-content/uploads/2022/08/8647055677d9cae7845753a12217e729-1-1024x522.png)
歯車のアイコンをクリック。
![](https://wix-media.creative-raja.com/wp-content/uploads/2022/08/7177733c2f3f30503dd2266a59cf1a59-1024x563.jpg)
スライドショーの設定で変更。
設定できる機能を紹介していきます。
①読み込み後の自動再生
→サイトに訪れた時に自動でスライドしてくれます。
![](https://wix-media.creative-raja.com/wp-content/uploads/2022/08/1723c994518e6b8aca6ab71d0264f4c6-1024x565.jpg)
②スライドの表示間隔
→自動スライドする場合、何秒に1回スライドするのか選択できます。
3秒〜5秒などは間隔が遅いため「落ち着いた雰囲気」を見せることが可能になります。
![](https://wix-media.creative-raja.com/wp-content/uploads/2022/08/fa55bed207e32fcf5e1087804b1a90b9-1024x565.jpg)
①と②の解説動画
③ホバーで再生を停止
→スライド写真内にカーソルがあるとスライドが止まる設定になります。
![](https://wix-media.creative-raja.com/wp-content/uploads/2022/08/f02db737785e01c5f7a1d8df05ac13d4-1024x565.jpg)
④変換エフェクト
→エフェクトを追加することが可能です。
ファーストビューだと基本使いませんが、使うとしたら「イン&アウト」です。
○レイアウトの変更
矢印ボタンの表示とサイズ変更。
→矢印ボタンを消すことが可能です。ボタンのサイズと位置も変更可能になります。
スライドボタンを表示。
→真ん中の下にスライドボタンが表示されます。サイズ、位置、間隔の変更が可能です。
○デザイン変更
矢印のボタン、スライドボタンの形や色を変更することが可能です。
「2022年」Wixサイト制作:サイトに画像を追加(Wixエディタ)
Wixで制作したサイトを見たい方はhttps://www.wix.creative-raja.com/worksへ
日本 Wix 研究所は、Wix の機能面から運用方法まで、Wix の全てをまとめているメディアサイトです。
実施にエディターを用いて説明するから誰でもわかりやすいコンテンツが盛りだくさん!
お仕事のご依頼やご相談は日本 Wix 研究所のお問い合わせページからお願いいたします。