Wix Studio エディタ:スライドショーリピーターを追加・カスタマイズする
読了時間:5分
スライドショーリピーターを使用すると、クライアントのサイト用にインタラクティブなスライドショーをより素早く作成できます。デザインとレイアウトはスライド全体で繰り返されますが、コンテンツはスライドごとに異なります。これにより、すべてのスライドをゼロからデザインすることなく、スライドショー全体で一貫した外観を維持できます。
スライド全体で繰り返されるものは?
![ライブサイトでのスライドショーリピーターの例](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/07/31/479754c8-39ca-42ec-8911-6ab3057983b3/3f063b17-af2e-49f2-9d24-0d3ca17729e1.gif)
この記事では、以下の項目について説明します:
スライドショーリピーターを追加・設定する
さまざまなスライドショーのデザインから選択して始めましょう。ページにスライドショーを追加したら、必要に応じて要素を自由に追加、移動、削除できます。
Note:
1つのスライドに要素を追加したり、スライドから要素を削除したりすると、その他のスライドにも影響を与えます。
スライドショーリピーターを追加・設定する方法:
- エディタ左側で「要素を追加」
をクリックします。
- 「レイアウトツール」をクリックします。
- 「スライドショーリピーター」をクリックします。
- 好きなデザインをページにドラッグします。
- クライアントのニーズに合わせてスライドショーのコンテンツをカスタマイズします:
- 要素(例:テキスト、画像)をクリックしてカスタマイズします。
- スライドにさらに要素を追加します。
- 不要な要素を削除します。
- 要素を CMS(コンテンツ管理システム)に接続します。
![「要素を追加」パネルで利用可能なスライドショーデザイン](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/08/01/da4e8ab4-d0d9-4dc1-8c2a-7d70415019aa/ba18baff-a3b4-4288-a13f-eac5710bd7da.png)
スライドを管理する
要素設定パネルの上部に、現在のアイテム(スライド)の数と、それらを個別に管理するオプションが表示されます。
アイテムを複製してスライドを追加したり、無関係なコンテンツを削除したりできます。また、各スライドにわかりやすい名前を付けて、内容を覚えやすくすることもできます。
![スライドショーを選択した際の要素設定パネルで、上部にアイテム数が表示されています。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/08/01/f8daeaa6-9ede-429a-8802-15d22c3c8584/9326c361-8b70-4f87-9b6c-50d127d03399.png)
スライドを管理する方法:
- スライドショーリピーターを選択します。
- エディタ右上の「要素設定パネルを開く」矢印アイコン
をクリックします。
- 要素設定パネル上部の「管理」をクリックします。
- 該当するアイテム(スライド)にマウスオーバーし、「その他のアクション」アイコンをクリックします。
- 「複製」、「名前を変更」、「削除」のいずれかを選択します。
![スライドショーの各アイテム / スライドに表示される管理オプション](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/08/01/e585b04a-76d7-4690-aa75-1b0ccf62398e/246b517c-fa9e-4ef4-9118-5c625da49f37.png)
スライドショー設定を調整する
スライドショーを希望通りに動作させることができます。ナビゲーションボタンを表示または非表示にしたり、スライドショーが自動的に再生されるように設定したり、スライド間に切り替えを追加したりできます。
スライドショー設定を調整する方法:
- スライドショーリピーターを選択します。
- 「設定」をクリックします。
- 次に実行する内容を選択します:
- ナビゲーションボタンを表示する:トグルをクリックして、ナビゲーションボタンを表示または非表示にします。
- 切り替え:スライド間にトランジション効果を適用するかどうかを選択します。
- 自動再生:トグルを有効にして、訪問者の操作なしでスライドショーを自動的に再生します。
- 各アイテムの時間:スライドショーが自動的に次のスライドに進むまでのスライドの表示時間を決定します。
- マウスオーバーで一時停止:このトグルを有効にすると、訪問者がマウスオーバーしたときにスライドショーが停止します。これにより、サイト訪問者はコンテンツに集中することができます。
- 無限ループ:このトグルを有効にすると、スライドショーに「終了」がなくなり、最初に戻ります。
![キャンバス上のスライドショーの横にある「スライドショー設定」パネル](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/08/01/6c9d4763-9ced-47db-b412-fb6471fe722d/5adb5f8f-cbd0-4162-b263-c7675b1d241c.png)
スライドショーリピーターをデザインする
スライドショーリピーターの外観をカスタマイズして、クライアントのスタイルに合わせましょう。スライドに背景色を追加したり、スライドショーに枠線を付けたり、影を適用して目立たせたりすることができます。
スライドショーリピーターをデザインする方法:
- スライドショーリピーターを選択します。
- エディタ右上の「要素設定パネルを開く」矢印アイコン
をクリックします。
- 「デザイン」までスクロールダウンします。
- 次に実行する内容を選択します:
- スライドの背景色を選択し、不透明度を設定する。
- スライドショーに枠線を追加する。
- スライドショーの角の丸みを調整する。
- スライドショーの後ろに影を追加する。
![要素設定パネルで利用可能なスライドショーのデザインオプション。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/08/01/c6666af3-9215-46ad-ba09-854ed2e55c3d/38fde699-24b6-4b01-a181-3048d69b81d7.png)
ナビゲーションボタンをカスタマイズする
リピータースライドショーには 2つのボタンが組み込まれており、訪問者はそのボタンを使用してスライド間を移動できます。アイコンを置き換えたり、サイズを調整したり、ボタンの横に役立つテキスト(例:「前へ」、「次へ」)を追加したりできます。
また、ボタンを完全に削除して、訪問者が戻ったりスキップしたりできないようにすることもできます。スライドショー設定パネルに移動してボタンを非表示にします。
ナビゲーションボタンをカスタマイズする方法:
- スライドショーリピーターを選択します。
- ナビゲーションボタンを選択します。
ヒント:設定はすべてのスライドに適用されるため、どのスライドを表示していても問題ありません。 - 「テキスト・アイコンの変更」をクリックしてアイコンを置き換え、ボタンにテキストを追加します。
![ナビゲーションボタンを選択した際にツールバーに表示されるカスタマイズオプション](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/08/01/e914f021-e574-45fa-b3bd-5923698e17b0/30240a13-3d91-4ff5-8e97-72ba7c8234ff.png)
お役に立ちましたか?
|