Editor X:リピーターを使用する

読了時間:9分
Editor X は、代理店とフリーランサー向けの新しいプラットフォームである Wix Studio に移行します。Wix Studio について
リピーターは、同じデザインとレイアウトを持つが、異なるコンテンツを持つアイテムのリストです。コンテンツをすばやく簡単に表示することができます。
Editor X では、リピーターはサイズ変更時にコンテンツが自動的に再編成されるフレックスレイアウトで配置されるため、すべての画面サイズで綺麗に見えます。
この記事では、下記の項目について説明します:
Editor X でデザインできるリピーターの例。
ヒント:
また、リピーターを使用して CMS(コンテンツ管理システム)と接続することで、コレクションの動的コンテンツを表示することができます。

リピーターを追加する

あらかじめデザインされたリピーターセクションをたくさんご用意していますので、ニーズに合わせてカスタマイズが可能です。リピーターの中には画像が含まれているものもあれば、テキストを強調した「リスト」スタイルのものもあります。

リピーターを追加する方法:

  1. Editor X の上部で「要素を追加 をクリックします。
  2. レイアウトツール」をクリックします。
  3. リピーター」をクリックします。
  4. リピーターをページにドラッグします。
追加可能なリピーターが表示された Editor X の「要素を追加」パネルのスクリーンショット

リピーターにコンテンツを追加する

リピーター内のすべてのアイテムは同じデザインです。パーツをリピーターアイテムに追加すると、デザインの一貫性を維持するために、リピーター内の他のアイテムにも自動的に追加されます。
ただし、アイテム内の個々の要素(テキスト、画像など)はカスタマイズできます。たとえば、1つのアイテムにボタンを追加すると、残りのアイテムにも追加されますが、各アイテムのボタンテキストを変更して別の内容にすることは可能です。

リピーターにコンテンツを追加する方法:


  1. Editor X の上部で「要素を追加 をクリックします。
  2. 目的のパーツをリピーターに直接ドラッグします。
  3. 要素をクリックして、アイテムごとにカスタマイズします。
ヒント:
1つのリピーターアイテムから要素を削除すると、他のすべてのアイテムからも削除されます。
1つのリピーターアイテムに要素を追加すると、他のすべてのアイテムに追加されることを示す動画

リピーターアイテムを管理する

要素設定パネルからリピーターアイテムを簡単に複製、名前を変更、並べ替え、削除することができます。

アイテムを管理する方法:

  1. リピーターをクリックします。
  2. Editor X 右上で「要素設定パネル」アイコン  をクリックします。
  3. (要素設定パネルで)アイテム数の横にある「管理」をクリックします。

    A screenshot of the top of the Inspector panel where you can click Manage to manage repeater items
  4. リピーターアイテムの管理方法を選択します:
    • アイテムを複製する:下部の「アイテムを複製」をクリックします。
    • アイテムを削除する:アイテム横の「その他のアクション」アイコン をクリックして「削除」をクリックします。
    • アイテム名を変更する:アイテム横の「その他のアクション」アイコン をクリックして「名前を変更」をクリックします。
    • アイテムを並べ替える:アイテムをクリックし、目的の位置にドラッグします。
要素設定パネルの「アイテムを管理」パネルのスクリーンショット

リピーターをデザインする

デザインをカスタマイズしましょう。アイテムの背景色を変更したり、枠線、影、または訪問者がリピーターにマウスオーバーしたときに表示されるユニークなカーソルを追加することができます。

リピーターをデザインする方法:

  1. リピーターをクリックします。
  2. Editor X 右上で「要素設定パネル」アイコン  をクリックします。
  3. デザイン」タブ  をクリックします。
  4. 利用可能なオプションを使用して、リピーターをデザインします:
    • すべてのアイテムの色・不透明度を変更します。
    • 枠線と影を追加して、アイテムを目立たせます。
    • アイテムの角を丸めます。
    • 訪問者がリピーターにマウスオーバーした際に表示されるカーソルを追加します。
AB デザインパターンを使用している場合:
上記のデザイン変更は、AB パターンに関係なく、すべてのリピーターアイテムに適用されます。
リピーターと、要素設定パネルのデザインタブに表示される利用可能なオプションのスクリーンショット。

リピーターアイテムに AB デザインパターンを設定する

AB デザインパターンを使用すると、リピーターアイテムを 2つのグループに分けて、それらのデザインは同じまま、それぞれに異なるスタイルと操作を適用させて 2種類のパターンを作成することができます。
AB パターンを有効にすると、リピーターアイテムが A と B のグループに分割されます。どちらのグループにどのアイテムが属しているかは、エディタで確認することができます。A または B のいずれかのアイテムをデザインすると、グループ内の他のアイテムもそれに合わせて自動的に変更されます。
アイテム B をデザインしている際の、リピーターと要素設定パネルのスクリーンショット。

リピーターアイテムに AB デザインパターンを設定する方法:

  1. リピーターをクリックします。
  2. Editor X 右上で「要素設定パネル」アイコン  をクリックします。
  3. 表示」までスクロールダウンします。
  4. AB デザインパターンを設定」トグルを有効にします。
    要素設定パネルの「表示」セクションのスクリーンショット
  5. アイテム A とアイテム B をデザインします:
    1. リピーター内のアイテム A またはアイテム B をクリックします。
      ヒント:該当するグループから任意のアイテムを選択することができます。
    2. (要素設定パネルで)「デザイン」タブ  をクリックします。
    3. このグループのアイテムのカスタマイズ方法を選択します:
      • デザイン」セクションからデザインプリセットを選択します。
      • アイテムの「色・不透明度」を変更します。
      • 操作」タブ からホバー時またはクリック時の操作を追加します。

リピーターのレイアウトを変更する

画面サイズが変更された際のリピーターアイテムの再配置方法を設定します。選択した表示設定(カード、リスト、スライダー、グリッドセルなど)に応じて、マージン、配置、方向、その他の設定をカスタマイズできます。
リピーターをクリックすると表示されるドロップダウンのスクリーンショットで、レイアウトをすばやく変更できます。
ブレイクポイントを操作する:
  • ブレイクポイントごとに、リピーターに異なるレイアウトを設定できます。
  • リストとスライダーは、タブレットやモバイルデバイスなどの小さい画面サイズでよく使用されます。

リピーターのレイアウトをさらにカスタマイズする方法:

  1. リピーターをクリックします。
  2. Editor X 右上で「要素設定パネル」アイコン  をクリックします。
  3. 選択した表示タイプに基づいてリピーターのレイアウトをカスタマイズします:
グリッドギャップに関する注意事項:
一部の古いバージョンのブラウザはこの機能をサポートしていません(例:Chrome 76-83、Safari 12-14、Edge 79-83)。つまり、これらのブラウザからサイトにアクセスした訪問者には、リピーターアイテム間に設定したギャップは表示されません。
リピーターの表示を調整している Editor X の要素設定パネルのスクリーンショット
リピーターに関する詳細:
リピーターに関するレッスンや演習は Academy X にアクセスしてください。

お役に立ちましたか?

|