横並びの方法や解除時の注意点も！Studioでのリスト化について解説

Studioのリスト機能とは？基本的な作り方や編集方法

Studioのリスト機能とは、記事一覧やQ&A、カルーセルなど、同じデザインや構造で複数のコンテンツを表示したいときに使う機能です。

リストは、簡単に作成・編集することができます。

1.コンテンツを選択してリスト化

Studioでリストにしたい要素を選択し、右クリックで「リスト化」を選択してリストを作成します。

2.リストのテーブルを編集

Studio左パネルから、画像やテキスト、ブール値などの要素を編集・追加します。

追加できる要素は以下の5種類です。
・テキスト
・画像
・URL
・ブール値（表示非表示など、オン・オフが設定できる値）
・カラー

3.リストのデザインを編集

リストボックスをダブルクリックすることで周囲が暗くなり、リストの編集モードに入ります。

左パネルからリストの要素をドラッグ&ドロップすることで、リストの要素とデザインを紐づけることができます。

なお、カルーセル・トグルを作成したい場合は、「追加」からテンプレートを使用することもできます。

複雑な実装がワンクリックで作成できるため、初めての実装におすすめです。

Studioにおけるカルーセルの実装方法については、こちらの記事で詳しく紹介しています。

https://studio-goro.com/column/knowledge/studio_carousel

Studioのリスト機能のできないことと対処法

リスト機能の仕様上できないことについて、対処法と注意点を交えながら2点紹介します。

リストを解除するとテキスト・コンテンツが表示されない

Studioのリストは、解除してしまうと以下の問題が発生することがあります。

・画像が「No image」になる
・ブール値で表示非表示を指定していた要素が、すべて非表示になる

【対処法】
事前にリストを複製しておき、解除したリストに情報をコピーしていくことで対処していきます。

ただし、この時事前にブール値を解除してからリストを分解する必要があります。


一連の流れをまとめると、以下の通りです。

1.リストのブール値をすべて解除する

2.データをコピーするためのリストを複製する

3.項目を外側へドラッグ&ドロップし、リストを解除

4.複製したリストから、情報を移していく

リストの項目のデザインを一部だけ編集できない

リスト機能のデザインについて、以下のようなことができません。

・真ん中の項目だけ線の太さを変える
・テーブルで指定できない
・リッチテキストの編集

【対処法】
ブール値を用いて、デザインの異なるパーツを切り替えることである程度の対処が可能です。

ただし、差異が多いほど手間がかかってしまうため、リスト化をしない方がより効率的である場合があります。

リストを使用するべきかどうか検討するようにしましょう。

Studioのリスト機能を使いこなすための2つの設定方法

リスト機能でよく聞かれる、リストの横並び方法や、CMSの紐付け方法について紹介します。

リストを横並び・折り返しさせる方法

リストのデザイン編集モードに入ることで、横並び・折り返しの設定ができるようになります。

リスト化した後も、折り返しや、要素の高さを統一する両端揃えが設定可能です。

リストにCMSのデータを紐付ける方法

テーブルの右上「データの紐付け」から、CMSのデータを紐付けることができます。

CMSとの連携を行うことで、記事一覧ページやカテゴリ一覧ページなどを作成することが可能です。