SWELLステップブロックの使い方｜手順・流れを時系列でわかりやすく表現する方法

SWELLの「ステップブロックの使い方」を初心者向けに、基本からわかりやすく解説します。

それではご覧ください。

SWELLのステップブロックとは？

ステップブロックとは、手順や作業の流れを「STEP1・STEP2…」のように、順番どおり表示できるSWELL専用のブロックです。

こんな感じ

文章や箇条書きでも手順は説明できますが、ステップブロックを使えば「今どの手順なのか」「次に何をすればいいのか」が、視覚的にひと目で分かります。
さらに、タイトル部分のHTMLタグを切り替えるだけで、見出しタグとしても使えるのが便利なポイントです。

そのため、以下のような記事と特に相性が良いのが特徴です。

• WordPressの操作・設定手順
• プラグインやテーマの使い方解説
• サービスやツールの申し込み手順
• 初心者向けの手順解説記事

SWELLを使っているなら、手順を説明する場面では積極的に使いたいブロックのひとつです。

箇条書きとの違い

箇条書きは手軽に使えますが、手順が多くなると「どこからどこまでが1つの流れなのか」が分かりにくくなることがあります。

一方、ステップブロックは…

• ステップ番号が自動で付く
• 手順ごとに区切って表示される
• 読み進める順番が自然に伝わる

といった特徴があり、初心者にも迷いにくい構成になります。

初心者におすすめな理由

ステップブロックは、特別な設定をしなくても挿入してテキストを入力するだけで使えます。

デザインもあらかじめ整っているため…

• レイアウトで悩まない
• 表示が崩れにくい
• 記事全体が見やすくなる

といったメリットがあります。

「まずは分かりやすく伝えたい」という初心者の方に、ステップブロックはとても使いやすい機能です。

SWELLのステップブロックが向いている記事・使いどころ

SWELLのステップブロックは、作業の順番や流れを伝えたい記事で特に効果を発揮します。

「何を → どの順番で → どうするのか」を整理して見せたい場面にぴったりです。

WordPressの操作・設定手順

WordPressの初期設定や管理画面の操作などは、1つ手順を間違えると次に進めなくなることもあります。

ステップブロックを使えば、「この順番どおりに進めればOK」という流れが明確になるため、初心者の方でも安心して作業を進められます。

プラグイン・テーマの使い方解説

プラグインの導入や設定方法を解説する記事でも、ステップブロックはとても相性が良いです。

• インストール
• 有効化
• 初期設定

といった流れをステップごとに区切ることで、読みながら同時に操作しやすくなります。

サービスやツールの申し込み手順

レンタルサーバーや外部ツールの申し込み手順など、「途中で迷いやすい作業」もステップブロック向きです。

操作画面のスクリーンショットと組み合わせることで、つまずきポイントを減らすことができます。

初心者向けの解説・マニュアル記事

ブログやWordPress初心者向けの記事では、「順番に説明してもらえる安心感」がとても大切です。

ステップブロックを使うことで…

• 読み飛ばしを防げる
• 途中で混乱しにくい
• 最後まで読み進めやすい

といった効果も期待できます。

逆に向いていないケース

一方で、次のような内容にはステップブロックはあまり向いていません。

• 順番に意味がない説明
• 単なる箇条書きで十分な内容
• 長文の考察・コラム記事

「順序が大事かどうか」を基準に、使い分けるのがおすすめです。

ステップブロックの基本的な使い方

SWELLのステップブロックを投稿に挿入する基本的な手順から、各項目の詳細設定、実際の表示例までを解説します。

ステップブロックの挿入手順

• 投稿（エディター）画面での作業になります。

基本的なSWELLボタンブロックの挿入手順をご紹介します。

ステップ項目（子ブロック）の設定

ここでは、ステップ項目（子ブロック）の設定方法を紹介します。

投稿（エディター）画面で、設定したいステップ項目の「領域またはタイトル…」をクリックします。
（項目の選択）
以下の画面のように、「ステップ項目アイコン」にマウスオーバーし、青枠（赤破線部）で囲まれていれば選択できています。

ブロックタブメニューは、右側の設定パネルに表示されます。

表示されていない場合は、以下の画面を参考に設定アイコンをクリックしてください。

編集する「ステップ項目（子ブロック）」が選択できたら、ブロックタブのスッテップ項目を設定していきます。

ステップ項目の詳細

ステップ項目（子ブロック）の主なカスタマイズと表示例

ステップ項目（子ブロック）で「テキスト・番号・色」を変更したサンプルです。
ステップ（親ブロック）スタイル「デフォルト・ビック・スモール」3種類の表示例をご覧ください。

ステップ（親ブロック）スタイル（デフォルト）

ステップ（親ブロック）スタイル（ビック）

ステップ（親ブロック）スタイル（スモール）

ステップ（親ブロック）の設定

ここでは、ステップ（親ブロック）の設定をご紹介します。

投稿（エディター）画面でステップブロックの領域をクリックして『ステップを選択アイコンまたは親ブロックを選択』をクリックします。
以下のようにステップブロック全体が青枠（赤破線部）で囲まれればOKです。

ブロックタブメニューは、右側の設定パネルに表示されます。

表示されていない場合は、以下の画面を参考に設定アイコンをクリックしてください。

編集する「ステップ（親ブロック）」が選択できたら、ブロックタブのスッテップ項目を設定していきます。

ステップ（親ブロック）の主なカスタマイズと表示例

スタイルの切り替えで用意されているステップの表示イメージです。
ステップ（親ブロック）のスタイル「デフォルト・ビック・スモール」3種類の表示例をご覧ください。

ステップ（親ブロック）スタイル（デフォルト）

ステップ（親ブロック）スタイル（ビック）

ステップ（親ブロック）スタイル（スモール）

まとめ！SWELLステップブロックの使い方｜手順・流れを時系列でわかりやすく表現する方法

SWELLのステップブロックの使い方について解説しました。
ステップブロックは、作業手順や契約の流れなど、時系列で説明したい内容を分かりやすく整理できるブロック機能です。

記事の中でもウエイトを占めやすい「手順」「流れ」を、視覚的に伝えられるため、初心者向けの記事や操作解説との相性も抜群。
SWELLを使っているなら、ぜひ積極的に活用したい便利なエディター機能のひとつです。

この記事がお役に立てば嬉しいです。

「最後まで、ご観覧いただきありがとうございました。」
また、次の記事で…お会いしましょう。＼^^／