プラグイン「Emanon Premium Blocks」を有効化すると、「アコーディオンブロック」が利用できます。アコーディオンブロックは、見出と文章(またはブロック)を設定できます。見出にはアイコンの表示が可能です。

設定方法

ブロックエディタからアコーディオンブロックを配置します。ページ編集画面ではアコーディオンは開いた状態で表示されます。

ブロック配置時の表示

スタイル

ブロックの見た目を指定する機能です。スタイルサイズで線の太さを調整できます。

デフォルト

ブロックを配置した初期状態のスタイルです。

区切り[線]
区切り[波線]
区切り[点線]
見出し[線]
見出し[上下]

開閉設定

アコーディオンブロックの開閉状態に関する設定です。アイコンの位置や種類を指定できます。

  1. 初期表示の状態を設定します。
  2. 開閉アイコンの配置を左配置または右配置から指定します。
  3. 開閉アイコンを4種類から1つ指定します。

ボーダー設定

アコーディンブロックの外枠を線で表現する設定です。

  1. ボーダーの種類を選択します。
  2. 有効にするとアコーディオンブロックに影が付与されます。
  3. アコーディオンブロックの角の丸みを調整でます。
  4. ボーダーとアコーディオンの間に隙間を発生させます。
ボーダーを有効にした表示例

見出し設定

見出しの高さや角の丸みなどを調整できます。

  1. 見出し背景色の角丸を指定します。
  2. 見出しの角丸を反映する箇所をしています。

アイコン設定

見出しの前にアイコンを表示する設定です。

表示例
見出し

アイコン設定でicon-checkmarkを指定した表示例です。

コンテンツ設定

アコーディオンのコンテンツ内に関する設定項目です。余白(パディング)のサイズブロック間の余白(距離)を一括指定できます。ブロック間の余白を個別に指定する場合、スペーサー[Emanon]を使用してください。

  1. コンテンツ内の余白を上下左右に調整できます。
  2. コンテンツに配置したブロック同士の距離を一括で調整する機能です。

表示例

下記ブロックは、開閉設定を開くに指定した例です。

見出し

文章が入ります。

段落ブロック以外のブロックも配置可能です。下記は画像ブロックを配置した表示例です。

画像ブロック

下記ブロックは、開閉設定を閉じるに指定した例です。

見出し

下記ブロックは、開閉設定を閉じる・開閉アイコンを左に指定した例です。

見出し
見出し

文章

見出し

文章

見出し

文章