大量のテキストを折りたたみ可能なセクションに表示して、テキストが多いコンテンツを訪問者がナビゲートしやすくします。

アコーディオン ブロックを使用すると、折りたたみ可能なセクションにテキスト コンテンツを表示できます。これは、よくある質問や商品紹介などの、構造化されていてテキストの多いページに最適なオプションです。アコーディオン ブロックはページを短くし、訪問者のスクロールを減らすのに役立ちます。

動画を見る

アコーディオン ブロックの仕組み

サイトへの訪問者には、アコーディオン ブロックはタイトルのリストとして展開アイコンの横に表示されます。デザイン設定によっては、最初の項目が既定で展開される場合があります。

訪問者がそれぞれのタイトルをクリックすると、該当する説明テキストが開きます。各アコーディオン ブロックでは、一度に1つの項目のみを展開できます。展開されている項目を訪問者がクリックすると、その項目は折りたたまれます。ある項目がすでに展開されているときに別の項目をクリックすると、以前に展開されていた項目が閉じます。

アコーディオン ブロックを追加する

アコーディオン ブロックを追加する方法は以下のとおりです。

1. ページまたは投稿を編集し、[ブロックを追加] または挿入箇所をクリックして、メニューから [アコーディオン] をクリックします。ヘルプについては、「ブロックを使用したコンテンツの追加」をご参照ください。
2. ブロックの鉛筆アイコンをクリックして、ブロック エディターを開きます。
3. [コンテンツ] タブで、アコーディオン ブロックのアイテムを追加または編集します。各アイテムには、常に表示されるタイトル テキストと、アイテムが展開されたときに表示される説明テキストが含まれます。
4. [デザイン] タブで、アコーディオン ブロックの外観のスタイルを設定します。
5. 完了したら、ブロック エディターの外側をクリックします。変更内容は自動的に保存されます。

アイテムの追加と編集を行う

[コンテンツ] タブで、以下の手順に従います。

• リスト内のアイテムをクリックして、タイトルと説明を編集します。
• 新しいアイテムを追加するには、[アイテムを追加] をクリックします。
• アイテムをクリックして長押ししたまま並べ替えます。
• アイテムにカーソルを合わせて、ゴミ箱アイコンをクリックすると削除されます。

アイテムを開くと、その他のオプションが表示されます。

• [タイトル] フィールドでタイトル テキストを編集します。
• [説明] フィールドで説明テキストを編集します。
• [複製] をクリックするとアイテムのコピーが作成されます。
• [削除] をクリックするとアイテムが削除されます。

アコーディオン ブロックのスタイルを設定する

[デザイン] タブでは、ブロックのテキスト、レイアウト、外観、アイコンのスタイルを設定できます。

• [タイトル] をクリックして、タイトル・テキストの書式と配置を設定する。
• [説明] をクリックして、説明の形式と配置、および次のようなその他のオプションを設定します。
  • 幅: テキストの幅を設定します。
  • パディング: テキストを囲む余白の量を設定します。
  • 配置: テキストを揃える方向を設定します。
  • 位置: ブロック内でテキストを配置する場所を設定します。
• [最初の項目を展開] を有効にすると、既定で最初のアイテムが展開されます。
• [複数の項目を開くことを許可する] を有効にすると、ある項目を開いたときに別の項目が閉じないようにすることができます。
• [仕切り] をクリックすると、各項目を区切るための線のスタイルを設定したり、無効化したりすることができます。
• [アイコン] をクリックすると、[展開] アイコンを矢印またはプラス記号として設定できます。
• [アイコン] の下で、[アイコンのサイズ]、[アイコンの濃さ]、[アイコンの配置] を設定します。
• [行のパディング] を設定すると、各アイテムの周囲の空白の量を変更できます。
• バージョン7.1のサイトの場合、[背景] 色トグルを切り替えることにより、背景色の追加、角の半径の設定、背景のパディングの変更ができます。ブロックの背景色はバージョン7.0ではサポートされていません。
• [ストローク] の横で、ブロックの輪郭を描く実線または点線を有効にします。実線と点線の両方で、ストロークの色と太さを設定します。
• [ブレンド モード] ドロップダウン メニューをクリックして、透明度の設定を選択します。こうしたエフェクトは、画像やその他のビジュアル コンテンツの前にアコーディオン ブロックを重ねる場合に最適です。
• [エレメント] または [背景] をぼかすには、[ぼかし] の横にあるトグルをオンに切り替え、スライダーを使用してぼかしのレベルを調整します。

創造エディター セクションでは、ストローク、ブレンド モード、ぼかしをカスタマイズできます。クラシック エディターが使用されているセクションでは、ストロークのみ使用できます。

テキストのフォントと色

テキストのフォントと色はサイト スタイル設定に従います。これらの設定を変更すると、同じ設定を持つ、サイト上のすべてのエレメントに影響することに注意してください。

• [フォント] パネルでは、アコーディオン ブロックのタイトルは見出し設定と [見出し4] のサイズに従います。アコーディオン ブロックの説明は、段落設定と [段落2] のサイズに従います。
• [色] パネルでは、アコーディオン ブロックのタイトルは、カラー パレットの [見出し (小)] 微調整オプションに従って表示されます。アコーディオン ブロックの説明は、[段落 (中)] の調整に従います。

その他の色

[色] パネルで、[アコーディオン ブロック] の下にある微調整オプションを使用して、仕切りの色、アイコンの色、および既定の背景色を変更します。