こちらの記事では、ブロックストア(β)で公開している「アコーディオン」タイプのブロックテンプレートについて、具体的なご利用方法、注意点をご紹介します。
参考:ブロックテンプレートを活用する
「アコーディオン」タイプについて
楽器の「アコーディオン」のように、詳細な情報はデフォルトでは折りたたんで非表示にしつつ、クリック等ユーザーが確認したいときに開閉してコンテンツを表示できます。
そのままコンテンツを表示してしまうとページが冗長になってしまうような場合に、本当に伝えたい内容を効果的に・コンパクトに表示する上で有効です。
ただし、必ずユーザーに見てもらいたい情報は、アコーディオン内に隠して見逃されてしまわないよう注意しましょう。
「アコーディオン」タイプのブロックテンプレートを利用する
ページエディターなどで、ブロックを編集する際にブロックストアから直接、もしくは一度ブロックライブラリに取り込んだテンプレートを呼び出して利用することができます。
提供しているテンプレートはデフォルトでレスポンシブ対応しています。 閲覧デバイスのスクリーン幅に合わせてデザインが自動的に調節されます。
アコーディオンの内容を変更する
ブロックの編集状態でプレビュー上から、もしくは、左側の「レイヤーを開く」ボタンをクリックの上、左ペインに表示された項目から編集したい要素を選択します。
右ペインで画像・リンク・テキストの内容やスタイルの変更が可能です。
ご利用上の注意点
- 設置先のブロックの横幅や縦幅が狭いと表示崩れする可能性があります。
- 設置先サイトのHTML構造とデザインにも依存します。うまく設置できない場合は、
<body>
タグにより近いブロックを指定の上、テンプレートから呼び出してください。
- 設置先サイトのHTML構造とデザインにも依存します。うまく設置できない場合は、