アコーディオンブロックの使い方

この機能の概要

項目内容
できることボタン、または画像をクリックすると、あらかじめ用意しておいた内容がその場で開閉する(別ページへの遷移やポップアップ表示はしない)
追加できる場所ブロックエディタの本文中どこでも。比較表や固定ページ、通常の投稿ページなど、ブロックが使える場所であればどこにでも置ける
向いている用途FAQ(よくある質問)、補足情報など「普段は隠しておいて、必要な人だけ開いて読む」情報

先にご確認ください: WordPress標準の「詳細」ブロックにも開閉の機能がありますが、文字のトリガー(▼詳細を見るのような見出し)しか使えず、画像をクリック部分にすることができません。そのため、画像をクリックして開閉させたい場合にも対応できる専用のブロックとして用意しています。


クリック部分(トリガー)の選び方

アコーディオンには、開閉のきっかけとなる「クリックする部分」が必要です。ブロックを追加すると、右サイドバーの「クリック部分(トリガー)の設定」で、次の2種類から選べます。

種類内容
ボタン(文字)初期状態。ブロック内の「▼ ボタンの文字」欄に表示したい文言を入力する(未入力の場合は「詳しく見る」と表示される)。右側に「+」マークが表示され、開いた状態では回転して「×」の向きになる
画像「▼ クリック用の画像」欄で、PC用・SP用(767px以下で表示)をそれぞれ「画像を選択」から設定する。SP用画像は未設定でもよく、その場合はPC用画像がそのまま使われる(PC/SP別画像ブロックと同じ仕組み)

1つのアコーディオンにつき、クリック部分は「ボタン(文字)」か「画像」のどちらか一方です。画像を選んだ場合、ボタンの文字入力欄は使われません(入力しても表示されません)。

登録の手順

  1. ブロックエディタで本文中に新しいブロックを追加し、「アコーディオン(開閉)」を選択する(検索窓に「アコーディオン」と入力すると出てくる)
  2. 右サイドバーの「クリック部分(トリガー)の設定」で、クリックする部分(ボタンまたは画像)を選ぶ
  3. ブロック内の「▼ 開いたときに表示する内容」の枠の中に、開いたときに見せたい内容を作る(段落・画像・リストなど、通常のブロックを自由に組み合わせ可能)
  4. 必要であれば「最初から開いた状態で表示する」を有効にする(初期状態はオフ=閉じた状態で表示)
  5. 保存・公開する

開いたときに表示する内容を空欄のままにしないでください。中身が空だと、クリックしても何も表示されません。

開閉の動き

  • クリックすると、その場でなめらかにスライドしながら開閉します。一瞬でパッと切り替わる仕様ではありません
  • 1ページに何個置いても、それぞれ独立して開閉します(1つ開いても、他のアコーディオンが閉じることはありません)
  • 閉じている間は、中身は完全に非表示になります(枠線や文字がうっすら見えることはありません)
  • 画像をクリック部分にした場合、タップしても画像やページが拡大表示されることはありません

注意点

比較表の横スライド(カルーセル)表示は、このアコーディオンとは別の機能です。横スライド表示については別途ご相談中で、今回の対応には含まれていません。混同しないようご注意ください。

クリック部分の種類(ボタン/画像)は、あとから変更しても問題ありません。右サイドバーの設定を切り替えるだけで、その場で表示が切り替わります。

アクセス解析(開いた回数の計測)は行われません。何回開かれたかを管理画面で確認する機能は現在ありません。計測が必要な場合は制作担当にご相談ください。


困ったときの確認先

症状まず確認すること
クリックしても開閉しないページを再読み込みしてみてください。特定のページでのみ起きる場合は、そのページのURLを添えて制作担当にご連絡ください
画像を追加したのに、クリックする部分が見当たらないブロックの種類が「アコーディオン(開閉)」になっているか確認してください。通常の「画像」ブロックを追加しただけでは開閉機能は付きません
開閉が一瞬でパッと切り替わる(なめらかに動かない)ブラウザにキャッシュが残っている可能性があります。再読み込み(キャッシュの強制更新)をお試しください
「開いたときに表示する内容」を入れたのに何も出ない中身のブロックが空欄のまま保存されていないか確認してください

上記で解決しない場合は、「どのページで」「何をしたら」「どうなったか」の3点を添えて制作担当に連絡してください。