【SWELLステップ】手順を説明するときにはこれを使おう

ステップは手順解説を見やすくするのに欠かせない表示方法です。

人気のワードプレステーマ「SWELL」のステップはデザインを細かく設定できますし、とにかく簡単に使うことができます。

今回は、SWELLステップブロックの使い方やデザインについて解説していきます。

SWELLステップブロックの特徴

SWELLステップブロックの特徴には以下のようなものがあります。

それぞれ順番に見ていきましょう。

手順を解説するときに見やすいデザイン

ステップブロックは、ハウツーやレシピなど、手順に沿って解説をしたい内容のときに見やすく表示することができます。

見出しで作成するよりもわかりやすいデザインになっており、目次にも反映しないので便利です。

こんな感じです

ブロックエディター対応のため簡単に作れる

SWELLのステップ機能はブロックエディターに完全対応しているため、ショートコードを入力しなくても誰でも簡単に表示させることができます。

作成中の投稿画面でデザインがすぐ反映されるので、実際に表示される状態を確認しながら作成することができます。

カラーやスタイル、文言を変更できる

他の有料テーマでは、ステップブロックは備わっていたとしてもデザインは1種類のみだったり、カラーを変更することはできなかったりしました。

SWELLであれば、デザインは3種類から選べ、カラーの変更や、さらに「STEP」のテキストを変更することまでできます。

SWELLステップブロックのデザイン

SWELLステップブロックのデザインには以下のようなものがあります。

それぞれ順番に見ていきましょう。

デフォルト

何も設定変更せずに作成したものが「デフォルト」です。

ステップ番号の形を四角形にすることもできます。

ビッグ

STEPの位置が中央にくるのが「ビッグ」です。

ステップの番号を横並びにもできます。

スモール

ステップの表示がいちばん小さいのが「スモール」です。

ステップ番号の形を四角形にしたり、塗りつぶすこともできます。

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

実際にステップブロックを作成する方法やデザインの設定方法を解説していきます。

ステップブロックの作成方法

ステップブロックのデザイン設定方法

ステップ項目部分をクリックすると項目の設定（カラーやテキストなど）、ステップ内容部分をクリックすると段落のデザイン設定ができるようになります。

まとめ

今回はSWELLのステップブロックの使い方やデザインについて解説しました。

SWELLのステップブロックはデザイン性も良く、ブロックエディター対応で簡単に使うことができるので、ぜひ使ってみてください。