SWELL：アコーディオンブロックの使い方と出来ること

この記事ではSWELL（スウェル）のアコーディオンブロックの使い方・できることについて初心者向けに解説しています。

SWELL：アコーディオンブロックで出来ること

アコーディオンブロックではコンテンツを折りたたんで表示することができます。

折りたたんだ状態はこんな感じです。

コンテンツを表示するとこんな感じです。

実際の表示はSWELLで作成したサンプルサイトで確認できますので、そちらを参考にしてみてください。

→　SWELLで作成したサンプルサイト（アコーディオンブロック）

アコーディオンブロックでは次のような設定をすることができます。

①　スタイル	スタイルを４種類に変更可能
②　アコーディオン設定	オープンとクローズのアイコンを変更可能
③　デバイス制限	スマホとPCで表示制限が可能
④　ブロック下の余白量	ブロック下の余白量を設定可能

スタイル

４種類のスタイルに変更することができます。

• デフォルト
• シンプル
• 囲い枠
• メインカラー

デフォルト

スタイル（デフォルト）はこんな感じです。

シンプル

スタイル（シンプル）はこんな感じです。

囲い枠

スタイル（囲い枠）はこんな感じです。

メインカラー

スタイル（メインカラー）はこんな感じです。

アコーディオン設定

アコーディオン設定ではオープン時とクローズ時のアイコン表示を変更することができます。

アコーディオン設定をするとこんな感じです。

デバイス制限

スマホとPCで表示制限が可能です。

ブロック下の余白量

ブロック下の余白量を設定可能です。

SWELLのアコーディオンブロックのコンテンツ部分は通常の記事作成を行うことができます。

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

アコーディオンブロックはとても便利ですが、どんな時に使用していいのか迷ってしまう初心者の方もいるかもしれません。

そんな方には次のような活用方法がお勧めです。

• 記事をスマートに表示させたいとき
• 主となるコンテンツの補足説明をしたいとき

記事をスマートに表示させたいときに活用する

アコーディオンブロックを利用することで、コンテンツを折りたたんで表示させることができます。

その特性から記事をスマートに表示させることができます。

記事の内容が多すぎると読み手の方の負担が増え、逆にページから離れてしまう可能性もあります。

そんなときにアコーディオンブロックをうまく活用すれば、読み手の方にスマートにコンテンツを案内することができます。

ただし、アコーディオンブロックでは読み手の方にクリックしてもらわなければコンテンツを表示することができません。

（デフォルトで開いた状態に設定することも可能です。）

せっかく書いた内容を読んでもらえない可能性もあります。

それから使用するうえの注意点としては「見出し」の扱い方です。

アコーディオンブロックのコンテンツは普通の記事作成機能を使用することができます。

「見出し」の機能も利用できますが、「見出し」は見出しレベルによりますが目次に反映されますので、その点に注意して利用する必要があります。

主となるコンテンツの補足説明をしたいときに活用する

例えば、ある商品を説明する場合に商品画像の下にアコーディオンブロックを利用して詳細な説明をするのに活用してもいいですし、商品の説明のコンテンツのあとにアコーディオンブロックで商品画像を補足するのもいいと思います。

クリックして商品画像を表示させるとこんな感じです。

SWELLのアコーディオンブロックの説明は以上になります。

SWELLの使い方

SWELL：関連記事