MENU

SWELLステップブロックの使い方!わかりやすく読みやすい解説作成におすすめ

SWELLのステップブロックの使い方

\女性起業家 のための ChatGPTプロンプト集を無料プレゼント中/

ブログ記事でわかりやすくお客様に説明をしたいのだけれど見出しだけ増えたり、箇条書きだけになってしまう。もっと手順をわかりやすく説明したいと思ったことはありませんか?

🔰リサーチャーまるお

どうしたら読みやすく、わかりやすい説明ができるかな?

集まる集客®総研リサーチャー道満早苗

そんな時は、SWELLの「ステップブロック」を使うと簡単に見た目もわかりやすいステップ解説ができますよ!

SWELLのステップブロックは、手順や流れをスタイリッシュに整理して、見やすくできるブロックです。

読者がスムーズに理解できるようになるので、ぜひ使ってみてください。

この記事では、ステップブロックの使い方をわかりやすく解説しています。
ステップブロックを使って説明をすると読者さんが読みやすいコンテンツにすることができます。

目次
最新電子書籍を無料ダウンロード
女性起業家のためのYouTubeSEO集客ガイドブック
女性起業家のためのYouTubeSEO集客ガイドブック

SWELLステップのブロック使い方はとっても簡単!

 SWELLの【ステップブロック】は、手順説明を、簡単にスタイリッシュに、そして読みやすく表現できるWordPressテーマSWELLの機能です

例えば、こんなメリットがあります!

  • 手順説明が劇的に分かりやすくなる
  • デザイン性の高いコンテンツ作成が可能
  • 読者の理解度を高められる
  • カスタマイズの自由度が高い

ただの箇条書きや見出しだらけにならず、スムーズに解説ができるので、ブログの読みやすさが格段にアップします。

簡単に使えるのでぜひ覚えてくださいね。

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

例として、オンライン講座の申し込みフローをステップブロック作ると、このようになります。

例)基本のスタイル

STEP
公式サイトへアクセス

まず、公式サイトの申し込みページにアクセスします。申込みボタンをクリックすると、申込みフォームが表示されます。

STEP
必要情報を入力

名前・メールアドレス・希望の講座を入力し、送信ボタンを押してください。入力ミスが無いように注意しましょう。

このように、作業や手順、契約フローなどを説明する時に、「ステップ1、2、3、・・・」と順序立てて記載するととてもわかりやすくなります。

ステップブロックは段落ごとにナンバリングとタイトルが自動的に設置されるのでとても見やすい表記になるSWELL独自のブロックです。

まずは、使い方を説明していきます。

🔰リサーチャーまるお

こんなふうに手順を解説する時にステップブロックを使うとわかりやすいっすね!

SWELLのステップブロックの使い方

STEP
WordPressエディターで「+」をクリックします。
SWELLステップの使い方
STEP
「ステップ」と検索し、ブロックを追加
SWELLステップの使い方
STEP
ステップブロックをクリックするとエディタ内にステップブロックが設置されます。
SWELLステップの使い方
STEP
テキストを入力し、デザインを調整

番号に続けてタイトルやテキストを入力していきます。

項目を増やすには下の「+」をクリックして増やしていきます。

「+」ボタンでステップを追加(必要な数だけ)

SWELLステップの使い方
STEP
カスタマイズをして完成!

ステップボックスをカスタマイズする時は、ボックス内をどこでもクリックすると「親ブロックを選択」が出てきます。

カスタマイズの仕方は次の項目で解説します!

SWELLのステップブロックには、3つの異なるスタイルがあります

SWELLのステップブロックには、次の3つのスタイルがあります。

  • デフォルト
  • ビッグ
  • スモール

① デフォルト:基本的で分かりやすい標準的なデザイン

STEP
公式サイトへアクセス

まず、公式サイトの申し込みページにアクセスします。申込みボタンをクリックすると、申込みフォームが表示されます。

STEP
必要情報を入力

名前・メールアドレス・希望の講座を入力し、送信ボタンを押してください。入力ミスが無いように注意しましょう。

