![](https://kiky0.com/wp-content/uploads/2023/08/3267a19896e84d35d47f493078e2970b-150x150.png)
SWELLのアコーディオンブロックの使い方がわからないよ?
![](https://kiky0.com/wp-content/uploads/2024/03/069b556e7c00cd15519e6a9df335b13f-1-150x150.png)
という方向けの記事をかきました
SWELLのアコーディオンブロックの便利なところは、情報を隠せるところです
・SWELLのアコーディオンブロックの使い方を知りたい
・どんな風に使ってるの使用例をみてみたい
使い方はとても簡単なので、すぐに覚えれると思います
SWELLのブロックエディターの全ての機能を解説してるので、よければ読んでください
SWELLのアコーディオンブロックの使い方を解説
使い方は簡単なので、早速、始めていきますね!
①プラスボタンをクリックして下さい
②アコーディオンを選択してください(アコーディオンと検索しても大丈夫です)
![プラスボタン](https://kiky0.com/wp-content/uploads/2023/10/2cdfe5ccb74948ca6bc08bc1671e3807-1.png)
![スタイルの選択](https://kiky0.com/wp-content/uploads/2023/10/b39c9fae81802c448edb6e8227c76cd9.png)
③上の方では、テキストしかつかえないのでテキストを入力して下さい
④下の方には、ブロックが使えるの色々と使えます
![アコーディオン1](https://kiky0.com/wp-content/uploads/2023/10/5049cd9a6727b1ba2b7962f71add6a6a-1-1024x232.png)
⑤プレビューで完成したものが、見れますよ
⑥薄い灰色?の部分をクリックすると開閉できます
![アコーディオン3](https://kiky0.com/wp-content/uploads/2023/10/bf41d307e46e862110cd175a2985866a-1024x226.png)
![](https://kiky0.com/wp-content/uploads/2024/03/069b556e7c00cd15519e6a9df335b13f-1-150x150.png)
こんな感じで、クイズ形式で楽しんでみてもいいかもしれないですね!説明は以上です
このように、SWELLのステップブロックの使い方はても簡単ですので、使ってみて下さい
スタイルとアコーディオン設定の使い方
![アコーディオンのスタイル](https://kiky0.com/wp-content/uploads/2023/10/4b6849fd792a7716cb5b9133a75d9e86-1024x400.png)
ステップブロックのスタイルは「デフォルト」「シンプル」「囲い枠」「メインカラー」の4種類です
それぞれ、お好きなスタイルを使って下さい
僕は色がはっきりしている「メインカラー」が好きです
アコーディオン設定
![スタイル1](https://kiky0.com/wp-content/uploads/2023/10/9fbdc19a6b28a6cb97174c0e278cf364-1024x201.png)
![スタイル2](https://kiky0.com/wp-content/uploads/2023/10/c7c2a4149b4ccdfc9b632e697cfdf315-1024x195.png)
![スタイル3](https://kiky0.com/wp-content/uploads/2023/10/8bd21b7fa08343308ca9ab5db96521f9-1024x215.png)
アコーディオンの開閉する「▲」の部分は実は変更が可能です
こちらは好みが分かれると思いますが、一番ベーシックな「▲」をおすすめします
スタイルの使い方
スタイルの使い方の解説していきますね!
①まずは、オレンジ枠の「ここをクリック」をクリックして下さい
![アコーディオンブロックの使い方](https://kiky0.com/wp-content/uploads/2023/10/c7551e54057c4d57c00a7be1ebb852b4-1-1024x356.png)
②スタイルが4種類でてくるので、お好きなスタイルを選択して下さい
![アコーディオン(スタイル)](https://kiky0.com/wp-content/uploads/2023/10/c340cd2d52211ffef490cfc7c199d33e.png)
![](https://kiky0.com/wp-content/uploads/2024/03/cropped-396e3229a541d500971731a9e518d721-1-150x150.png)
簡単でしたね!これで完成です
![スタイルの完成](https://kiky0.com/wp-content/uploads/2023/10/0da62ad3f4ea1fdc05aa6680f53be825-1024x178.png)
アコーディオン設定の使い方
次は、アコーディオン設定の使い方について解説していきますね
①スタイルと同様に、アコーディオンメニューをクリックして下さい
![アコーディオンブロックの使い方](https://kiky0.com/wp-content/uploads/2023/10/c7551e54057c4d57c00a7be1ebb852b4-1-1024x356.png)
②アイコンセットを選択の中からどれか好きな開閉バーを選択して下さい
![アコーディオン設定1](https://kiky0.com/wp-content/uploads/2023/10/f2bc95a333bb5af741868854dad07a58.png)
![](https://kiky0.com/wp-content/uploads/2024/03/069b556e7c00cd15519e6a9df335b13f-1-150x150.png)
こんな感じで、アコーディオン設定も簡単に完成するよ
![スタイル4](https://kiky0.com/wp-content/uploads/2023/10/06ef4a09e69039207faf452cec3e1615-1024x196.png)
使用例を見ていこう
最後に、使用例を作成したので、見ていきましょう!
クリックしてみてね
見出しや画像も表示できるよ
![サンプル画像](https://kiky0.com/wp-content/uploads/2023/10/meadow-2401931_1280-1024x680.webp)
クリックしてみてね
![](https://kiky0.com/wp-content/uploads/2024/03/069b556e7c00cd15519e6a9df335b13f-1-150x150.png)
ふきだしも使えるよ!
クリックしてみてね
- リストもつくれるよ
- リストもつくれるよ
クリックしてみてね
意外と長くかかってしまいまいましたね!
これで、SWELLのアコーディオンブロックの説明は以上となります
最後に
最後まで読んでいただきありがとうございました
今回は「SWELLのアコーディオンブロックの使い方を解説します」というテーマで書いていきました
「質問」や「クイズ」や「これ隠したいな」って時に使うと便利ですよね?
ユーザーも開いてみるまで、何が出てくるのか分からないので楽しみだと思いますよ!
\初心者でも簡単にオシャレで使いやすい有料テーマが作れる/
X(旧Twitter)@wadainosennninnをフォロワーしてくださいね!
![](https://image.moshimo.com/af-img/3130/000000053838.jpg)
コメント