こちらの記事では、ブロックストア(β)で公開している「アコーディオン」タイプのブロックテンプレートについて、具体的なご利用方法、注意点をご紹介します。
参考:ブロックストア(β)概要

本機能はβ版です。不具合などのリスクが相対的に高く、また、今後機能内容、仕様やUIが大幅に変更になる可能性がありますのでご了承ください。
ブロックストアでのブロックテンプレートの追加ご要望もお待ちしております。お気軽にチャット窓口までご連絡ください。

「アコーディオン」タイプについて

楽器の「アコーディオン」のように、詳細な情報はデフォルトでは折りたたんで非表示にしつつ、クリック等ユーザーが確認したいときに開閉してコンテンツを表示できます。
そのままコンテンツを表示してしまうとページが冗長になってしまうような場合に、本当に伝えたい内容を効果的に・コンパクトに表示する上で有効です。

ただし、必ずユーザーに見てもらいたい情報は、アコーディオン内に隠して見逃されてしまわないよう注意しましょう。

「アコーディオン」タイプのブロックテンプレートを利用する

事前にブロックストアから利用したいテンプレートをライブラリに取り込みます。
参考:ブロックストア(β)概要

ページエディターなどで、置き換えブロックを編集する際に取り込んだテンプレートを呼び出します。

提供しているテンプレートはデフォルトでレスポンシブ対応しています。 閲覧デバイスのスクリーン幅に合わせてデザインが自動的に調節されます。

アコーディオンの内容を変更する

ブロックの編集状態でプレビュー上から、もしくは、左側の「レイヤーを開く」ボタンをクリックの上、左ペインに表示された項目から編集したい要素を選択します。
右ペインで画像・リンク・テキストの内容やスタイルの変更が可能です。

null

ご利用上の注意点

  • 設置先のブロックの横幅や縦幅が狭いと表示崩れする可能性があります。
    • 設置先サイトのHTML構造とデザインにも依存します。うまく設置できない場合は、<body>タグにより近いブロックを指定の上、テンプレートから呼び出してください。