[SWELL]作業手順を綺麗に見やすく紹介できる「ステップブロック」

こんにちは、なおです!

当ブログでは、WordPressのテーマに「SWELL(スウェル)」を使用しています。

「SWELL」に用意されているたくさんの機能のうち、今回はSWELL専用ブロック「ステップブロック」をご紹介します。

ステップブロック」を使用すると、作業手順などを見やすく紹介することができます。

使い方もとても簡単になっているので、ブロックエディタでどんどん作っていけます。

スタイルもスタイリッシュな3種類が用意されています。

ステップブロック」とはどんなものか、ぜひご覧ください。

目次

ステップブロックとは

当ブログでも使用しているWordPressのテーマ「SWELL」。

「SWELL」はブロックエディタ(Gutenberg)に完全対応したテーマで、記事をスラスラと書くことができます。

その「SWELL」のたくさんの機能の中に、SWELL専用ブロック「ステップブロック」というものが用意されています。

ステップブロック」を使うと、料理やインストールなどの作業手順、また契約の流れなどを綺麗にわかりやすく紹介することができます

こんな風にできます

STEP
材料を切る

とり肉、野菜をひと口大に切ります。

STEP
炒める

とり肉を炒めて焼き色がついたら、野菜を加えてさらに炒めます。

STEP
仕上げる

調味料を加えて全体にからめたらできあがり。

ステップブロック」の特徴は、次のとおりです。

  • 一連の流れを1ステップずつ見やすく紹介できる。
  • スタイルは3種類。
  • ステップそれぞれにタイトルと内容を書ける。
  • ラベルや数字も変えられる。
  • 特定のステップだけカラーを変えることも可能。

今回はこれらをひとつずつご紹介します。

また、「SWELL」については、以前のこちらの記事をご覧いただければ幸いです。

スタイルは3種類

ステップブロックで用意されているスタイルは、

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

の3種類が用意されています。
(SWELLのバージョン1.4.0現在)

サイドバーにある設定でいつでも好きなスタイルに変更できます。


「デフォルト」のスタイル

サイトの基本色で塗られた円の中に書かれたステップ番号がとても目立ち、ひとつひとつの手順や全体の流れがわかりやすくなっています。

STEP
ステップブロックを挿入

ブロックを挿入したら、タイトルと内容を書きます。

STEP
ステップを追加する

ステップはどんどん増やせます。

STEP
こまかく設定する

ラベルの文字や色も変えられます。


「ビッグ」のスタイル

今度は逆に、ひとつひとつのステップを大きく区切ることで、シンプルかつ広く見えるデザインです。

STEP
ステップブロックを挿入

ブロックを挿入したら、タイトルと内容を書きます。

STEP
ステップを追加する

ステップはどんどん増やせます。

STEP
こまかく設定する

ラベルの文字や色も変えられます。


「スモール」のスタイル

ステップ番号が小さくなっているデザインです。
大きくスペースを取らず、簡単に流れを紹介するときなどに便利です。

STEP
ステップブロックを挿入

ブロックを挿入したら、タイトルと内容を書きます。

STEP
ステップを追加する

ステップはどんどん増やせます。

STEP
こまかく設定する。

ラベルの文字や色も変えられます。

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

基本の使用方法

ステップブロック」の基本的な使用方法は、

  1. ステップブロックを追加する
  2. 最初のステップのタイトルと内容を書く
  3. 次のステップを追加する
  4. ステップのタイトルと内容を書く

となります。
あとは、3~4をくり返して、必要な分だけステップを追加することができます

それでは順番に使い方をご紹介します。

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

ブロックエディタの投稿入力画面で、「ブロック追加ボタン(十字に丸のボタン)」をクリックして追加できるブロックの一覧を表示します。

一覧の中から「SWELLブロック」グループの中にある「ステップ」をクリックして、「ステップブロック」を追加します。

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

すると、親となるステップブロックが追加され、その中に最初のステップが入っています。

最初のステップのブロックはタイトル部分と、その下に内容を書く部分から構成されています。

ステップブロック

ステップのタイトルを入力

「STEP1」と書かれたステップ番号の右側に、このステップのタイトルを入力します。

タイトルを入力する

ステップの内容を書く

次にSTEP1の内容を書いていきます。

タイトルの下にある内容部分をクリックするとカーソルが出てきますので、文章を入力します。

また、画像など文章以外のブロックを追加したい場合には、「ブロック追加ボタン(十字に丸のボタン)」をクリックして、希望のブロックを追加します。

内容を書く

ステップの内容の中には、いろいろな種類のブロックをどんどん追加していくことができます。

ステップを追加する

次のステップを追加するには、現在あるステップの下にあるグレーの四角の部分(中央に「ブロック追加ボタン」があるところ)をクリックします。

ステップを追加する

開いたウインドウの中にある「ステップ項目」をクリックします。

ステップを追加する2

すると、「STEP1」の下に「STEP2」が追加されます。

ステップを追加する3

同じようにタイトルと内容を書き、後は必要な分だけくり返しステップを追加します

ステップブロック全体の設定

ここでは、ステップブロック全体の設定についてご紹介します。

スタイルを選ぶ

SWELLのステップブロックでは3種類のスタイルが用意されています。

スタイルを変更するには、まず「ステップブロック」をクリックして選択した状態にします。

すると右側のサイドバーにステップブロックの設定が表示されるので、「スタイル」の中から好きなものをクリックして選択します。

デフォルト」「ビッグ」「スモール」の3種類のスタイルから選択できます。
(SWELLのバージョン1.4.0現在)

各ステップの項目内を選択するとそのステップの設定が表示されてしまうので、親となるステップブロック本体の部分をクリックして選択してください。

スタイルを選択する

STEPの文字を変える

全スタイルで設定可能です。

