対象プラン：全プラン

リストの概要と基本操作

同じレイアウトを繰り返す場合に、「リスト」を使うと内容やスタイルを一括で管理できます。この機能を使うことで、効率的なセクションの制作・変更が可能です。

この記事では、リストの概要と基本操作をご紹介します。

Tips：類似機能として、コンポーネントがあります。繰り返し使用するデザイン要素を効率的に管理・利用するための機能です。

リストとは

リストは、同じレイアウトを繰り返す場合に効率的にコンテンツとデザインが管理できる機能です。

テキストや画像などのコンテンツとデザインは、別々に管理します。コンテンツとデザインを分けて管理することで、効率的な制作・管理が可能です。

管理対象	管理場所
コンテンツ	レイヤーパネル
デザイン	ページ上

コンテンツの構成

リストで扱うコンテンツは、アイテムとプロパティから構成されています。

アイテム

リストに表示される画像やテキストのまとまりです。レイヤーパネルでは、縦列に並びます。

プロパティ

プロパティとは、リスト内で管理するデータ項目です。例えば「テキスト」や「画像」が該当します。レイヤーパネルの横列に並びます。

プロパティの種類

プロパティには以下の種類があります：

テキストプロパティ
画像プロパティ アップロード画像やフリー画像が追加できるプロパティです。アップロード可能な画像の形式は、Studioエディタにアップロード可能なファイル形式やサイズをご覧ください。
URLプロパティ プロジェクト内のページや外部サイトへのリンクを追加するプロパティです。外部URLは直接入力します。
ブール値プロパティ
ブール値プロパティは、オン・オフ（true / false）が設定できるプロパティです。下記のようなケースで利用できます。
- 「おすすめ」商品のマーク付け（表示条件を併用）
- 特定コンテンツのスタイル（色やサイズなど）変更（条件付きスタイルを併用）
カラープロパティ
色（カラーコード）を設定できるプロパティです。登録したカラープロパティは、ボックスの塗り、テキストボックスの色（文字色）として利用可能です。

リストの構成

リストは親ボックス (ul) と子ボックス (li) から構成されています。

リストの親ボックス（ul）を選択した状態でレイヤーパネルを開くと、リスト全体のアイテムとプロパティが確認できます。

リストの作成方法

リストに変換したいボックスを選択します。
カード表示など、複数のボックスからなる要素をリスト化したい場合は、あらかじめグループ化しておきます。
以下のいずれかの方法でリスト化します。
- キーボード操作で ⌘＋L (windowsでは Ctrl＋L)
- 右クリックし、メニューから[リスト化]を選択
- ボックス設定パネル内Boxボタンをクリックし、[リスト化]を選択

リストの編集方法

アイテムの追加方法

新規追加するとデータが入っていないアイテムが追加されます。

リストを選択し、レイヤーパネルを開きます。
リスト下部にある[+New]をクリックして追加します。

アイテムの削除方法

レイヤーパネルとページ上の2箇所から削除できます。

レイヤーパネル：

リストを選択し、レイヤーパネルを開きます。
アイテムにカーソルを乗せると表示されるゴミ箱アイコンをクリックします。

ページ上：

リストを選択します。
アイテムにカーソルを乗せると表示される[×]をクリックします。

アイテムの並び替え方法

並び替えはレイヤーパネルとページ上の2箇所から行えます。レイヤーパネルとページ上の並び順は同期しています。

レイヤーパネル：

リストを選択し、レイヤーパネルを開きます。
アイテムにカーソルを乗せると表示されるアイコンをドラッグして並び替えます。

ページ：

リストを選択し、アイテム左側にカーソルを乗せます。
アイコンをドラッグして並び替えます。

プロパティの追加方法

レイヤーパネルとボックス設定パネルの2箇所から追加できます。

Tips：追加したプロパティは、ページ上でリスト内のボックスに紐づけて表示・デザインします。詳しくは、プロパティの紐付け方法をご覧ください。

レイヤーパネル：

リストを選択し、レイヤーパネルを開きます。
リスト右上の[+]をクリックし、プロパティの種類を選んで追加します。
追加したプロパティを編集します。

ボックス設定パネル：

ボックス設定パネルからは、テキストと画像プロパティのみ追加可能です。

リストを選択して、リストの青枠をダブルクリックします。
テキストまたは画像ボックスをリスト内に配置します。
配置したボックスを選択した状態で、エディタ右側のパネルを開き[＋リストデータに追加]をクリックします。

自動的にリストへプロパティとして追加されます。

プロパティの編集方法

プロパティの内容は、レイヤーパネルとページ上の2箇所から編集できます。

レイヤーパネル：

リストを選択し、レイヤーパネルを開きます。
プロパティのデータを編集します。
編集モードで親ボックス（ul）を選択した状態だと、他のアイテムも表示されます。

編集モードで子ボックス（li）を選択した状態だと、個別アイテムのみ表示されます。

ページ上：

画像とテキストは通常の画像・テキストボックスと同じようにページ上で編集できます。

リストを選択して、リストの青枠をダブルクリックします。
画像またはテキストボックスをクリックし、編集します。

注意：以下の場合、ページ上で直接内容変更できません。レイヤーパネルから変更してください。

カルーセル（リスト）の場合
文字列フィルターを設定している場合
テキスト欄に直接文字列の入力がある場合

プロパティ名の編集方法

リストを選択し、レイヤーパネルを開きます。
プロパティ名をクリックして編集し、Enterキーを押して保存します。

プロパティの削除方法

リストを選択し、レイヤーパネルを開きます。
プロパティ名をクリックして[Delete]を押します。

リストのデザイン方法

レイヤーパネルで管理するコンテンツは、ページ上のリストへ紐付けて表示しデザインを編集します。ここでは、コンテンツ（プロパティ）の紐付けとデザイン編集方法をご紹介します。

プロパティの紐付け方法

リストへプロパティを追加した後は、ボックスやスタイルに紐付けてリストへ反映します。紐付けは2箇所から行えます。

レイヤーパネル：

リストを選択して、リストの青枠をダブルクリックします。
レイヤーパネルを開きます。
データの右横にある青い丸をドラッグしてボックスに紐付けます。

ボックス設定パネル：

ボックス設定パネルでは、テキスト・画像・URLプロパティのみ紐付けできます。

リストを選択して、リストの青枠をダブルクリックします。
ボックスを選択し、設定パネルを開きます。
テキスト・画像・リンク欄をクリックすると、プロパティの選択肢が表示されるので任意のプロパティを選択します。
テキストプロパティには文字列フィルターが設定できます。詳しくは、プロパティの文字列フィルタをご覧ください。