アコーディオンは、折りたたみ可能なコンテンツセクションを表示するブロックです。各セクションにはクリック可能なヘッダーがあり、コンテンツを展開または中に折りたたむことができます。このガイドでは、WordPress.com サイトでアコーディオンブロックを追加、カスタマイズ、使用する方法について説明します。
アコーディオンを使用すると、情報を整理したり、ページの長さを短縮したり、訪問者を最も重要なコンテンツに集中させたりできます。アコーディオンは、訪問者が選択的に閲覧するようなコンテンツを整理するのに適しています。一般的な使い方は次のとおりです。
- 利用規約とポリシー: 訪問者を圧倒することなく法律またはポリシーに関する情報を提示します。
- よくある質問 (FAQ): よくある質問をグループ化し、回答を展開できるようにします。
- 商品詳細: 折りたたみ可能なセクションに仕様、サイズガイド、配送情報を表示します。
- ステップガイド: チュートリアルやガイドを分かりやすいステップに分けます。
- イベントスケジュール: 時間やセッションごとにアジェンダや旅程を整理します。
- チームのプロフィール: 簡単な紹介を表示し、各チームメンバーの詳細を展開できるようにします。
ページまたは投稿にアコーディオンブロックを追加する手順は以下のとおりです。
- サイトのダッシュボードにアクセスします。
- 「ページ」または「投稿」に移動し、アコーディオンを追加するページまたは投稿をクリックします。
- 「+」ブロック挿入アイコンをクリックします。
- 「アコーディオンブロック」 を検索し、クリックして投稿またはページにブロックを追加します。
ブロックを追加する手順についてはこちらを参照してください。
アコーディオンブロックを最初に投稿またはページに追加すると、次のセクションが表示されます。
- アコーディオン項目: 折りたたみ可能なセクションで、各セクションには見出しとパネルがあります。
- アコーディオン見出し: クリック可能なタイトルで、コンテンツを展開または中に折りたたむことができます。
- アコーディオンパネル: ヘッダーがクリックされたときに表示されるコンテンツです。
アコーディオンを完成させるには:
- 常に表示させるタイトルまたは見出しのテキストを追加します。
- アコーディオンパネル領域の内側をクリックするか、「リストビュー」を使用して選択します。
- 「+」ブロック挿入をクリックして、アコーディオンパネルの領域内にブロックを追加します。テキスト、画像、動画、その他のブロックなど、あらゆる種類のコンテンツを追加できます。
アコーディオンブロックには、アコーディオンの動作を制御する設定が用意されています。これらの設定にアクセスするには、「リストビュー」を使用して親アコーディオンブロックを選択し、右側のサイドバーでブロックの設定を開きます。
サイドバーが右側に表示されない場合、右上の設定アイコンをクリックして設定を表示させます。このアイコンは2つの不均一な列がある正方形のような形をしています。
「コンテント幅を使用するインナーブロック」がオンの場合、アコーディオンブロック内のブロックは、次の幅設定に従います。
- コンテンツ: ブロックのコンテンツエリアの幅は「幅広」または「全幅」に設定されません。
- 幅広: ブロックのコンテンツの幅が幅広に設定されます。
有効にすると、1つのアコーディオン項目を開いたときに、開いている他の項目が自動的に閉じます。これによりコンテンツが整頓され、訪問者は一度に1つのセクションに集中できます。
各アコーディオンヘッダーの横に表示される展開/折りたたみアイコン (通常は「+」または矢印) のオンオフを切り替えます。よりクリーンでミニマルな外観にするには、このオプションを無効にします。
アイコンをアコーディオンヘッダーの左側に表示するか、右側に表示するかを選択します。
ページの読み込み時に特定のアコーディオン項目が展開して表示されるように設定できます。これを行うには次の手順に従います。
ブロック設定サイドバーでスタイルアイコンをクリックし、ブロックのデザイン設定にアクセスします。スタイルアイコンは、半分が塗りつぶされた円の形をしています。
指定できるオプションは以下のとおりです。
- 色: アコーディオンヘッダーとパネルの背景とテキストの色を設定します。
- 背景画像: 親アコーディオンブロック全体に背景画像を追加します。
- タイポグラフィ: テキストのフォントサイズとスタイルを調整します。
- サイズ: アコーディオン項目の周りのパディングとマージンを制御します。
- 境界線と影: アコーディオンに枠線と影の効果を追加します。
日本語サポート 
コメントを投稿するにはログインしてください。