MENU
おすすめの記事
WordPressテーマ『SWELL』を使った素敵なサイト、ブログを集めました!!

2024年4月にリニューアルしました!絞り込み検索やお気に入り機能もあります。ぜひ見ていってください!

さとしん
WordPressとSWELLが好きなブロガー。
ブロックエディターに出会ってWordPressが楽しくなりました。
WordPressのこと、SWELLのこと、ブロックエディターのことを熱く語るブログです。
【2024/9/22】SWELLサイト事例集を更新しました!→【20240922】SWELLサイト集更新!→クリックタップ

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

当ページのリンクには広告が含まれています。
SWELLアコーディオンブロック|読者にも優しい配慮がされている素敵なブロック 
  • URLをコピーしました!

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

この記事の内容
  • SWELLのアコーディオンブロックでできること
  • SWELLのアコーディオンブロックの使い方
  • 読者に優しいSWELLのアコーディオンの仕様

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

  1. デザインを4種類から選択
  2. 開閉ボタンのアイコンを3種類から選択
  3. 初期状態の開閉状態の選択

※詳しくは「SWELLのアコーディオンブロックでできること」で解説

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

  1. キーボードでアコーディオンの開閉ができる
  2. ページ内検索でアコーディオン内部のテキストもヒットする

※詳しくは「読者に優しいSWELLアコーディオンブロックの仕様」で解説

さとしん

SWELLのアコーディオンブロックはとても簡単に使えるので、ぜひ活用してみてください…!


SWELLのブロックエディターガイド

SWELLの高機能なブロックエディターを快適に使うためのガイドを作りました。

目次

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

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

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

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

  • デザインを4種類から選択
  • 開閉ボタンのアイコンを3種類から選択
  • 初期状態の開閉状態の選択
  • タイトルを見出しタグにする

それぞれ紹介します。

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

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

  • デフォルト
  • シンプル
  • 囲い枠
  • メインカラー
SWELLのアコーディオンブロック-1
デフォルトスタイル
SWELLのアコーディオンブロック-2
シンプルスタイル
SWELLのアコーディオンブロック-3
囲い枠スタイル
SWELLのアコーディオンブロック-4
メインカラースタイル

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

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

SWELLのアコーディオンブロック-5
▲/▼アイコン
SWELLのアコーディオンブロック-6
∧/∨アイコン
SWELLのアコーディオンブロック-7
+/-アイコン

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

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

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

最初は閉じた状態

SWELLのアコーディオンブロック

最初から開いた状態

SWELLのアコーディオンブロック

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

SWELLのアコーディオンブロック-8

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

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

2023/6/3のSWELL ver. 2.7.6アップデートで追加された機能です。

公式

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

SWELLのアコーディオン-26
さとしん

このように柔軟な使い方ができるのでSWELLのアコーディオンブロックはとても重宝しています…!

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

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

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

STEP
メインコンテンツエリアで+ボタンをクリック
SWELLのアコーディオンブロック-9
STEP
「アコーディオン」を探してクリック
SWELLのアコーディオンブロック-10
ちなみに…

ブロックエディターでは、段落ブロック内に「/ + ブロック名」を入力することでブロックを検索して呼び出すことができます。

SWELLボタンブロックの場合は、以下の名称でブロックを呼び出すことができます。

  • /accordion
  • /アコーディオン
さとしん

「/」の操作は覚えておくと便利ですよ…!

詳しくは「ブロックエディターの記事執筆を快適にするショートカットまとめ!」で紹介しています。

STEP
アコーディオンのタイトルを入力
SWELLのアコーディオンブロック-11
STEP
アコーディオンのコンテンツ部分を入力

リストや画像、テーブルなど自由にブロックを挿入可能です。

SWELLのアコーディオンブロック-12
STEP
2つ目以降のアコーディオンの配置

もし、アコーディオンを複数並べて配置したい時は「+」ボタンをクリック

SWELLのアコーディオンブロック-13
STEP
サイドバーから細かい設定をする
SWELLのアコーディオンブロック-14

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

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

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

>>

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

SWELLのアコーディオンブロック-14
親ブロックの選択方法

親ブロックの選択は、アコーディオンブロック右上の「親ブロックを選択」ボタンをクリックすればOKです。

SWELLのアコーディオンブロック-15
みにしん

ちなみに、この「親ブロックを選択」ボタンが用意されているのもSWELLらしい気配りでありがたい…!

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

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

SWELLのアコーディオンブロック-16
さとしん

こちらもクリック操作だけで設定ができるのでとても簡単ですね…!

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

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

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

SWELLのアコーディオン-27

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

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

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

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

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

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

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

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

さとしん

僕はこの仕様がとてもお気に入りです…!

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

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

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

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

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

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

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

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


はこちらからどうぞ…!

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

WordPress本体とSWELLのブロックエディター機能を使いこなすためのSWELL記事の書き方ガイド↓↓

SWELL全般の関連記事

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

この記事が気に入ったら
いいね または フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次