SWELLのアコーディオンブロックの使い方とカスタマイズのコツさえ押さえておけば、長文の記事でもかなり読みやすくなり、読者にも検索エンジンにもやさしいページを作れます。
読み終わるころには、「自分のブログならここでアコーディオンを使おう」と具体的にイメージできるようになるはずです。
ブログ収益化の教科書プレゼント
↓ ↓ ↓
SWELLアコーディオンブロックの概要とメリット
まずは、SWELLアコーディオンブロックがどんなブロックなのか、ざっくり全体像から整理していきます。
SWELLアコーディオンブロックでできること一覧
イメージしやすいように、SWELLのアコーディオンブロックでできる主なことを一覧にしてみました。
| 機能 | 内容 | こんなときに便利 |
|---|---|---|
| 開閉できるコンテンツ | タイトルをクリックすると本文が開閉する | 長い補足説明やQ&Aをコンパクトに見せたいとき |
| デザイン4種類 | デフォルト・シンプル・囲い枠・メインカラーから選べる | サイトの雰囲気に合わせて見た目をそろえたいとき |
| 開閉アイコン3種類 | ▲/▼・∧/∨・＋/−などのセットを選べる | 押せる場所を分かりやすくしたいとき |
| 初期状態の開閉 | 最初から開いた状態・閉じた状態を選べる | 重要な情報だけ開いて見せたいとき |
| タイトルの見出し化 | タイトル部分をh2〜h6などの見出しタグにできる | アコーディオンのタイトルを目次に表示させたいとき |
| ブロック内に他ブロックを挿入 | 画像・リスト・ボタンなども入れられる | リッチなFAQや細かい解説ボックスを作りたいとき |
見てもらうと分かる通り、「ただ文章を折りたたむためのブロック」というより、読者の読みやすさを意識して細かいところまで作り込まれたブロック、という印象に近いです。
なぜ長文記事と相性がいいのか
アコーディオンブロックが活きるのは、なんといっても長文記事です。
レビュー記事やハウツー記事を書いていると、「詳しく書いておきたいけど、メインの流れを邪魔してしまう」という情報が必ず出てきます。例えば、こんなパターンです。
- 商品レビューの細かいスペック解説
- 補足の注意点や、例外的なケースの説明
- 「よくある質問」や問い合わせ対策のQ&A
こういった情報をそのまま本文にずらっと並べると、スマホで読んだときにスクロール量が増え、読む気力が削られてしまいます。
そこでアコーディオンブロックの出番です。メインの流れを邪魔しないようにしつつ、「詳しく知りたい人だけ開いて読める」という形にまとめておくと、ぱっと見の印象もだいぶスッキリします。
私自身も長めの記事を書くときは、「本文の理解に必須ではないけれど、あると親切な説明」は、アコーディオンに入れることが多いです。その方が、あとから読み返したときも構成がきれいに見えるんですよね。
【深呼吸タイム】 稼ぐために必要な3つのポイントを知っていますか？ これら全部を暴露します。
SWELLアコーディオンブロックの基本的な使い方ステップ
ここからは、SWELLアコーディオンブロックの使い方を、編集画面の動きに沿って順番に見ていきます。特別な知識はほとんどいらないので、一度流れを覚えてしまえばすぐ慣れるはずです。
ブロックを挿入する3つの方法
アコーディオンブロックを呼び出す方法はいくつかあるので、自分がやりやすいパターンを1つ覚えておけばOKです。
| 方法 | 操作の流れ | おすすめ度 |
|---|---|---|
| ＋ボタンから追加 | 「＋」→「ブロックを追加」から「アコーディオン」と検索して選択 | 初心者向き。まずはここからで十分 |
| /accordion ショートカット | 段落の先頭で「/accordion」または「/アコーディオン」と入力 | キーボード操作が好きな人向け。慣れると最速 |
| 既存ブロックを複製 | すでに作ったアコーディオンブロックをメニューから複製 | 同じデザインを量産したいときに便利 |
私のおすすめは、ショートカットで呼び出す方法です。慣れるまでは少し違和感がありますが、何度か使っているうちに、マウスで探すよりずっと早く感じてくるはずです。
タイトルとコンテンツの書き分け方
アコーディオンブロックは「タイトル」と「コンテンツ（本文）」の2つのエリアで構成されています。ここをどう書き分けるかで、読者のクリック率がかなり変わります。
- タイトルは「質問・要約・結論」を短くまとめるイメージで書く
- コンテンツ部分には、タイトルを補う説明や手順、図解などを入れる
- FAQ形式の場合は「タイトル＝Q」「コンテンツ＝A」と考えると分かりやすい
- スマホで見たときに折り返しが増えないよう、タイトルはできれば20文字前後を目安にする
特にFAQでは、「タイトルを見ただけで、何の質問かおおよそ分かる状態」を意識すると、目次や一覧からでも選びやすくなります。
親ブロックの設定と複数アコーディオンの追加
アコーディオンブロックは、1つの「親ブロック」の中に複数の項目をまとめて入れられます。設定をいじるときに、子ブロックと親ブロックが切り替わる感覚に最初は戸惑うかもしれません。
- アコーディオンの右上あたりに表示される「親ブロックを選択」をクリックすると、全体の枠（親）を選べる
- 親ブロック側では「スタイル」「アイコン」「初期開閉」など、全体の見た目をまとめて変更できる
- 項目を追加したいときは、既存のアコーディオンの下に出ている「＋」ボタンから増やせる
- 1つのアコーディオンに項目を詰め込みすぎると読みにくくなるので、章ごとに分けるのもアリ
このあたりの操作に一度慣れておくと、SWELLアコーディオンブロックを使ったカスタマイズもぐっとやりやすくなります。
【ちょっと一息♪】 私の妻がどうやって7日で初報酬を得て5万円の不労所得を得られるようになったか？
その全貌を知りたくありませんか？
SWELLアコーディオン カスタマイズ（標準設定編）
次に、CSSをいじらなくてもできる範囲のカスタマイズを見ていきます。SWELLは標準機能の時点でかなり柔軟なので、まずはここをしっかり使いこなしておきたいところです。
デザイン4種類の比較と選び方
SWELLのアコーディオンブロックには、「デフォルト」「シンプル」「囲い枠」「メインカラー」という4種類のスタイルが用意されています。
| スタイル名 | 見た目の特徴 | 向いている用途 |
|---|---|---|
| デフォルト | ほどよい装飾と背景で、バランスの良い標準デザイン | ブログ全般、レビュー記事、ハウツー記事など幅広く |
| シンプル | 装飾少なめでフラット。文字を主役にできる | ミニマルなデザインのブログや、文字量が多い記事 |
| 囲い枠 | 全体が枠線で囲われた、ボックス風のデザイン | 注意点のまとめ、重要な補足、マニュアル系の説明 |
| メインカラー | サイトのメインカラーがしっかり出るスタイル | サービス紹介やLP風ページ、CTA付近のQ&Aなど |
最初は「デフォルト」か「シンプル」にしておき、サイト全体のトーンに合わせて囲い枠やメインカラーへ変えていくと、違和感なくなじませやすいです。
アイコン3種類と初期開閉設定のコツ
見た目の印象を思った以上に左右するのが、開閉アイコンと初期開閉の設定です。
| アイコン | 印象 | 向いている記事の例 |
|---|---|---|
| ▲ / ▼タイプ | 一番見慣れた形で直感的に分かる | ブログ全般、Q&A、ヘルプページ |
| ∧ / ∨タイプ | 少しスタイリッシュで軽い雰囲気 | デザイン重視のサイトやポートフォリオ |
| ＋ / −タイプ | 開閉状態の違いがはっきり分かる | FAQや商品詳細、重要な補足説明 |
初期開閉を決めるときは、次のような基準で考えると迷いにくいです。
- どうしても読んでほしい重要情報 → 最初から開いた状態にする
- 知りたい人だけ見ればよい補足情報 → 最初は閉じた状態にしておく
- 複数あるうち1つだけ開いた状態にしたいときは、一番重要な項目を先頭に置いて、それだけ開いておく
特にスマホでは、最初から開きすぎていると結局スクロールが長くなってしまうので、開いておく量はほどほどにしておくのがおすすめです。
タイトルを見出しタグにして目次に表示させる
SWELLでは、アコーディオンのタイトル部分をh2〜h6などの見出しタグに設定できます。これを活用すると、アコーディオンのタイトルを目次にも表示できるようになります。
- タイトル部分を選択し、右側の設定パネルから「タイトルのHTMLタグ」を変更する
- SWELL標準の目次や目次プラグインの設定によっては、そのまま目次に反映される
- 通常の見出しとのバランスを取るため、h3やh4など一段下の階層にしておくと構造が分かりやすい
「目次から気になる質問をタップ → 対応するアコーディオンまでジャンプ → 開いて中身を読む」という動線を作ると、読者にとってもストレスが少ない構成になります。
【稼げるキーワード教えます】 ★ちょっとだけ宣伝させてください★ 「ブログで10万」と聞くと、 と思われがちですが、実は「勝ちパターン」を知っているかどうかだけなんです。
▼ ▼ ▼
CSSでSwellアコーディオンをカスタマイズするアイデア
標準機能に慣れてきたら、次はCSSで見た目を少しだけいじってみるのも楽しいです。ここでは、具体的なコードというより「どんなカスタマイズの方向性があるか」をイメージしやすいように整理してみます。
よく使うカスタマイズパターン例
よくあるアコーディオンのカスタマイズをざっくりまとめると、次のようなパターンが多いです。
| カスタマイズ内容 | 効果・見え方 | ポイント |
|---|---|---|
| タイトル背景色の変更 | 質問部分だけ色を変えて、Q&A感を出せる | メインカラーを少し薄めた色にすると、強調しすぎず馴染みやすい |
| 枠線と角丸の調整 | ボックスをカード風にして、やわらかい印象に | border-radiusを少し上げるだけでも今っぽい見た目になる |
| ホバー時の色変化 | マウスを乗せたときに、背景色がほんの少し変わる | 「ここは押せるところだよ」と直感的に伝えられる |
| アイコン色・サイズの変更 | ＋や▼のアイコンを少し大きくして目立たせる | font-sizeとcolorをセットで調整すると、浮かずにまとめやすい |
| Q/Aラベルの追加 | タイトル左に「Q」「A」の小さなバッジを付ける | 擬似要素（::beforeなど）でラベルを表示するのが定番 |
タイトル部分にだけ薄い背景色を付けたり、Qラベルを入れたりするだけでも、見た目の印象がガラッと変わります。CSSが得意でなくても、サンプルを少しずつ書き換えて試してみると感覚がつかめてきます。
カスタマイズするときの注意点
一方で、CSSでのカスタマイズはやり方を間違えると、あとから自分の首を絞めることにもなります。最低限、次のポイントは意識しておきたいところです。
- テーマ本体のファイルは触らず、子テーマの追加CSSや「カスタマイズ → 追加CSS」にまとめて書く
- サイト全体で共通させたいデザインと、特定の記事だけで使いたいデザインは、クラス名を分けて管理する
- パソコンだけでなく、スマホ表示でも必ずデザインを確認する
- HTML構造に強く依存した指定（子要素の階層を細かく指定しすぎるなど）は、テーマの仕様変更に弱いのでほどほどにする
「あとから見ても何をしているか自分で分かるか」が、一つの目安になります。コメントを付けておいたり、用途ごとにまとめて書いたりしておくと安心です。
コピペする前に決めておきたいこと
ネット上には、SWELLのアコーディオン用CSSサンプルがたくさんありますが、何も考えずに貼り付けると、かえってデザインがちぐはぐになることもあります。
コピペする前に、少なくとも次のような点は決めておくと失敗しにくいです。
- どのページで使うカスタマイズか（サイト全体か、特定のカテゴリー・記事だけか）
- どの種類のアコーディオンに適用するか（FAQ用、レビュー用など）
- サイト全体の雰囲気（シンプル、ポップ、ビジネス寄り）とマッチしているか
- 既存のボックスやボタンのデザインと比べて浮いていないか
そのうえで、「標準機能にちょっと味付けする」くらいのカスタマイズから始めると、安全に調整していけます。
用途別：SWELLアコーディオンブロックの活用アイデア
続いて、どんな場面でアコーディオンブロックを使うと効果的かを見ていきます。使いどころのイメージが湧くと、記事構成の段階からアコーディオン前提で設計できるようになります。
FAQ・Q&Aで使うときのポイント
アコーディオンといえば、やはりFAQやQ&Aとの相性がとても良いです。質問と答えのペアをいくつも並べると、どうしても縦に長くなりがちなので、折りたたんでおくと一覧性がグッと上がります。
| 設定・工夫 | 理由・効果 |
|---|---|
| タイトルを質問文そのものにする | 目次や一覧を見ただけで、どんな質問か一目で分かる |
| 初期状態はすべて閉じておく | 興味のある質問だけ開けるので、一覧性が高くなる |
| デザインはシンプル〜デフォルト系にする | テキストが主役になるので、読みやすさが損なわれにくい |
| アイコンは＋/−や▲/▼など分かりやすいものに | 「ここを押すと開く」と直感的に伝えられる |
SWELLには、検索結果でリッチリザルトを狙えるFAQブロックも用意されています。検索結果での見え方まで重視したいならFAQブロック、ページ内の読みやすさやカスタマイズ性を優先したいならアコーディオンブロック、と役割で分けて考えるとスッキリします。
商品レビューや比較記事での使い方
レビューや比較記事では、「読む人によって必要度が違う情報」がけっこうあります。そういった部分をアコーディオンに入れておくと、それぞれの読者が自分に必要なところだけを深掘りしやすくなります。
- 商品の詳細スペックや、細かい仕様の説明をアコーディオンにまとめる
- 購入前によく聞かれる質問を「よくある質問」としてアコーディオンで並べる
- 比較表の下に「さらに詳しい比較ポイント」をアコーディオンで補足する
たとえば、ざっくり比較は本文と表で済ませておき、細かい違いはアコーディオンに入れておくと、ライトに読みたい人とじっくり検討したい人の両方を取りこぼしにくくなります。
レッスン・講座・サービス紹介ページでの使い方
オンライン講座やサービス紹介ページなどでも、アコーディオンはかなり役立ちます。申し込み前の人は、「料金」「期間」「サポート内容」「申し込み後の流れ」など、知りたいことがバラバラだからです。
- 「受講前によくある不安」「サポート内容の詳細」「講師プロフィールの詳細」などをアコーディオンにまとめる
- 料金や申込方法など、もっとも大事な情報はアコーディオンに入れず、ページ前半でしっかり見せる
- 「お申し込みまでの流れ」をアコーディオンで1ステップずつ見せると、受講後のイメージがしやすくなる
このように、用途ごとにアコーディオンの使い方を決めておくと、「とりあえず入れてみる」ではなく、狙いを持って配置できるようになります。
★ブログでは公開できない裏情報★ 例えば、 などをこっそり暴露しています。ぜひ公開停止する前に受け取ってください。
私の発行するメルマガではブログでは公開できない秘匿性が高い特別な情報を発信しております。
よくある質問｜SWELLアコーディオンブロックとカスタマイズQ&A
最後に、SWELLアコーディオンブロックの使い方やカスタマイズについて、よく聞かれそうな質問をまとめておきます。
Q1. SWELLアコーディオンブロックの使い方は難しくないですか？
A. 基本的な使い方はとてもシンプルで、慣れてしまえば難しくありません。
- ブロックを挿入する（＋ボタンかショートカットで呼び出す）
- タイトルとコンテンツにそれぞれテキストや画像を入れる
- 親ブロックでデザインやアイコン、初期開閉の設定をする
まずは1つだけアコーディオンを作ってみて、動きに慣れていくのがおすすめです。細かいカスタマイズは、そのあとで十分間に合います。
Q2. SWELLアコーディオン カスタマイズにはプラグインが必要ですか？
A. 基本的なカスタマイズであれば、追加のプラグインは必要ありません。
SWELL本体だけで、デザイン4種類、アイコン3種類、初期開閉、タイトル見出し化など、かなり幅広く調整できます。見た目をもう少し自分好みに寄せたい場合でも、CSSを少し追加するだけで対応できるケースがほとんどです。
アコーディオン専用のプラグインも世の中にはありますが、ブロックが増えすぎると管理が大変になってきます。まずはSWELLのアコーディオンブロックをしっかり使い倒してから、足りないところがあればプラグインを検討する、くらいのスタンスがおすすめです。
Q3. FAQブロックとアコーディオンブロック、どちらを使うべきですか？
A. 目的によって使い分けるのがおすすめです。
- 検索結果でFAQのリッチリザルト表示を狙いたい → FAQブロック
- ページ内の読みやすさやデザインの自由度を重視したい → アコーディオンブロック
両方を合わせて使うのもアリで、例えば「特に重要な3〜5問だけFAQブロックで構造化データ対応」「それ以外の細かい質問はアコーディオンブロックでまとめる」といった形にすると、SEOとユーザー目線のバランスが取りやすくなります。
まとめ｜SWELLアコーディオンブロックの使い方とカスタマイズ
この記事の内容をおさらいしておきます
- SWELLのアコーディオンブロックは、クリックで開閉できるブロックで、長文記事でも読みやすいページ構成を作るのにぴったりです。
- 基本的な使い方は、「ブロックの挿入」「タイトルとコンテンツの入力」「親ブロックの設定」の3つを押さえれば十分です。
- デザイン4種類・アイコン3種類・初期開閉・タイトル見出し化など、標準機能だけでもカスタマイズの幅はかなり広く用意されています。
- CSSを少し足すだけで、Q/Aラベルの追加やホバー時の色変化など、オリジナル感のあるアコーディオンデザインに仕上げることもできます。
- FAQブロックとは役割が違うので、「検索結果での見せ方」と「ページ内の読みやすさ」の両方を意識しながら、うまく使い分けていくのがコツです。
今日からできる最初の一歩としては、「すでに書いてある長めの記事を1本選び、補足説明やQ&Aの部分だけSWELLのアコーディオンブロックにまとめてみる」ことをおすすめします。
実際に1記事でも入れ替えてみると、画面のスッキリ感や読者の動き方がガラッと変わるので、ぜひ試してみてください。
★初心者さん必見★ 「あと3ヶ月早くこの情報を知りたかった…」 そうならないために、今すぐ実践したいノウハウをギュッと一つのメルマガに詰め込みました。 無料で読めるうちに受け取っておいてください。
記事を読んだらコチラ
▼ ▼ ▼
