メインコンテンツにスキップ
リストの作成と管理方法

デザインは統一したまま、コンテンツ管理が可能なリスト機能の使い方から注意点まで解説します。

Saika avatar
対応者:Saika
2か月以上前に更新

リストとは

同じレイアウトを繰り返す場合に内容やスタイルを一括で管理できる機能です。

リストにテキストや画像などのデータをプロパティとして追加して、リスト内のボックスにプロパティを紐付けて表示します。なお、一度リスト化すると後からリスト化の解除はできません。

スクリーンショット:リストを使用したページ例。

リストの構成と概要

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

スクリーンショット:リストのレイヤー構成。

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

スクリーンショット:リストのデータを確認する画面。

このリストアイテムにプロパティが追加でき、リスト上に表示したりリンク先として設定することができます。

スクリーンショット:リストのデータをボックスに紐づけて表示する様子。

リストの作成方法

選択したボックスをアイテム (li) とするリスト (ul) を以下いずれかの方法で作成できます。

  • キーボード操作で ⌘+L (windowsでは Ctrl+L)

  • 右クリックメニューからリスト化を選択

  • ボックス設定パネル内Boxボタンをクリックし、リスト化を選択

スクリーンショット:リストを作成する様子。

デザイン編集

リスト化したボックスには、以下画像のように枠が表示されます。この枠の青い部分をダブルクリックするか、Enterを押下するとデザイン編集ができる状態になります。

ブール値プロパティを使用して、リストアイテムごとに要素の表示・非表示ができます。詳しくは、リストアイテムごとにデザインを変える方法をご覧ください。

スクリーンショット:リストにカーソルを乗せた様子。

リストアイテムの追加

リストの子ボックス (li) は、アイテムと呼ばれます。アイテムには画像やテキストなどのプロパティが追加できます。

新たにアイテムをリストに追加するには、設定パネルで「+New」をクリックします。

スクリーンショット:リストにアイテムを新規追加する様子。

アイテムの並び替え

アイテムにカーソルを乗せると表示されるアイコンをドラッグして並び替えができます。並び替えはレイヤーパネルとスクリーン上の2箇所から行えます。

レイヤーパネル:

スクリーンショット:リストのアイテムを並べ替える様子。

スクリーン:

スクリーンショット:リストのアイテムを並べ替える様子。

アイテムの削除

レイヤーパネルとスクリーン上の2箇所から削除できます。

レイヤーパネル:

アイテムにカーソルを乗せると表示されるゴミ箱アイコンをクリックします。

スクリーンショット:リストのアイテムを削除する様子。

スクリーン:

アイテムにカーソルを乗せると表示される「×」をクリックします。

スクリーンショット:リストのアイテムを削除する様子。

プロパティの追加

「テキスト」「画像」「URL」「ブール値」「カラー」のプロパティが追加できます。

プロパティは、レイヤーパネルとボックス設定パネルの2箇所から追加でき、ボックス設定パネルからは、テキストと画像プロパティのみ追加可能です。

レイヤーパネル:

リスト右上の「+」をクリックし追加します。

スクリーンショット:リストにプロパティを追加する様子。

ボックス設定パネル:

リストの青枠をダブルクリックし、編集モードに切り替えます。テキストまたは画像ボックスをリスト内に配置します。

配置したボックスを選択した状態で、エディタ右側のパネルを開き「+リストデータに追加」をクリックします。

スクリーンショット:リストにプロパティを追加する様子。

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

スクリーンショット:画像ボックスにプロパティが紐付いた様子。

プロパティの編集

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

スクリーン:

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

GIF画像:リストのプロパティを編集する様子。

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

レイヤーパネル:

親ボックス(ul)を選択した状態でレイヤーパネルから編集します。

スクリーンショット:プロパティを編集する様子。

また、編集モードで子ボックス(li)を選択した状態でも編集可能です。

スクリーンショット:プロパティを編集する様子。

プロパティ名の編集

レイヤーパネル上で、プロパティ名をクリックして編集します。キーボードでリターンキーまたはエンターキーを押すと変更が保存されます。

スクリーンショット:プロパティ名を編集する様子。

プロパティの紐付け

リストへプロパティを追加した後は、ボックスやスタイルに紐付けを行います。

紐付けは2箇所から行え、ボックス設定パネルでは、テキスト、画像、URLプロパティのみ操作可能です。

レイヤーパネル:

リストの青枠をダブルクリックし編集モードに切り替え、レイヤーパネルを開きます。

データの右横にある青い丸をドラッグしてボックスに紐付けます。

スクリーンショット:テキストボックスにプロパティを紐付ける様子。

プロパティによっては、塗りや横幅などのスタイルに紐づけることができます。詳しくは、プロパティをご覧ください。 記事で紹介されるテキストプロパティの「改行あり・なし」と「参照プロパティ」はリスト側では提供していない機能です。

スクリーンショット:スタイルの塗りにプロパティを紐付ける様子。

ボックス設定パネル:

ボックスを選択し、設定パネルを開きます。テキスト、画像、またはリンク欄をクリックすると、プロパティの選択肢が表示されるので任意のプロパティを選択してくだい。

なお、テキストプロパティには文字列フィルターが設定できます。詳しくは、プロパティの文字列フィルタをご覧ください。

こちらの回答で解決しましたか?