各ステップ番号のところに表示されている「STEP」というラベルの文字は、好きなものに変更することができます

STEPの文字を変えるには、まず「ステップブロック」をクリックして選択した状態にします。

すると、右側のサイドバーに「「STEP」の文字」という項目があり、デフォルトでは「STEP」と入力されています。

この項目を変更すると、好きな文字に変更することができます。

また、この項目を空にするとラベルの文字はなしとなり、ステップ番号だけ表示されるようになります

ステップの文字を変える

「STEP」の文字を変えたサンプル

デフォルトの「STEP」を「手順」に変更したサンプルです。

手順
ステップブロックを選択

ステップブロックをクリックして選択します。

手順
「STEP」の文字

右側のサイドバーにある「ステップ設定」の「STEP」の文字を変更する。

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

全スタイルで設定可能です。

デフォルトではステップ番号は「1」から始まりますが、「2から始める」や「10から始める」といったことができます。

ステップ番号の始まる数字を変えるには、まず「ステップブロック」をクリックして選択した状態にします。

すると、右側のサイドバーに「始まりの番号」という項目があり、デフォルトでは「1」と入力されています。

これを好きな数字に変えると、その番号からステップ番号を始めることができます。
(始めたステップ番号から1ずつ増えていきます)

「始まりの番号」は1以上の整数を設定することができ、「0」やマイナス、小数は使用できませんでした。

始まるステップ番号を変える

STEP番号の始まりを変えたサンプル

デフォルトの「1」を「10」に変更して、STEP10から始まるようにしたサンプルです。

STEP
ステップブロックを選択

ステップブロックをクリックして選択します。

STEP
始まりの番号

右側のサイドバーにある「ステップ設定」の「始まりの番号」を変更する。

ステップ番号の形状や並び方

ステップ番号の形状を選ぶ

デフォルト」スタイル、「スモール」スタイルで設定可能です。

ステップ番号のシェイプの形状を「」にするか「四角」にするかを選択することができます。

ステップ番号のスタイルを変更するには、まず「ステップブロック」をクリックして選択した状態にします。

すると、右側のサイドバーに「ステップ番号の形」という項目があり、「円形」と「四角形」から好きな形を選ぶことができます。(デフォルトは「円形」)

ステップ番号の形状を変える

STEP番号の形状を変えたサンプル

デフォルトの「円形」を「四角形」に変更したサンプルです。

STEP
ステップブロックを選択

ステップブロックをクリックして選択します。

STEP
ステップ番号の形

右側のサイドバーにある「ステップ設定」にある「STEP番号の形」から「円形」か「四角形」を選びます。


ステップ番号の並び方の設定

ビッグ」スタイルで設定可能です。

STEP」というラベルの文字と「1」などのステップ番号の並び方を「縦に並べる」か「横に並べる」かを選択することができます。

ステップ番号の並び方を変更するには、まず「ステップブロック」をクリックして選択した状態にします。

すると、右側のサイドバーに「ステップ番号の並び」という項目があり、「縦並び」と「横並び」から選ぶことができます。(デフォルトは「縦並び」)

ステップ番号の並び方を変える

STEP番号の並び方を変えたサンプル

デフォルトの「縦並び」を「横並び」に変更したサンプルです。

STEP
ステップブロックを選択

ステップブロックをクリックして選択します。

STEP
ステップ番号の並び

右側のサイドバーにある「ステップ設定」にある「ステップ番号の並び」から「縦並び」か「横並び」を選びます。

ステップごとの設定

今まではステップブロック全体の設定でしたが、各ステップそれぞれでカラーを設定することができます

また、「スモール」スタイルでは、カラーの設定に加えて、シェイプ部分を塗りつぶすかどうかも指定できます

ステップごとにカラーを設定する

全スタイルで設定可能です。

まず、設定したいステップのタイトル部分をクリックします。

すると右側のサイドバーに「ステップ番号のカラー設定」という項目が表示されます。

そこでカラーを設定すると、選択したステップだけのカラーを設定することができます

選択したステップ番号のカラーを変える

特定のSTEP番号のカラーを変えたサンプル

STEP2のステップ番号だけ赤色に変更したサンプルです。

STEP
ステップのタイトル部分をクリック

設定したいステップのタイトル部分をクリックします。

STEP
ステップ番号のカラー設定

右側のサイドバーの「ステップ番号のカラー設定」でお好きな色を指定します。


シェイプを塗りつぶす

スモール」スタイルで設定可能です。

スモール」スタイルの場合には、「ステップ番号のカラー設定」の上に「ステップ項目の設定」があります。

シェイプを塗りつぶす」にチェックを入れると、その選択したステップだけ塗りつぶしたシェイプになります

選択したステップのシェイプを塗りつぶす

特定のSTEP番号のシェイプを塗りつぶしたサンプル

STEP2だけシェイプを赤色にして、塗りつぶす設定に変更したサンプルです。

STEP
ステップのタイトル部分をクリック

設定したいステップのタイトル部分をクリックします。

STEP
ステップ項目の設定

シェイプを塗りつぶす」にチェックを入れると、そのステップだけ塗りつぶせます。

まとめ

WordPressテーマ「SWELL」に用意されたSWELL専用ブロック「ステップブロック」をご紹介しました。

ステップブロック」を使用すれば、ブロックエディタで料理の手順やインストールの手順、また契約の流れなど、一連の流れを綺麗に見やすく紹介することができます

3種類のスタイルが用意されているので、記事の内容や雰囲気に合わせて使い分けることができます。

なおのアイコン画像なお

どれもシュッとしていておすすめです^^

最近ちょっとお気に入りの「ステップブロック」をご紹介しました。
綺麗にできるのでおすすめですよ^^

コメント

コメントする

目次
閉じる