メインコンテンツにスキップ

リストの表示条件設定

リスト(静的なリスト)の表示条件は、リストプロパティの設定状況に応じて、アイテムごとに要素の表示・非表示を切り替える機能です。設定できるプロパティの種類と手順を説明します。

Point:リストとは

リストは、同じレイアウトのボックスをまとめて管理できる機能です。

テキストや画像などのデータを一元管理できるほか、Studio CMSなどと接続すれば、更新に応じて内容が自動反映される動的リストとしても使えます。

デフォルトでは、静的なリストとして機能します。

リスト機能の概要については、リストの記事を参照してください。

表示条件の仕組みと種類

リスト(静的なリスト)の表示条件は、リストプロパティの設定状況に応じて、アイテムごとに要素の表示・非表示を切り替える機能です。

表示条件は、リストプロパティを基準に設定します。設定可能なプロパティと条件タイプの組み合わせは以下の通りです。

プロパティ

条件タイプ

プロパティの状態

テキスト・画像・URLプロパティ

is set

対象のプロパティに値が設定されている場合に表示

テキスト・画像・URLプロパティ

is empty

対象のプロパティに値が設定されていない場合に表示

ブール値プロパティ

is True

対象のプロパティが有効(オン)の場合に表示

ブール値プロパティ

is False

対象のプロパティが無効(オフ)の場合に表示

Tips:ブール値プロパティを使う場合

ブール値プロパティでの設定手順は、リスト:アイテムごとにボックスを表示/非表示にするで詳しく説明しています。


「is set」と「is empty」条件

「is set」「is empty」では、リストアイテムに対象プロパティが設定されているかどうかにもとづいて、要素の表示・非表示を切り替えます。

ユースケース

  • 「補足キャプション」テキストプロパティが入力されているアイテムだけ、キャプション欄を表示する

  • 「サムネイル画像」プロパティが未設定のアイテムでは代替テキストを表示し、設定済みのアイテムでは画像を表示する

  • 「詳細ページへのリンク」URLプロパティが設定されているアイテムだけ、「詳しく見る」ボタンを表示する

設定可能なプロパティ

  • テキストプロパティ

  • 画像プロパティ

  • URLプロパティ

各プロパティの詳細は、リスト:リストプロパティを参照してください。


表示条件を設定する

  1. 表示条件を設定する要素を選択します。
    リスト内にある、特定の条件下でのみ表示する(または表示しない)要素を選択します。

  2. 右パネルで[設定]タブを開きます。
    パネルが閉じている場合は、右パネルを開いてください。

  3. [表示条件を設定]入力フィールドをクリックして、条件として使用するプロパティを選択します。

  4. 表示条件を選択します(プロパティの型に応じて選べる条件が切り替わります)。

    表示条件を設定する様子
  5. 動作確認をします。

    • プロパティ管理表でプロパティの値を変えて、ボックスの表示が適切に切り替わることを確認します。

    • ライブプレビューを開き、正しく表示されているか確認します。

    • 公開サイトでの表示を確認します。問題がなければ公開パネルでサイトを更新します。この操作を行うまで、公開サイトへは反映されません。すでに公開中のサイトの場合は、サイトを更新を参照してください。


表示条件を解除する

  1. デザインエディタ上で、表示条件を解除したい要素を選択します。

  2. 右パネルで[設定]タブを開きます。パネルが閉じている場合は、右パネルを開いてください。

  3. 表示条件右の「×」をクリックして、表示条件を解除します。

    設定済みの表示条件の右端にある×ボタン

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