STORK19を今すぐダウンロード!

アコーディオンブロック

「アコーディオン」を利用可能になりました!以下のようにコンテンツを格納して補足説明的に使うことができます。(v1.1.0〜)

アコーディオンブロックの使用イメージ

本文のテストです。このように本文が隠れて表示されます。

  1. タップ(クリック)することで内容が表示されます。
  2. CSSを利用した動作であるため、非常に軽量に動作します。
  3. サイトの見出しの背景色(すこし薄くしたもの)が適用されます。
  4. エディタ画面(編集画面)ではクリックしても開閉しません。(※開閉可能にすると編集中に入力欄が隠れてしまい操作しづらいため)

使い所は様々あるかとは思いますが、例えば「全員が見る必要のないような、簡易的な補足説明」で利用すると便利だと思います。

スタイル(デザイン)

デフォルト

こちらはデフォルトのデザインです。サイトで設定している色が反映されるのでそのまま使うだけでもデザインが馴染みます。

こちらはデフォルトデザインです。サイトの見出し色が適用されます。

こちらはデフォルトデザインです。サイトの見出し色が適用されます。

こちらはデフォルトデザインです。サイトの見出し色が適用されます。

シンプル

次は「シンプル」スタイル。余計なスタイルはなく、ほぼ文字だけ表示されるのでさり気なく表現したいときに。

こちらはシンプルデザインです。

こちらはシンプルデザインです。

こちらはシンプルデザインです。

ボーダー

ver3.4から追加されたスタイルです。ボーダーデザインは線のみのシンプルなスタイルなので、複数配置する場合に便利に使えます。

こちらはボーダーデザインです。

こちらはボーダーデザインです。

こちらはボーダーデザインです。

グループブロックを利用して、背景を設定することも可能です。サイト型のブログなどでも重宝しそう。

▼ グループブロックで囲んで色を変更した例

こちらはボーダーデザインです。

こちらはボーダーデザインです。

こちらはボーダーデザインです。

エディターでの表示

編集画面上(ブロックエディタ上)では、下の画像のように表示されます。(※エディタ画面ではアコーディオンをクリックしても開閉しません。)

ブロックエディタ(編集画面)での表示