アコーディオンエレメント

Last Updated 8月 30, 2026

概要

アコーディオンエレメントを使用して、学習者が一度に1つのセクションを開くレイヤーされたコンテンツを提示します。 各セクションには、学習者に常に表示されるタイトルと、展開すると表示されるコンテンツがあります。 アコーディオンは情報量の多い資料を管理しやすくするため、学習者は自分のペースで読み進めることができます。

ユースケース

  • ステップバイステップのプロセスを学習者が順番に開くセクションに分割します
  • ページが煩雑にならないように、ポリシーまたは参照資料を提示します。
  • 学習者が最初にスキャンできるタイトルで関連の詳細をグループ化します

アコーディオンを追加

  1. エレメントパネルからキャンバスまたはレイヤーパネルのスポットにアコーディオンエレメントをドラッグします
  2. 新しいアコーディオンは、1つの空のセクションから始まります。

セクションを構築します

各セクションには、ヘッダーと本文コンテンツがあります。 本文コンテンツは、テキストと画像をサポートしています。

  1. セクションタイトルを入力します

フォーマットツールバーを使用してセクションタイトルのスタイルを指定します:

  • 太字:選択したテキストを太字にします
  • 斜体:選択したテキストを斜体にします
  • 下線:選択したテキストに下線を適用します

  1. ドロップダウンからセクションタイプを選択します:

    1. テキストと画像:画像とテキストの両方を表示します
    2. テキスト:テキストのみを表示します
    3. 画像:画像とセクションタイトルのみを表示します

  1. 画像を追加します(テキストと画像または画像セクション用):

    1. アセットから挿入:学習アセットから画像を選択します

    2. デバイスからアップロード:コンピューターからファイルを選択します

推奨アスペクト比:3:1

  1. セクションコンテンツの追加を選択し、セクションコンテンツを入力します

フォーマットツールバーを使用してセクションテキストのスタイルを指定します:

  • 太字:選択したテキストを太字にします

  • 斜体:選択したテキストを斜体にします

  • 下線:選択したテキストに下線を適用します

  • テキストの色:選択したテキストの色を設定します

  • リンク:選択したテキストにハイパーリンクを追加します

  1. 別のセクションを追加するには、セクションを追加を選択します

  2. セクションを並べ替えるには、セクションを希望の順序にドラッグします

ツールバーのアクション

アコーディオンを選択して、ツールバーを表示します:

  • フォント:アコーディオンテキストのフォントを設定します
  • すべて展開:すべてのセクションを開きます
  • すべて折りたたみ:すべてのセクションを閉じます
  • セクションの追加:アコーディオンにセクションを追加します
  • プレビュー:学習者向けのアコーディオンの動作をプレビューします
  • エレメントを非表示:エレメントを学習者からは非表示にしますが、バックグラウンドでは利用可能な状態にします
  • エレメントのリセット:エレメントをリセットします
  • 削除:レッスンからエレメントを削除します

学習者ビュー

学習者にはセクションが折りたたまれた状態で表示され、1つずつ開くことができます。

技術的なノート

  • アコーディオンには、最大6つのセクションを持つことができます

 

この記事は役に立ちましたか?

ご意見ありがとうございます!
×
×