SWELLの「ステップ」ブロックの設定と使い方をまとめています。
ステップブロックの使い方
ステップブロックを使うと、下記の様な手順の流れを順序ごとに説明することができます。
記事編集画面でSWELL専用「ステップ」ブロックを追加します(/ステップ
)。
![ステップブロックを追加](https://affilabo.com/wp-content/uploads/2023/07/2ac1aa8c524d9de077c8b98fcfebc8d0.png)
ステップブロックを選択して、サイドバーから「スタイル」を変更します。
![ステップブロックのスタイルを選択](https://affilabo.com/wp-content/uploads/2023/07/7aca8016892f21f11a1ec4270cfee469.png)
ここでの設定はステップブロック全体に影響します。必要であれば、ステップに表示される文字列や形を変更して下さい。タイトルを見出しタグにすることもできます。
現在閲覧しているステップブロックのスタイルは「デフォルト」です。
ステップ項目を選択して、任意のタイトルを入力します。
![ステップ項目の編集](https://affilabo.com/wp-content/uploads/2023/07/3e7ca7d7ada282b472005612d3500692.png)
ここでの設定は全体の設定を上書きします。
個別にステップ項目のテキストやカラーを変更したい時は、サイドバーから編集して下さい。
説明欄に任意のブロックを追加して編集します。
![説明欄に任意のブロックを追加して編集](https://affilabo.com/wp-content/uploads/2023/07/6d305cf0e8ea1c0c24489b1d120b529e.png)
説明欄には画像ブロック等、好きなブロックを追加することができます。
ステップ項目を追加したい時は、ステップブロックを選択して「+」をクリックします。
![ステップ項目の追加](https://affilabo.com/wp-content/uploads/2023/07/e50c457cc818722e37b3ea82714517e3.png)
後は同様にステップ項目と説明欄を自由に編集して下さい。
- ステップブロックはステップ項目(タイトル)と説明欄の2つのエリアで構成されている
- 説明欄には自由にブロックを追加・配置できる
背景の変更や枠線の追加
ステップブロックを目立たせたい時は、キャプションブロックやグループ化を使うと便利です。
ステップブロックの背景を変更したり、枠線を追加することができます。
キャプションボックスブロックと組み合わせる
キャプションボックスブロックと組み合わせると、下記の様なステップブロックを設置できます。
記事編集画面でSWELL専用「キャプションボックス」ブロックを追加します。
![キャプションボックスを追加](https://affilabo.com/wp-content/uploads/2023/07/2ce20bdc27979e33c71157a168fdb8c1.png)
スタイル、カラー、アイコンはお好みでサイドバーから選択して下さい。
キャプションボックスブロックの中に、「ステップ」ブロックを追加します。
![キャプションブロックの中にステップブロックを追加](https://affilabo.com/wp-content/uploads/2023/07/0cc65884b8776848879a6743833f8567.png)
後はステップブロックを自由に編集して下さい。
ステップブロックをグループ化する
グループ化を使うと、下記の様なステップブロックを配置できます。
記事編集画面でSWELL専用「ステップ」ブロックを追加します。
![ステップブロックを追加](https://affilabo.com/wp-content/uploads/2023/07/2ac1aa8c524d9de077c8b98fcfebc8d0.png)
ステップブロックを選択して、ブロックメニューから「グループ化」を選択します。
![ステップブロックをグループ化](https://affilabo.com/wp-content/uploads/2023/07/15010fc052e77a0890ccd097ec999ac7.png)
グループを選択して、サイドバーからボーダーやスタイルをお好みで編集します。
![ステップブロックのグループを編集](https://affilabo.com/wp-content/uploads/2023/07/02fa10fe036b7ea167cd5de777264a7e.png)
グループ化することで、グループを段落ブロックと同じ様に編集できます。
![](https://affilabo.com/wp-content/uploads/2023/07/65199792e7b98de6bb2e77e71ecad8ae-300x200.png)
最後に
ステップブロックは、手順の流れを説明する時に使うと便利です。
ただ、ステップブロック単体で使うと、(個人的には)境界が少し分かりにくい感じがするので、目立たせたい時は、キャプションボックスブロックと組み合わせたり、グループ化して使ってみて下さい。
コメント