アコーディオン ブロック

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

最終更新日 2024年8月12日

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

動画を見る

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

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

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

Accordion_block.png

Accordion_block.png

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

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

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

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

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

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

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

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

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

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

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

この機能へのアクセス

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

テキストのフ⁠ォントと色

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

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

その他の色

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

Footer Image
  • コミ⁠ュニテ⁠ィからサポ⁠ートを受ける

  • 高度なカスタマイズについて⁠、コミ⁠ュニテ⁠ィからサポ⁠ートを受けられます⁠。

  • Squarespace Expertを雇う

  • 経験豊富なデザイナ⁠ーや開発者から力を借りて⁠、オンラインで目を引くサイトを構築しまし⁠ょう⁠。