SWELLのアコーディオンブロックの使い方｜作り方と活用例

2026年10月25日

※本記事はアフィリエイト広告を含む記事へのリンクを含みます。

補足説明を入れていたら、記事がどんどん長くなって読みにくくなったと悩んでいませんか。私も細かい説明をすべて本文に書いていた時期があり、読者が途中で離れてしまうことが多かったんです。

この記事では、SWELLの「アコーディオン」ブロックの使い方を初心者向けにわかりやすく解説します。実際に記事をすっきりさせた体験も交えるので、読みながら進めれば、情報量を保ったまま読みやすい記事を作れます。

※これからSWELLを導入する方へ：SWELLは買い切り型のWordPressテーマで、追加費用の心配がありません。この記事を見ながら進めれば、初心者でも迷わずおしゃれなブログを作れます。

➡️【公式】SWELLの公式サイトはこちら

デザインに悩む時間を減らして、記事作りに集中できます。

ニャフィ

記事が長くなりすぎて、読みにくいのにゃ…

たいがブログ

情報を削るのも、もったいないですよね。

ニャフィ

開いたり閉じたりする仕組みって難しそうだにゃ…

たいがブログ

ブロックを追加するだけの手順を、5つに分けて解説しますね。

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

アコーディオンブロックは、タイトルをクリックすると中身が開閉するSWELLの装飾ブロックです。必要な人だけが開いて読めるので、記事を短く見せながら情報をしっかり届けられます。

筆者は補足説明をアコーディオンにまとめてから、記事の見た目がすっきりして読み進めてもらいやすくなったと感じています。「全員に必要ではない情報」をたたむだけで、記事の印象は大きく変わります。

クリックで中身を開閉できる

アコーディオンは、普段はタイトルだけが表示され、クリックすると中身が開きます。用語の解説や細かい手順など、読み飛ばしてもいい情報をまとめるのに便利です。

FAQブロックや「詳細」ブロックとの違い

Q&A形式ならSWELLの「FAQ」ブロックが向いています。WordPress標準の「詳細」ブロックでも開閉できますが、SWELLのアコーディオンのほうがデザインが整っていて見栄えがよいです。

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

アコーディオンは、ブロックを追加してタイトルと中身を入力するだけで作れます。ただし、何をたたむかを間違えると逆効果になるので、使いどころを押さえておきましょう。

筆者は以前、大事な結論までアコーディオンの中に入れてしまい、ほとんど読まれませんでした。読者に必ず伝えたい内容は、たたまずに本文に書くのが鉄則です。

たたんでもいい情報に使う

アコーディオンに向いているのは、用語の説明・詳しい補足・参考情報などです。知っている人は読み飛ばせる情報をたたむと、記事全体のテンポがよくなります。

タイトルで中身を想像できるようにする

タイトルが曖昧だと、読者は開くかどうか判断できません。「パーマリンクとは？」のように、開く前に中身がわかるタイトルを付けましょう。

STEP

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

記事の編集画面で「＋」ボタンを押し、「アコーディオン」と検索して追加します。標準の「詳細」ブロックと間違えないよう、SWELLのブロックを選びましょう。

STEP

タイトルを入力する

アコーディオンのタイトル部分に、開く前に表示される見出しを入力します。疑問形や「〜の詳しい手順」などにすると、開いてもらいやすくなります。

STEP

中身を入力する

開いたときに表示される中身の部分に、文章やリスト、画像を入れます。中にも普通のブロックを自由に追加できるので、詳しい説明もまとめられます。

STEP

項目を追加する

複数の項目をまとめたいときは、アコーディオンの項目を追加します。同じ種類の情報を並べると、読者が目的の項目を探しやすくなります。

STEP

プレビューで開閉を確認する

プレビューで、タイトルをクリックして正しく開閉するか確認します。スマホでもタップしやすいかをあわせてチェックしておきましょう。

アコーディオンブロックの活用例

アコーディオンは、読者によって必要な情報が違うときに特に役立ちます。ここでは、実際に使って効果を感じた活用例を紹介します。

筆者は初心者向けの用語解説をアコーディオンにまとめるようにしました。慣れている読者は読み飛ばし、初心者だけが開いて確認できるので、どちらの読者にもストレスのない記事になったと感じています。

用語解説をたたんでおく

「サーバー」「ドメイン」などの専門用語の説明をアコーディオンにまとめると、本文の流れを止めずに補足できます。初心者にも上級者にも読みやすい記事に仕上がります。

詳しい手順や参考情報をまとめる

本文では要点だけを伝え、細かい操作手順や画面の説明はアコーディオンに入れておく方法も便利です。知りたい人だけが深く読める構成になります。

アコーディオンを使うときの注意点

結論や大事なポイントはたたまない
タイトルで中身がわかるようにする
Q&A形式なら「FAQ」ブロックを使う
スマホでタップしやすいか確認する

よくある質問

最初から開いた状態で表示できますか？: 設定パネルから、項目ごとに初期状態を開いた状態にできます。特に読んでほしい項目だけ開いておく、といった使い方も可能です。
閉じている中身も検索エンジンに読まれますか？: 中身もページ内にあるため、基本的には読み取られます。ただし、記事の結論など大切な内容は、たたまずに本文に書いておくほうが安心です。
FAQブロックとはどう使い分ければいいですか？: 質問と回答の形式ならFAQブロック、それ以外の補足や手順をたたみたいならアコーディオンが向いています。内容の形で選びましょう。
開閉のアイコンは変えられますか？: 設定パネルから、アイコンの種類を選べます。サイトの雰囲気に合わせて選ぶと、記事全体の統一感が出ます。