こんにちは "osaboo"
です。"@osaboo_Bot"
SWELLのアコーディオンブロックの使い方｜長い記事をスッキリ見せるコツと活用例
SWELLのアコーディオンブロックを使えば、長い記事でもスッキリ整理でき、読みやすさと情報量を両立できます。
Question補足を入れると、記事がどんどん長くなる…
全部見せるとゴチャつくけど、削るのも違う気がする
読みやすさと情報量、どうやって両立すればいい？
「記事が長くて読みにくい…」
「情報は減らしたくないけど、スッキリ見せたい」
「アコーディオンってどう使えばいいの？」
そんなときに便利なのが、SWELLのアコーディオンブロックです。
クリックで内容を開閉できるため、必要な情報だけを見せながら、記事全体をコンパクトに整理できます。
この記事では、SWELLのアコーディオンブロックの使い方から、カスタマイズ方法・活用例まで初心者向けにわかりやすく解説します。
こんな人におすすめ！
- 記事が長くなって読みにくいと感じている人
- 補足情報をうまく整理したい人
- SWELLの機能をもっと活用したい人
- 読みやすいブログを作りたい人
この記事でわかること！
- SWELLアコーディオンブロックの基本的な使い方
- 項目の追加方法やカスタマイズ手順
- 読みやすくするための活用例
- 詳細ブロックとの違いと使い分け
「これなら続けられそう」と思えるテーマを選ぶのが、実は一番重要です。
目次 "Contents"
SWELLアコーディオンブロックとは？
SWELLのアコーディオンブロックは、クリックすると内容が開閉するブロックです。
普段は内容を隠しておけるため、記事をスッキリ見せながら情報量を減らさずに済むのが最大のメリットです。
メリット
- 長文でも読みやすくなる
- 必要な人だけに情報を見せられる
- 記事の離脱を防げる
アコーディオンブロックの使い方
① アコーディオンブロックの追加手順
STEP
ブロックを追加する
投稿（エディター）画面で『＋（ブロックインサーター）』をクリックします。
- ＋（ブロックインサーター）
STEP
ブロックタブから「アコーディオン」を選択する
ブロック挿入ツールが『ｘ』切り替わり 以下の画面が表示されます。
SWELLブロックから『アコーディオン』を選択して投稿（エディター）画面に追加します。
STEP
アコーディオンブロックの追加完了
投稿（エディター）画面に『アコーディオン』ブロックが表示されます。
挿入直後では、以下のように表示されます。
② タイトルと内容の設定
- タイトル → クリック部分の見出し
- コンテンツ → 開いたときに表示される内容
タイトル
「テキストを入力…」の部分（赤枠）にタイトルを入力します。
コンテンツ
「/」を入力してブロックを選択し、テキストや画像でコンテンツを作成します。
③ 項目を追加する方法
「＋」からアコーディオン項目を追加することで、複数の項目を作れます。
カスタマイズ方法
アコーディオンブロックは、デザインも簡単に変更できます。
スタイルの種類
| スタイル | 特徴 |
|---|---|
| デフォルト | シンプルで使いやすい |
| シンプル | 余計な装飾なし |
| 囲い枠 | 枠で囲って目立たせる |
| メインカラー | サイトカラーに合わせる |
スタイルとアイコンの表示例
デフォルト
デフォルトのアコーディオンブロックです。アイコン（デフォルト）『』です。
シンプル
シンプルのアコーディオンブロックです。アイコン『』です。
囲い枠
囲い枠のアコーディオンブロックです。アイコン『』です。
メインカラー
メインカラーのアコーディオンブロックです。アイコン（デフォルト）『』です。
アコーディオンブロックの設定
アコーディオンブロックの見た目（閉じている状態）は、親ブロックでカスタマイズします。
タイトルとコンテンツは子ブロックにあたるため、内容の作成が終わったあとに設定を行いましょう。
アコーディオンブロック右上の「親ブロックを選択」をクリックすると、親ブロックに切り替えられます。
親ブロックを選択し、ブロックタブを開きます。
設定メニューは、投稿（エディター）画面の右側にある「設定 ＞ ブロック」タブから確認できます。
表示されていない場合は、以下の画面を参考に右上の設定アイコンをクリックしてください。
詳細設定項目
- アコーディオン
- スタイル
-
- デフォルト
- シンプル
- 囲い枠
- メインカラー
- アコディオン設定
-
- アイコンセットを選択
- アイコンセット3種類から選択
- タイトルのHTMLタグ
- h2 / h3 / h4 / h5 / h6 / span（選択 / 切替）
- アイコンセットを選択
- デバイス制御
-
- 表示デバイスサイズ
- SP / PC / クリア（選択/切替）
- 表示デバイスサイズ
- ブロック下の余白量
-
- ドロップダウンメニューから選択
- 高度な設定
-
- HTMLアンカー
- 今回は省略します。
- 追加 CSS クラス
- 今回は省略します。
- HTMLアンカー
おすすめの使い方【ここが重要】
① 補足情報をまとめる
本文に入れると長くなる内容は、アコーディオンに入れるとスッキリします。
② 画像や手順をまとめる
操作手順やスクショをまとめると、必要な人だけ詳しく見られる構成になります。
③ 収益導線に使う
実はここがかなり重要です。
- 詳細な説明
- 比較情報
- メリット・デメリット
注意点（SEO的にも重要）
多用しすぎない
アコーディオンを使いすぎると、逆に読みにくくなります。
重要な情報は隠さない
結論や重要なポイントは、必ず本文に書きましょう。
詳細ブロックとの違い
よく比較されるのが「詳細ブロック」です。
| 項目 | アコーディオン | 詳細ブロック |
|---|---|---|
| 特徴 | SWELL独自 | WordPress標準 |
| デザイン | おしゃれ | シンプル |
| カスタマイズ性 | 高い | 低い |
よくある質問（FAQ）
迷ったら“使いやすさ”で選ぶのが正解です。
まとめ！SWELLのアコーディオンブロックの使い方｜長い記事をスッキリ見せるコツと活用例
SWELLのアコーディオンブロックを使えば、記事の読みやすさを大きく改善できます。
- 長文でもスッキリ見せられる
- 情報量を減らさず整理できる
- 読者にやさしい構成になる
うまく活用すれば、SEOだけでなく読者満足度も大きく向上します。
まずは、補足情報や詳細説明から取り入れてみてください。
詳細ブロックの使い方もあわせてチェックしておくと、表現の幅が広がります。
あわせて読みたい
SWELLのアコーディオンブロックの使い方｜長い記事をスッキリ見せるコツと活用例
SWELLのアコーディオンブロックの使い方を初心者向けに解説。挿入方法・カスタマイズ・活用例までわかりやすく紹介し、長い記事をスッキリ見せるコツも解説します。詳細ブロックとの違いも解説。