デフォルトはシンプルで説明の流れを整理しやすいデザインです。

「親ブロックを選択」をクリックすると右端に設定が出るので必要に合わせて設定を変更してください。

数字の枠を◯や□に変える事もできます。

② ビッグ:中央に大きく番号と説明を配置する目を引くデザイン

重要な手順を強調したい時に最適です。

SWELLステップの使い方

③ スモール:控えめで洗練されたミニマルなデザイン

コンパクトで文章の流れを邪魔せず、スッキリ見せることができます。

スタイルを切り替える方法

STEP
ステップブロックを選択して、「親ブロックを選択」をクリックします。
SWELLステップ使い方17
STEP
編集画面の右にブロックの設定が表示されるので使いたいスタイルを選択します。
SWELLステップ使い方

レベルアップ!ステップブロックをカスタマイズしてみよう

SWELLのステップブロックは、次のようなカスタマイズが可能です。

  • 「STEP」の文字を変更(例:「ポイント」「工程」など)
  • 開始する番号の変更(1番からでなくてもOK)
  • ステップ番号の形を変更(円形・四角形)
  • カラー変更(背景色や番号の色を変更可能)
  • 各段落ごとに異なるデザイン設定

これらのカスタマイズは「ステップブロックの設定」から行えます。

「STEP」の文字を変更

ブロックの設定画面の「STEP」の文字枠の中を「No.」と変えてみました。

「STEP」の文字をなくして数字だけにすることもできます。

開始する番号の変更

ブロックの設定画面の「始まりの番号」を1から5に変えてみました。

ステップ番号の形(円形・四角形)

ブロックの設定画面の「ステップ番号の形」を四角形に変えてみました。

色の設定

ステップブロックの色を変えたい場合は変えたいブロックをすべて選択すると右の設定で一度に変えることができます。

1つづつのブロックの色を変えることもできます。

各段落ごとに異なる設定

ステップブロックを1枠づつ選択すると一つ一つのデザインを変更でき、ブロック全体を選択して全部を統一したデザインに変更することもできます。

このように、自分の好きな色や形にカスタマイズしてみましょう。

集まる集客®総研リサーチャー道満早苗

デフォルトで解説をしてきましたが、同じように「ビッグ」や「スモール」スタイルでもできますよ。

🔰リサーチャーまるお

ステップブロックはいろいろな場面で使えそうだね。

ステップブロックおすすめの活用シーン

ステップブロックは、こんな場面で大活躍!

  • サービス提供の流れ説明
  • 契約・申し込みプロセス
  • オンラインコース・講座の案内
  • 料理レシピ
  • DIY手順

「手順がわかりやすく整理されていると、読者も迷わずに行動できます!」

まとめ:SWELLのステップブロックでわかりやすい記事へ!

この記事では、WordPressのテーマSWELLのステップブロックの基本的な使い方やカスタマイズの仕方を解説しています。

SWELLのステップブロックを使えば、 個人起業家のWebコンテンツが、プロフェッショナルで洗練されたサイトに変わります。

サービス流れ、レシピの手順、講座の案内などわかりやすく表示できるので読者さんの印象も大きく左右することになります。

「ブログで説明をわかりやすくしたい!」という方は、ぜひ SWELLのステップブロック を活用してみてくださいね!

ぜひ、あなたのサイトでも活用してみてください!

 

集客を時短するChatGPTプロンプト集プレゼント
集客を時短するChatGPTプロンプト集プレゼント

集める集客を「集まる集客」にガチャリと切り替える!集まる集客カレッジ入会者募集中!

SNS集客に疲弊せずに、ずっと続けていけるサスティナブルな集客に変えません?

集客の時間を10分の1に成果を10倍にできた! MyGPT Buddy@i を使ってみてください。

集まる集客カレッジ悩まないライティング

集まる集客®︎カレッジの3つのお得な入会特典と金額や学べる内容を今すぐ確認する

 

よかったらシェアしてね!
目次