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

namahage — Wed, 16 Nov 2022 10:11:35 +0000

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

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

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

完成イメージ

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

スライドショー例

スライドショーの追加

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

スライドショーの編集

いらない項目を削除

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

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

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

スライド画像の追加

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

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

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

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

色の変更

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

サイズ・位置の変更

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

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

スライドの枚数を追加

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

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

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

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

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

応用パターン

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

動画の入れ込み

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

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

動画のスライドショー

アニメーション

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

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

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

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

まとめ

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

Pickup記事

請求書作成サイト「MISOCA」の使い方【フリーランス初心者必見！】フリーランスは一般の会社員とは違い、自分でやらなければいけない手続きが多いです。特にその一つが請求書の作成かと思います。請求書作成のオンラインサイトは「MISOC…