Wix スライドショーの作り方!【初心者でもたった5分で作成可能です】

Wix スライドショーの作り方!

スライドショーは一般的にHTMLやCSS、JavaScriptの言語を使うので、作成するのに難易度はやや高めですがWixはノーコードなので5分程度で簡単に作れてしまいます。

しかし、簡単とはいってもスライドショーの追加の仕方や編集方法が分からなければ作成は困難でしょう。

そこで今回はWixでスライドショーの作り方を解説していきます!

目次

完成イメージ

スライドショーは自動で、または矢印ボタンなどをクリックすることで画像・動画が切り替わったりするパーツです。
Webサイトではよく見るやつですね。さっそく作り方を見ていきましょう!

スライドショー例

スライドショーの追加

まずは元となるスライドショーのパーツを追加します。
サイト編集 → 画面左にあるツールバー → 「+」の追加ボタン → インタラクティブ → ボックススライドショー → 「特集記事(フード)のパーツを選択。

スライドショーの追加

スライドショーの編集

いらない項目を削除

追加すると画像のようなパーツがサイト編集画面にでます。

人気のレシピ」のテキストと「詳しく読む」のボタンはいらないので削除します。

いらない項目を削除

続いて背景の画像もなくします。
スライドショーのパーツをクリックし、 スライド背景を変更 → 単色 から背景色を白にします。
これで背景が白になり、画像が消えました。(スライド背景の透過を0%にするとセクション背景になじみます)

背景が白になり、画像が消えました

スライド画像の追加

サイト編集 → 画面左にあるツールバー → 「+」の追加ボタン → 画像 からスライドショーに設定したい画像を新しく追加します。

スライド画像の追加

追加した画像をパーツの中央に配置します。

追加した画像をパーツの中央に配置

矢印ボタンとスライドボタンの編集

続いて矢印ボタンとスライドボタンの編集をしていきます。

色の変更

スライドショーのパーツをクリックし、 デザインを変更 → 不透明度・色 から矢印ボタンとスライドボタンの色を変更します。

デザインを変更 → 不透明度・色 から矢印ボタンとスライドボタンの色を変更

サイズ・位置の変更

スライドショーのパーツをクリックし、「レイアウト」から矢印ボタンとスライドボタンのサイズ、位置を調整します。

「レイアウト」から矢印ボタンとスライドボタンのサイズ、位置を調整

これで1枚目のスライドが完成です!

スライドの枚数を追加

デフォルトではスライドが3枚の設定なのでスライドを追加したい場合は
スライドショーのパーツをクリックし、 スライドを管理 → 「スライドを複製」または「スライドを追加」からスライドを追加できます。

スライドを管理 → 「スライドを複製」または「スライドを追加」

2枚目以降のスライド編集

2枚目以降のスライドは動画のように「スライド1/3」の横にある矢印をクリックすると2枚目→3枚目と切り替わります。

2枚目以降のスライドを編集

あとは1枚目の編集と同様にスライドの枚数分を編集します。
これで完成イメージのようなスライドが完成です!

応用パターン

最後に完成イメージで作ったスライドショーを応用したパターンをご紹介します。

動画の入れ込み

サイト編集 → 画面左にあるツールバー → 「+」の追加ボタン → 埋め込みコード → シングル動画プレイヤー →入れ込みたい動画のパーツを選択。

動画の入れ込み

完成イメージでは画像で作成しましたが、動画のスライドショーもできます!
各スライドに動画やYouTube入れ込むことで動画のように動きます。

動画のスライドショー

アニメーション

スライドショーの画像パーツをクリックし、 アニメーション → お好みのアニメーションを選択。

アニメーション → お好みのアニメーションを選択

動画のようにアニメーションを追加することでスライドショーに立体的な動きが生まれます!

アニメーションを加えたスライドショー

ここまでご紹介した応用パターンも使うと、スライドショーの作成パターンが更に広がるのでぜひ色々と試してみてください!

まとめ

今回はWixでスライドショーの作り方を解説しました。
ノーコードなので簡単にスライドショーが作成できましたね!
ここまで解説したスライドショーの追加の仕方や編集方法、応用パターンを活用して、ぜひたくさんのスライドショーを作成してみてください。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次
閉じる