こんにちは "osaboo"
です。"@osaboo_Bot"
SWELL 詳細ブロックの使い方｜アコーディオンとの違いを徹底比較！
SWELLの「詳細ブロック」の使い方と、アコーディオンとの違い・使い分けを初心者向けにわかりやすく解説します。
Question詳細ブロックって何ができるの？
アコーディオンとの違いがよくわからない…
結局どっちを使えばいいの？
記事をスッキリ見せる方法が知りたい
SWELLで記事を作っていると、
「内容を折りたたんでスッキリ見せたい」と感じる場面は多いですよね。
そんなときに便利なのが、**「詳細ブロック」と「アコーディオンブロック」**です。
どちらも似た機能ですが、
使い方や役割を正しく理解していないと、かえって読みにくい記事になってしまうこともあります。
この記事では、それぞれの特徴や違いを整理しながら、
どの場面でどちらを使うべきかをわかりやすく解説します。
記事をスッキリ見せつつ、読まれる構成にしたい方はぜひ参考にしてください。
こんな人におすすめ！
- SWELLを使い始めたばかり
- 記事の見やすさを改善したい
- 詳細ブロックとアコーディオンの違いを理解したい
- 読者にとって読みやすい記事を作りたい
この記事でわかること！
- 詳細ブロックの基本的な使い方
- アコーディオンブロックとの違い
- それぞれのメリット・デメリット
- 目的別の使い分けのコツ
「これなら続けられそう」と思えるテーマを選ぶのが、実は一番重要です。
目次 "Contents"
結論：どっちを使うべき？
シンプルに使うなら「詳細ブロック」
デザインや見せ方にこだわるなら「アコーディオンブロック」がおすすめです。
この違いを理解するだけで、記事の読みやすさ・離脱率・SEO評価が大きく変わります。
SWELL 詳細ブロックとは？
詳細ブロックは、クリックすると内容が開閉する「折りたたみ表示」ブロックです。
本文をすべて見せるのではなく、必要な人だけが情報を見られる構造を作れるのが特徴です。
主な用途
- 補足説明
- 注意点
- 詳細な手順
- 追加情報
詳細ブロックの使い方
① 詳細ブロックの追加手順
STEP
ブロックを追加する
投稿（エディター）画面で『＋（ブロックインサーター）』をクリックします。
- ＋（ブロックインサーター）
STEP
ブロックタブから「詳細」を選択する
ブロック挿入ツールが『ｘ』切り替わり 以下の画面が表示されます。
テキストから『詳細』を選択して投稿（エディター）画面に追加します。
STEP
詳細ブロックの追加完了
投稿（エディター）画面に『詳細』ブロックが表示されます。
挿入直後では、以下のように表示されます。
② タイトルと内容の設定
- タイトル → クリック部分の見出し
- コンテンツ → 開いたときに表示される内容
タイトル
「要約を書く…」の部分（赤枠）にタイトルを入力します。
コンテンツ
「/」を入力してブロックを選択し、テキストや画像でコンテンツを作成します。
③ 基本設定
設定メニューは、投稿（エディター）画面の右側にある「設定 ＞ ブロック」タブから確認できます。
表示されていない場合は、以下の画面を参考に右上の設定アイコンをクリックしてください。
詳細の設定方法（設定）
詳細設定項目
- 詳細（設定タブ）
- 設定
-
- デフォルトで開く
- ON / OFF（ラジオボタン切り替え）
- デフォルトで開く
- ブロック下の余白量
-
- ドロップダウンメニューから選択
- 高度な設定
-
- HTMLアンカー
- 今回は省略します。
- 追加 CSS クラス
- 今回は省略します。
- NAME 属性
- 同じnameにすると、他を開くと自動で閉じます。
- 許可されたブロック
- この中で使えるブロックを指定します。
- HTMLアンカー
詳細の設定方法（スタイル）
詳細設定項目
- 詳細（スタイルタブ）
- 色
-
- テキスト
- カラーパレットから選択
- 背景
- カラーパレットから選択
- テキスト
- タイプグラフィ
-
- ︙で開きます。
- 今回は省略します。
- ︙で開きます。
- フォントサイズ
-
- S / M / L / XL / XXL（選択 / 切替）
詳細ブロックのメリット
- 記事が読みやすくなる
- 長い説明を隠せるため、本文がスッキリします。
- ユーザー体験（UX）が向上
- 必要な情報だけを選んで読めるため、離脱防止につながります。
- SEOにも間接的に効果あり
- 滞在時間UP
- スクロール率UP
詳細ブロックとアコーディオンブロックとの違い
デフォルトの表示や動作の速さを確認できます。クリックしてみてください。
詳細ブロック
詳細ブロック
テキスト（詳細ブロック）
テキスト（詳細ブロック）
テキスト（詳細ブロック）
アコーディオンブロック
アコーディオンブロック
テキスト（スライドブロック）
テキスト（スライドブロック）
テキスト（スライドブロック）
| 項目 | 詳細ブロック | アコーディオン |
|---|---|---|
| 種類 | WordPress標準 | SWELL独自 |
| デザイン性 | シンプル | 高い |
| カスタマイズ | 少ない | 多い |
| 表示速度 | 軽い | やや重い |
| 装飾 | 最低限 | アイコン・装飾豊富 |
違いを一言で
- 詳細ブロック → シンプル・軽い
- アコーディオン → 見せるためのブロック
どっちを使うべき？迷ったときの結論
詳細ブロックがおすすめ
- 補足説明を入れたい
- 記事をスッキリさせたい
- シンプルに使いたい
アコーディオンがおすすめ
- FAQを作りたい
- デザインを重視したい
- 強調して見せたい
おすすめの使い方（実践）
詳細ブロックは「とりあえず使う」ではなく、
“どこで使うか”を意識するだけで記事の質が大きく変わります。
ここでは、すぐ使える実践パターンを紹介します。
パターン①：補足情報を隠す（基本）
本文にすべて書くと長くなりがちな補足は、詳細ブロックに入れてスッキリさせるのが基本です。
例
- 詳しい手順の補足
- 注意点の詳細説明
- ちょっとした豆知識
ポイント：「読まなくても理解できるけど、知りたい人には役立つ情報」を入れる→読みやすさUP
パターン②：手順の“補助説明”に使う
手順解説の記事では、本筋を邪魔しない形で補足を入れるのが効果的です。
例
手順① → 本文
↓
詳細ブロック → 補足解説
メリット：本文がスッキリする。初心者にもやさしい。
パターン③：クリックさせる導線にする
詳細ブロックは、「クリックさせる仕掛け」としても使えます。
例
- 「詳しくはこちら」
- 「気になる方はクリック」
- 「デメリットを見る」
ポイント：興味を引くテキストにすることでクリック率UP
パターン④：不安解消（CV前）
商品紹介やアフィリエイト記事では、購入前の不安を解消する場所として使うのが効果的です。
例
- よくある不安
- デメリットの補足
- 注意点
効果：信頼性アップ / CV率アップ
パターン⑤：FAQの“軽量版”として使う
アコーディオンを使うほどではない場合、詳細ブロックで簡易FAQを作るのもおすすめです。
例
Q. 初心者でも使えますか？
→ 詳細ブロック内で回答
適用：シンプルにまとめたい記事に最適
よくある質問
迷ったら“使いやすさ”で選ぶのが正解です。
まとめ！SWELL 詳細ブロックの使い方｜アコーディオンとの違いを徹底比較！
SWELLの詳細ブロックは、記事をスッキリ見せながら情報を整理できる便利な機能です。
一方で、アコーディオンブロックは デザイン性や見せ方に優れたブロックという違いがあります。
使い分けはシンプルで、
- シンプルに使う → 詳細ブロック
- 見せ方にこだわる → アコーディオン
と覚えておけばOKです。
どちらも「内容を折りたたむ」という点では同じですが、
目的に合わせて使い分けることが、読みやすい記事を作るポイントです。
まずは詳細ブロックから使ってみて、必要に応じてアコーディオンも取り入れていきましょう。
アコーディオンブロックの使い方もあわせてチェックしておくと、表現の幅が広がります。
あわせて読みたい
SWELLのアコーディオンブロックの使い方｜長い記事をスッキリ見せるコツと活用例
SWELLのアコーディオンブロックの使い方を初心者向けに解説。挿入方法・カスタマイズ・活用例までわかりやすく紹介し、長い記事をスッキリ見せるコツも解説します。詳細ブロックとの違いも解説。
