SWELLのステップブロックの使い方【カスタマイズ2選も併せて】

SWELLのステップブロック、使いこなせていますか？

手順を説明する記事を書いているけれど、「もっと読みやすくしたい」「おしゃれに見せたい」と感じている方も多いのではないでしょうか。

SWELLのステップブロックを使うと、手順や流れを視覚的に分かりやすい表現が可能ですよ。

この記事では、SWELLをはじめたばかりの方向けに、ステップブロックの基本的な使い方から応用テクニックまで詳しく解説。

3種類のスタイル選択からカラー設定、HTMLタグの最適化といった基本設定に加え、画像挿入や横並び方法についてもご紹介します。

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

SWELLのステップブロックは、手順や流れを視覚的に分かりやすく表現できる機能です。

WordPress標準のブロックエディタにはない、SWELL独自のブロックとして提供されています。

この機能は、例えば料理のレシピや作業手順、サービスの申し込み方法など、順序立てて説明したい場面で活躍します。

番号付きのステップ形式で自動的に整理されるため、読者は迷うことなく情報を追えるでしょう。

デザイン性にも優れており、シンプルな設定だけでおしゃれな見た目を実現できます。

ステップブロックはHTMLやCSSの知識がなくても、直感的な操作で美しいステップ表示の完成が可能です。

SWELLのステップを使うべき2つの理由

ステップブロックを活用すると、記事の質が大きく向上します。

• 順序や流れを簡単に作成できる
• おしゃれで見やすいデザインの作成が可能

ここでは具体的なメリットを2つ紹介しましょう。

順序や流れを簡単に作成できる

ステップブロックを使えば、複雑な手順も整理された形で提示できます。

通常のリストや段落では、手順の順番が曖昧になりがちです。

一方、ステップブロックは自動的に番号が振られるため、読者は「次に何をすべきか」を迷わず理解できるでしょう。

ブロックを追加・削除しても番号が自動調整されるので、記事の修正作業も効率的です。

途中にステップを挿入したい場合でも、手動で番号を振り直す手間がかかりません。

おしゃれで見やすいデザインの作成が可能

ほか、SWELLのステップブロックは視覚的な魅力と読みやすさを両立できるのが強みです。

SWELLが用意した洗練されたデザインテンプレートにより、設定を変更するだけで綺麗な見た目に仕上がります。

カラー変更や番号スタイルの調整も簡単で、ブログ全体のトーンに合わせたカスタマイズが可能です。

適度な余白と明確な区切りにより、読者の目線がスムーズに移動します。

長い説明文でも視覚的な疲労を軽減し、最後まで読んでもらいやすくなるでしょう。

SWELLステップブロックの設定方法

ステップブロックには多彩な設定項目が用意されており、記事の内容に応じた調整ができます。

1. 3種類のスタイルから選ぶ
2. 「STEP」の文字を決定する
3. 始まりの番号を決定する
4. ステップ番号の形を決定する
5. タイトルのHTMLタグを決定する
6. ステップ番号のカラー設定をする

基本的な使い方から順番に見ていきましょう。

3種類のスタイルから選ぶ

まずは、SWELLのステップブロックを呼び出します。

ステップをクリックすると、ステップブロックと設定画面が表示されます。

まずはスタイルを設定しましょう。ステップブロックには3つのデザインパターンが用意されています。

デフォルトはシンプルで汎用性の高いデザインになります。

ビッグは番号を大きく表示し、視認性を高められるでしょう。スモールはコンパクトに情報をまとめたいときなどに適しています。

記事の雰囲気や情報量に合わせて選択していきましょう。

「STEP」の文字を決定する

「SETP」と表示されているテキストを、自由に変更できます。

デフォルトでは「STEP」と表示されますが、内容に応じて「手順」「ポイント」「フェーズ」などに変更可能です。

試しに「手順」と入力してみましょう。

