SWELLアコーディオンブロック｜読者にも優しい配慮がされている素敵なブロック 

SWELLのオリジナルブロック、アコーディオンブロックを紹介します。

---

SWELLのアコーディオンブロックでできること

アコーディオンブロックは、開閉できるコンテンツが作れるブロックです。

最初はコンテンツを閉じて非表示にしておき、読者のクリックやタップの操作に合わせてコンテンツを表示させることができます。

SWELL専用のブロック「アコーディオンブロック」では以下のような設定ができます。

それぞれ紹介します。

アコーディオンのデザインの変更

SWELLのアコーディオンブロックでは、以下の4種類のデザインを選ぶことができます。

• デフォルト
• シンプル
• 囲い枠
• メインカラー

アコーディオンの開閉アイコンの変更

SWELLのアコーディオンブロックでは、開閉アイコンも3種類から選択可能です。

アコーディオンを最初から開いておく

SWELLのアコーディオンブロックでは初期状態でアコーディオンを開いてコンテンツを表示させることもできます。

以下に実際のSWELLアコーディオンブロックを配置してみました。初期の開閉状態の違いを比較してみてください。

例えば、当サイトのSWELLサイト集でも、ページ上部に直近3回分の更新履歴を表示していますが、最新の更新分のみアコーディオンを敢えて開いておくようにしています。

タイトルを見出しタグにする

アコーディオンのタイトル部分をhタグ(見出し)にすることも可能です。

例えば、この機能を使ってアコーディオンのタイトル部分を見出しタグにすることで、以下画像のように目次に表示させることもできるので便利です。

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

アコーディオンブロックの使い方は、とてもシンプルで簡単です。

基本的な使い方は以下のとおりです。

細かい設定についても紹介します。

デザイン・アイコンの設定

アコーディオンのデザインや開閉アイコンの設定については公式サイトでも解説されているので参考にしてください。

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

特に難しい操作はなく、アコーディオンの親ブロックを選択した状態でサイドバーからそれぞれ選択するだけです。

デフォルトでアコーディオンを開く設定

アコーディオンを初期状態で閉じるか開くかの設定は、アコーディオンの子ブロック(項目ブロック)を選択した状態で、サイドバーから選択します。

タイトルのHTMLタグの設定方法

アコーディオンのタイトル部分のHTMLタグを変更して、質問部分を見出しタグなどに設定する方法は以下です。

アコーディオンブロックを選択した状態で「サイドバー」→「アコーディオン設定」→『タイトルのHTMLタグ』からお好みで選択する

読者に優しいSWELLアコーディオンブロックの仕様

最後に、サイト運営者側ではなく、サイト訪問者の方に対してのユーザビリティやアクセシビリティに考慮されたSWELLのアコーディオンブロックの仕様について一部参考まで紹介しておきます。

2022/10/26にリリースされたSWELLの2.7.0アップデートで対応された仕様です。それ以前のバージョンを利用されている方には当てはまらないので注意してください。

キーボード操作でアコーディオンを開閉できる

SWELLのアコーディオンブロックは、パソコンのEnterやSpaceキーでもアコーディオン開閉の操作ができるようになっています。

Tabキーでアコーディオンを選択することができるので、Tabキー(もしくはShift+Tab)でカーソルをアコーディオンに合わせてEnterキーでアコーディオンを開閉するといった操作ができるようになっています。

ページ内検索でアコーディオン内のテキストを探せる

ページ内検索をしたときに、アコーディオンの閉じられたコンテンツ内に該当するテキストがあった場合、ページ内検索にヒットし、アコーディオンが自動で開く仕様になっています。

アコーディオンの実装方法によっては、ページ内検索でヒットしなかったり、ヒットしてもアコーディオンが閉じたままで気づかないといったケースもあります。

サイト運営者視点では意外と気づきにくいポイントかもしれませんが、SWELLのアコーディオンブロックはこのような仕様になっていることを知っておくと良いかもしれません。

SWELLのアコーディオンブロックで見やすいコンテンツ作成を！

SWELLのアコーディオンブロックについて紹介しました。

アコーディオンは頻繁に使うことは無いかもしれませんが、気になる人にだけ見てほしいコンテンツなどが記事内にある場合には、重宝するブロックだと思います。

SWELLのアコーディオンブロックはデザイン性も良く、読者のアクセシビリティにも配慮された仕様になっているので、うまく活用すると見やすく分かりやすいコンテンツが作れるのかなと思います。

自分なりに工夫しながら活用していきましょう。

最後まで読んでいただきありがとうございました。

---

SWELL公式サイトはこちらからどうぞ…！

SWELLブロックエディターの関連記事

SWELL全般の関連記事