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

設定方法

アコーディオンブロックは、Webページのコンテンツ部分を開閉することで表示・非表示を設定できるブロックです。ページが冗長な時に見やすくしたい、あるいは情報の取得を閲覧者の任意にしたいなどの用途で使用します。

また、アコーディオンブロックにする事でコンテンツの訴求性が高まる効果も期待できます。それではアコーディオンブロックの設定方法について紹介します。

まず、編集画面上の+アイコンをクリックしてアコーディオンブロックを配置します。デフォルトの状態では下記画像のようにアコーディオンは開いた状態で編集画面に表示されます。

見出しを入力の部分には見出しテキストを入力できます、設定したい内容に適したテキストを入力しましょう。

ブロック詳細設定

アコーディオンブロックに関する詳細な設定は編集画面右側のサイドバーで行います。

ここでは上記画像に記された3つの主要な設定について説明します。

(1)開閉設定

  • アコーディオンを閉じた状態で表示する場合、+開閉状態の部分をクリックすると閉じるに変化します。
  • 開閉アイコンの位置は、左側(見出しの左端)か右側(見出しの右端)で表示指定ができます。
  • デフォルト設定は開閉状態:開く・+開閉アイコン:右となります。

(2)見出し設定

  • 行の高さ・フォントの太ささ・見出し[背景角]を指定できます。
  • 行の高さを変更すると見出し枠の高さが変化します。
  • フォントはNomal・boldから選択できます。
  • 見出し[背景枠]は標準ですと見出し枠が角丸になります、角丸なしに指定すると見出し枠が角に変化します。
  • デフォルト設定は標準となります。

(3)アイコン設定

  • 見出にアイコンを挿入する場合、アイコンリストから希望するアイコンを指定できます。
  • アイコンは216種類ありますので、アコーディオンブロックの内容に応じて適切なアイコンが選択できます。

色設定

アイコン(+ー)や見出し[テキスト]と見出し[背景色]の配色を指定できます。

配色設定は+アイコンなどのタブをクリックすると、テーマ・デフォルトと表示されるダイアログ画面が出ますのでそこから指定したい色をクリックして選択します。

表示例

アコーディオンブロックを使用した表示例をご紹介します。
下記ブロックは、開閉設定を開くに指定した例です。

表示例

表示例

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

表示例

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

表示例