空欄にすれば番号だけの表示にもできるため、シンプルなデザインを好む場合に便利です。

また、親ブロックではなく、子ブロックで個々のSTEP文字を変更することも可能です。

試しにSTEP1の子ブロックを選択してみましょう。

ここを「手順」に変更します。

このようにステップブロックは、全体と個々で変更することが可能です。

始まりの番号を決定する

ステップの開始番号を任意に設定できます。

通常は「1」から始まりますが、記事の途中で新たなステップブロックを配置する際、前のステップから連番にしたい場合があります。

そのような場合、「開始番号」の設定で「4」と指定すれば、そこから4、5、6と続けられるのです。

試しにここを、「4」と指定してみましょう。

複数のステップブロックを組み合わせて、長い手順を分割表示する際などに役立ちます。

ステップ番号の形を決定する

デフォルトはステップの形は円形ですが、四角形への変更も可能です。

ステップ番号の形を四角形に変更してみましょう。

ブログの雰囲気に合わせて、番号の形を設定していきましょう。

タイトルのHTMLタグを決定する

ステップタイトルに使用するHTMLタグを設定できます。

デフォルトは「div」タグですが、SEOを意識する場合はh3やh4タグへの変更を検討しましょう。

見出しタグを使用すると、検索エンジンが記事構造を正しく認識しやすくなります。

ただし、すでに記事内で使用している見出しレベルとの整合性を保つことが重要です。

h2の直下で使うならh3、h3の直下で使うならh4といった具合に、階層構造を意識して設定していきましょう。

ステップ番号のカラー設定をする

番号部分の色を変更して、視覚的なアクセントを加えられます。

ステップ番号のカラー設定は子ブロックからの選択になります。

カラー設定から好きな色を設定しましょう。試しにデフォルトの色から赤色に変更してみます。

SWELLのテーマカラーに合わせると統一感が生まれ、ブランディング効果も期待できます。

また、重要度の高いステップだけ色を変えて強調するテクニックも有効です。

読者の注意を引きたいポイントで活用しましょう。

SWELLステップのカスタマイズ【応用編】

基本設定をマスターしたら、より高度なカスタマイズに挑戦してみましょう。

• 画像を用いて作成する
• 横並びでステップを作成する

ここでは実用的な2つのテクニックを紹介します。

画像を用いて作成する

ステップブロック内に画像を挿入すると、理解度が大幅に向上します。

各ステップの説明文の下に画像ブロックを追加するだけで実現可能です。

操作画面のスクリーンショットや完成イメージ図を配置すれば、テキストだけでは伝わりにくい情報も直感的に理解できるでしょう。

試しに、先ほどの「SWELLステップの使い方とカスタマイズ」の一部を画像のみで手順作成してみます。

しかし、画像のファイルサイズには注意が必要です。

適切に圧縮して、ページの読み込み速度が低下しないよう配慮しましょう。

横並びでステップを作成する

カラムブロックと組み合わせると、ステップを横に並べて表示できます。

ここでは、SWELL専用ブロックのリッチカラムを使用します。

手順をステップブロックと画像で説明しているので、よかったら参考にしてみてくださいね。

最後にタイトルやテキストを入力していきます。出来上がったステップを確認してみましょう。

デフォルトの縦並びではなく、横並びにしてみたいときは、ぜひ参考にしてみてください。

まとめ：ステップブロックを使ってわかりやすい手順を書こう！

今回はSWELLのステップブロックの使い方やカスタマイズについて紹介しました。

SWELLのステップブロックは、手順や流れを視覚的に表現できるSWELL専用の機能です。

HTMLやCSSの知識がなくても、見た目もおしゃれなデザインのステップの作成が可能。

画像の挿入やカラムブロックを組み合わせると、さらに分かりやすく魅力的な記事作成が実現できるでしょう。

ぜひSWELLでブログ運営をしている方は、ステップブロックを取り入れてみてくださいね。