スライドショーは一般的にHTMLやCSS、JavaScriptの言語を使うので、作成するのに難易度はやや高めですがWixはノーコードなので5分程度で簡単に作れてしまいます。
しかし、簡単とはいってもスライドショーの追加の仕方や編集方法が分からなければ作成は困難でしょう。
そこで今回はWixでスライドショーの作り方を解説していきます!
完成イメージ
スライドショーは自動で、または矢印ボタンなどをクリックすることで画像・動画が切り替わったりするパーツです。
Webサイトではよく見るやつですね。さっそく作り方を見ていきましょう!
スライドショーの追加
まずは元となるスライドショーのパーツを追加します。
サイト編集 → 画面左にあるツールバー → 「+」の追加ボタン → インタラクティブ → ボックススライドショー → 「特集記事(フード)」のパーツを選択。
スライドショーの編集
いらない項目を削除
追加すると画像のようなパーツがサイト編集画面にでます。
「人気のレシピ」のテキストと「詳しく読む」のボタンはいらないので削除します。
続いて背景の画像もなくします。
スライドショーのパーツをクリックし、 スライド背景を変更 → 単色 から背景色を白にします。
これで背景が白になり、画像が消えました。(スライド背景の透過を0%にするとセクション背景になじみます)
スライド画像の追加
サイト編集 → 画面左にあるツールバー → 「+」の追加ボタン → 画像 からスライドショーに設定したい画像を新しく追加します。
追加した画像をパーツの中央に配置します。
矢印ボタンとスライドボタンの編集
続いて矢印ボタンとスライドボタンの編集をしていきます。
色の変更
スライドショーのパーツをクリックし、 デザインを変更 → 不透明度・色 から矢印ボタンとスライドボタンの色を変更します。
サイズ・位置の変更
スライドショーのパーツをクリックし、「レイアウト」から矢印ボタンとスライドボタンのサイズ、位置を調整します。
これで1枚目のスライドが完成です!
スライドの枚数を追加
デフォルトではスライドが3枚の設定なのでスライドを追加したい場合は
スライドショーのパーツをクリックし、 スライドを管理 → 「スライドを複製」または「スライドを追加」からスライドを追加できます。
2枚目以降のスライド編集
2枚目以降のスライドは動画のように「スライド1/3」の横にある矢印をクリックすると2枚目→3枚目と切り替わります。
あとは1枚目の編集と同様にスライドの枚数分を編集します。
これで完成イメージのようなスライドが完成です!
応用パターン
最後に完成イメージで作ったスライドショーを応用したパターンをご紹介します。
動画の入れ込み
サイト編集 → 画面左にあるツールバー → 「+」の追加ボタン → 埋め込みコード → シングル動画プレイヤー →入れ込みたい動画のパーツを選択。
完成イメージでは画像で作成しましたが、動画のスライドショーもできます!
各スライドに動画やYouTube入れ込むことで動画のように動きます。
アニメーション
スライドショーの画像パーツをクリックし、 アニメーション → お好みのアニメーションを選択。
動画のようにアニメーションを追加することでスライドショーに立体的な動きが生まれます!
ここまでご紹介した応用パターンも使うと、スライドショーの作成パターンが更に広がるのでぜひ色々と試してみてください!
まとめ
今回はWixでスライドショーの作り方を解説しました。
ノーコードなので簡単にスライドショーが作成できましたね!
ここまで解説したスライドショーの追加の仕方や編集方法、応用パターンを活用して、ぜひたくさんのスライドショーを作成してみてください。