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