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

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

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

完成イメージ

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

スライドショーの追加

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

スライドショーの編集

いらない項目を削除

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

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

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

スライド画像の追加

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

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

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

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

色の変更

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

サイズ・位置の変更

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

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

スライドの枚数を追加

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

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

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

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

応用パターン

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

動画の入れ込み

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

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

アニメーション

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

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

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

まとめ

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

Pickup記事

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

Pickup記事

初心者向けガイド！ChatWork（チャットワーク）の使い方 【基本的な機能をまるっと解説】 ビジネスシーンで多く利用されるChatWork（チャットワーク）ですが、全く使用したことがないと、何から始めて・どんな操作・どんな使い方をすれば良いかの判断が出来ま…

投稿 Wix スライドショーの作り方！【初心者でもたった5分で作成可能です】 は なまはげブログ に最初に表示されました。

企業のロゴや画像、文字などが画面の左右からゆっくりと絶えず流れているパーツを作りたい。
意外と使えるパーツなので、Wixを使っている方にぜひ届けたい。そんな思いでこの記事を書きました。

今回はWixで画像の無限ループを作る方法を解説します！

完成イメージ

画像の無限ループがよく分からないと思いますので、まずは完成イメージを動画で見てみましょう！
画面横幅いっぱいに画像が並び、右から左にたえず流れています。Webサイトでもたまに見るパーツですね。

実際のサイトへの応用例
→参考 : 架空HP制作会社LP（トップページのCONCEPT箇所）

また、このようなテキストの画像を使うことで文字が流れるように見せることもできます。

作り方レシピ

ではさっそく作り方を解説していきます。パーツの追加から見ていきましょう。

パーツの追加

サイト編集　→　画面左にあるツールバー　→　「＋」の追加ボタン　→　ギャラリー　→　プロギャラリー　→　ショーケース　を選択。

するとショーケースのパーツが追加されます。

画像の追加・変更

追加したショーケースのパーツをクリックし、「メディアを管理」を選択。
そうすると、このような画面になります。

画像を追加したい場合は「新しく追加」から、変更したい場合は変更したい画像を選択し「画像を変更」からアップロードし、編集します。

パーツの編集

ここからショーケースのパーツの編集をしていきます。

横幅の調整

ショーケースのパーツをクリックし、　ストレッチ　→　全幅に引き伸ばす　のチェックを入れる。
すると画面横幅いっぱいにパーツが広がります。

高さの調整

画像のようにパーツの高さをドラッグして調整します。

無限ループスライド設定

ショーケースのパーツクリックし、　設定　→　レイアウト　をクリック。

• 画像をループ表示にチェックをいれます。
• 自動でスライドにチェックをいれます。
• 連続にチェックをいれます。
• ホバーで一時停止のチェックを外します。
• 速度や間隔の数値を調整します。

以上を設定すると簡単に画像の無限ループが作成できます！

オプション設定

上記の動画を見ると画像をホバーしたときに背景色とハートのアイコンがつき、クリックしたときに画像のポップアップが表示されてしまうのでクリックしても何も起こらない仕様に変更します。

ホバー時の背景色をなくす

ショーケースのパーツをクリックし、　設定　→　デザイン　→　オーバーレイ・アイコン　をクリック。
オーバーレイ色の数値を「0%」に変更します。

ホバー時のハートアイコンをなくす

ショーケースのパーツをクリックし、　設定　→　ハートアイコン　のチェックを外す。

クリック時のポップアップ表示をなくす

ショーケースのパーツをクリックし、　設定　→　クリック時のアクション　を見る。
選択項目がデフォルトで「拡大表示で開く」になっているので「なし」に変更。

上記の各オプション設定をすることで完成イメージのような画像の無限ループを作ることができるので
ぜひ試してみてください！

まとめ

今回はWixで画像の無限ループを作る方法を解説しました。
意外と使えるパーツなので、デザインのパターンとして覚えておくと良いと思います。
ここまで解説したWixで画像の無限ループを作る方法を使い、理想とするWebサイトに一歩近づく助けになることが出来たら幸いです！

Pickup記事

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

Pickup記事

初心者向けガイド！ChatWork（チャットワーク）の使い方 【基本的な機能をまるっと解説】 ビジネスシーンで多く利用されるChatWork（チャットワーク）ですが、全く使用したことがないと、何から始めて・どんな操作・どんな使い方をすれば良いかの判断が出来ま…

投稿 Wix 画像の無限ループを作る方法！【左右からゆっくり流れてくるパーツを作成】 は なまはげブログ に最初に表示されました。