【SWELL専用ブロック】ステップブロックの使い方

2019 11/19
【SWELL専用ブロック】ステップブロックの使い方
記事上のウィジェットエリア

このページでは、WordPressテーマ『SWELL』で使える専用ブロック、「ステップブロック」の使い方を解説していきます。

「ステップブロック」を使用すると、以下の例ように、作業の手順や契約の流れなど、順序ごとにわかりやすく説明ができるようなコンテンツが簡単に作成できます。

STEP
WordPressをインストール
STEP
SWELLを購入!
STEP
ブログ書きまくる!
目次前広告表示エリア
目次

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

ブロックエディターのブロック追加ボタンを押すと出てくるインサーター内にある、「SWELLブロック」パネルの中から選択できます。

ステップブロックのアイコン
SWELLブロック一覧

この「ステップ」と書かれたブロックを選択することで使用できます。

もしくは、段落ブロックに/step/ステップと入力して呼び出すこともできます。

ステップブロックを選択して使用する様子を録画しましたので、ぜひご覧ください。

ステップブロックを追加する様子

ステップブロックの各種設定項目について

ここからは、ステップブロックごとに設定できるカスタマイズ項目について解説していきます。

スタイルの選択

ステップブロックには、

  1. デフォルト
  2. ビッグ
  3. スモール

3種類のスタイルが用意されており(SWELL ver. 1.3.5 時点)、サイドバーからお好きなデザインを選択可能です。

※ 「ステップ項目」ではなく、親となる「ステップブロック」本体を選択した状態で現れます。

ステップブロックのスタイルを切り替える様子

「STEP」の文字

各ステップ項目に表示されている「STEP」というラベル文字は、お好きなものに変更することができます。
もちろん、各スタイルでそのラベルは維持されますし、何も入力しなければステップ番号だけが表示されます。

「STEP」の文字を変更する様子

ステップ番号の始まりの数字

デフォルトでは「STEP 」から始まりますが、これを「STEP 100」から始めるようなことも可能です。

ステップ番号を変更する様子

ステップ番号部分の形状や並び方の切り替え

「デフォルト」スタイル・「スモール」スタイルでは、ステップ番号が書かれた部分の形状を「円」にするか「四角」にするかを選ぶことができるようになっています。

「ビッグ」スタイルでは、「STEP」というラベル文字と「1」などの番号の並び順を横並びか縦並びかを選択できます。

形状や並び順を切り替える様子

ステップ項目ごとの設定

ここまで、ステップブロック全体に対する設定項目について紹介してきましたが、各ステップ項目に対してもカスタマイズできる項目を用意しています。

「デフォルト」スタイル・「ビッグ」スタイルではステップ番号部分のカラーを選択することができ、「スモール」スタイルではカラー設定に加えて、シェイプ部分を塗りつぶすかどうかも選択することができます。

ステップ項目ごとのカスタマイズの様子
記事下のウィジェットエリア

この記事が気に入ったら
フォローしてね!

目次
目次