Studioのリスト機能の使い方｜14枚の画像で徹底解説！

Studioでサイト制作するなら、必ず覚えておきたいのが「リスト機能」です。

リスト機能を使いこなせるようになれば、デザインを一括編集できるようになり、サイト制作のスピードが格段に上がります。

今回はStudioのリスト機能の使い方について、詳しく解説していきます。

Studioのリスト機能とは

Studioのリスト機能とは、同じレイアウトを繰り返すときに便利な機能です。

例えば、下記のようなパターンです。

上記の例だと、左側にタイトルとテキスト、右側に画像といった合計3つのレイアウトです。

レイアウトを維持して、何個も同じブロックを作りたい時にリスト機能は大活躍します。

Studioでサイト制作するなら、必ず覚えておきたい機能といえます。

リスト機能とコンポーネント機能の違いとは

リスト機能とよく似ているのが「コンポーネント機能」です。

使い分けの判断軸は、完全に同じものを使い回すのか・使い回さないのかです。

リスト機能はレイアウトが同じだけどテキストや画像が違う場合に使用され、コンポーネント機能はヘッダーやフッターなど完全に同じものを使う時に使用されます。

ヘッダーやフッター、ナビゲーションメニューなどページ全体の共通要素を作りたい方は、ぜひコンポーネント機能について学んでみてください。

Studioのリスト機能の設定方法

リスト化したいブロック（使い回したいブロック）を作ります。

一つのブロックとしてまとめるため、グループ化します。

すべての要素を選択した状態で、右クリックして、「グループ化」をクリックします。

グループ化できたら、グループを右クリックして、「リスト化」をクリックします。

下記のように、同じブロックが追加され、また左メニュー欄では下記のようなリストが出てきたはずです。

左メニューのリスト欄から、写真・タイトル・テキストの部分を編集すれば、同じスタイルで変更内容が反映されます。

アイテム数を増やしたい時は、リスト欄の「＋New」をクリックします。

Studioのリスト機能の編集方法

これまでStudioのリスト化の手順について、詳しく解説してきました。

次に、リスト化されたアイテムを編集する方法について解説します。

リスト化されたアイテムを一部削除する方法

リスト化されたアイテムとは、下記のことを指します。

例えば、アイテムを増やしすぎたので削除したいという場合の対処法を説明します。

◼︎リスト化されたアイテムを削除する方法

左メニューのリスト欄の1番右にある「ゴミ箱」のマークをクリックするだけです。

リスト化されたアイテムの順序を並び替える方法

次に、リスト化されたアイテムの順序を変更する方法について紹介します。

①リスト欄の順序を変えたいアイテムに、カーソルを持っていきます。すると、三本線のマークが出てきます。

②三本線マークをクリックし続けた状態で、上下に移動させます。

リストにプロパティを追加する手順

すでにあるリストにプロパティを追加する手順について解説します。

メニューの1番右にある「＋」ボタンをクリックして、追加したいプロパティを選択します。

プロパティを追加するだけでは、リストに反映されません。

プロパティを紐づけたい対象をダブルクリック、そしてもう一回ダブルクリックすることで、左側にレイヤーパネルが出てきます。

プロパティ横にある正円マークと紐づけたい対象を繋ぐことで、内容が反映されるようになります。

Studioのリスト機能に関するよくある質問

作成したリストを解除することはできますか？

リストを解除することはできません。

通常のブロックに戻したい場合は、一度リスト化されたアイテムを削除して、再度作り直す必要があります。

リスト化されたアイテムを横並びにすることはできますか？

横並びにすることも可能です。

横並びにする方法については、「リスト内アイテムを縦並び / 横並びにしたい | Studio Help」で詳しく解説されています。

Studioでのサイト制作は「Terace」にお任せ！