こんにちは、なおです！
当ブログでは、WordPressのテーマに「SWELL（スウェル）」を使用しています。
「SWELL」に用意されているたくさんの機能のうち、今回はSWELL専用ブロック「ステップブロック」をご紹介します。
「ステップブロック」を使用すると、作業手順などを見やすく紹介することができます。
使い方もとても簡単になっているので、ブロックエディタでどんどん作っていけます。
スタイルもスタイリッシュな3種類が用意されています。
「ステップブロック」とはどんなものか、ぜひご覧ください。
ステップブロックとは
当ブログでも使用しているWordPressのテーマ「SWELL」。
「SWELL」はブロックエディタ（Gutenberg）に完全対応したテーマで、記事をスラスラと書くことができます。
その「SWELL」のたくさんの機能の中に、SWELL専用ブロック「ステップブロック」というものが用意されています。
「ステップブロック」を使うと、料理やインストールなどの作業手順、また契約の流れなどを綺麗にわかりやすく紹介することができます。
こんな風にできます
とり肉、野菜をひと口大に切ります。
とり肉を炒めて焼き色がついたら、野菜を加えてさらに炒めます。
調味料を加えて全体にからめたらできあがり。
「ステップブロック」の特徴は、次のとおりです。
- 一連の流れを1ステップずつ見やすく紹介できる。
- スタイルは3種類。
- ステップそれぞれにタイトルと内容を書ける。
- ラベルや数字も変えられる。
- 特定のステップだけカラーを変えることも可能。
今回はこれらをひとつずつご紹介します。
また、「SWELL」については、以前のこちらの記事をご覧いただければ幸いです。
スタイルは3種類
ステップブロックで用意されているスタイルは、
- デフォルト
- ビッグ
- スモール
の3種類が用意されています。
（SWELLのバージョン1.4.0現在）
サイドバーにある設定でいつでも好きなスタイルに変更できます。
「デフォルト」のスタイル
サイトの基本色で塗られた円の中に書かれたステップ番号がとても目立ち、ひとつひとつの手順や全体の流れがわかりやすくなっています。
ブロックを挿入したら、タイトルと内容を書きます。
ステップはどんどん増やせます。
ラベルの文字や色も変えられます。
「ビッグ」のスタイル
今度は逆に、ひとつひとつのステップを大きく区切ることで、シンプルかつ広く見えるデザインです。
ブロックを挿入したら、タイトルと内容を書きます。
ステップはどんどん増やせます。
ラベルの文字や色も変えられます。
「スモール」のスタイル
ステップ番号が小さくなっているデザインです。
大きくスペースを取らず、簡単に流れを紹介するときなどに便利です。
ブロックを挿入したら、タイトルと内容を書きます。
ステップはどんどん増やせます。
ラベルの文字や色も変えられます。
ステップブロックの使い方
基本の使用方法
「ステップブロック」の基本的な使用方法は、
- ステップブロックを追加する
- 最初のステップのタイトルと内容を書く
- 次のステップを追加する
- ステップのタイトルと内容を書く
となります。
あとは、3～4をくり返して、必要な分だけステップを追加することができます。
それでは順番に使い方をご紹介します。
ステップブロックを追加する
ブロックエディタの投稿入力画面で、「ブロック追加ボタン（十字に丸のボタン）」をクリックして追加できるブロックの一覧を表示します。
一覧の中から「SWELLブロック」グループの中にある「ステップ」をクリックして、「ステップブロック」を追加します。
すると、親となるステップブロックが追加され、その中に最初のステップが入っています。
最初のステップのブロックはタイトル部分と、その下に内容を書く部分から構成されています。
ステップのタイトルを入力
「STEP1」と書かれたステップ番号の右側に、このステップのタイトルを入力します。
ステップの内容を書く
次にSTEP1の内容を書いていきます。
タイトルの下にある内容部分をクリックするとカーソルが出てきますので、文章を入力します。
また、画像など文章以外のブロックを追加したい場合には、「ブロック追加ボタン（十字に丸のボタン）」をクリックして、希望のブロックを追加します。
ステップの内容の中には、いろいろな種類のブロックをどんどん追加していくことができます。
ステップを追加する
次のステップを追加するには、現在あるステップの下にあるグレーの四角の部分（中央に「ブロック追加ボタン」があるところ）をクリックします。
開いたウインドウの中にある「ステップ項目」をクリックします。
すると、「STEP1」の下に「STEP2」が追加されます。
同じようにタイトルと内容を書き、後は必要な分だけくり返しステップを追加します。
ステップブロック全体の設定
ここでは、ステップブロック全体の設定についてご紹介します。
スタイルを選ぶ
SWELLのステップブロックでは3種類のスタイルが用意されています。
スタイルを変更するには、まず「ステップブロック」をクリックして選択した状態にします。
すると右側のサイドバーにステップブロックの設定が表示されるので、「スタイル」の中から好きなものをクリックして選択します。
「デフォルト」「ビッグ」「スモール」の3種類のスタイルから選択できます。
（SWELLのバージョン1.4.0現在）
STEPの文字を変える
各ステップ番号のところに表示されている「STEP」というラベルの文字は、好きなものに変更することができます。
STEPの文字を変えるには、まず「ステップブロック」をクリックして選択した状態にします。
すると、右側のサイドバーに「「STEP」の文字」という項目があり、デフォルトでは「STEP」と入力されています。
この項目を変更すると、好きな文字に変更することができます。
また、この項目を空にするとラベルの文字はなしとなり、ステップ番号だけ表示されるようになります。
「STEP」の文字を変えたサンプル
デフォルトの「STEP」を「手順」に変更したサンプルです。
ステップブロックをクリックして選択します。
右側のサイドバーにある「ステップ設定」の「STEP」の文字を変更する。
ステップ番号の始まる数字
デフォルトではステップ番号は「1」から始まりますが、「2から始める」や「10から始める」といったことができます。
ステップ番号の始まる数字を変えるには、まず「ステップブロック」をクリックして選択した状態にします。
すると、右側のサイドバーに「始まりの番号」という項目があり、デフォルトでは「1」と入力されています。
これを好きな数字に変えると、その番号からステップ番号を始めることができます。
（始めたステップ番号から1ずつ増えていきます）
STEP番号の始まりを変えたサンプル
デフォルトの「1」を「10」に変更して、STEP10から始まるようにしたサンプルです。
ステップブロックをクリックして選択します。
右側のサイドバーにある「ステップ設定」の「始まりの番号」を変更する。
ステップ番号の形状や並び方
ステップ番号の形状を選ぶ
ステップ番号のシェイプの形状を「円」にするか「四角」にするかを選択することができます。
ステップ番号のスタイルを変更するには、まず「ステップブロック」をクリックして選択した状態にします。
すると、右側のサイドバーに「ステップ番号の形」という項目があり、「円形」と「四角形」から好きな形を選ぶことができます。（デフォルトは「円形」）
STEP番号の形状を変えたサンプル
デフォルトの「円形」を「四角形」に変更したサンプルです。
ステップブロックをクリックして選択します。
右側のサイドバーにある「ステップ設定」にある「STEP番号の形」から「円形」か「四角形」を選びます。
ステップ番号の並び方の設定
「STEP」というラベルの文字と「1」などのステップ番号の並び方を「縦に並べる」か「横に並べる」かを選択することができます。
ステップ番号の並び方を変更するには、まず「ステップブロック」をクリックして選択した状態にします。
すると、右側のサイドバーに「ステップ番号の並び」という項目があり、「縦並び」と「横並び」から選ぶことができます。（デフォルトは「縦並び」）
STEP番号の並び方を変えたサンプル
デフォルトの「縦並び」を「横並び」に変更したサンプルです。
ステップブロックをクリックして選択します。
右側のサイドバーにある「ステップ設定」にある「ステップ番号の並び」から「縦並び」か「横並び」を選びます。
ステップごとの設定
今まではステップブロック全体の設定でしたが、各ステップそれぞれでカラーを設定することができます。
また、「スモール」スタイルでは、カラーの設定に加えて、シェイプ部分を塗りつぶすかどうかも指定できます。
ステップごとにカラーを設定する
まず、設定したいステップのタイトル部分をクリックします。
すると右側のサイドバーに「ステップ番号のカラー設定」という項目が表示されます。
そこでカラーを設定すると、選択したステップだけのカラーを設定することができます。
特定のSTEP番号のカラーを変えたサンプル
STEP2のステップ番号だけ赤色に変更したサンプルです。
設定したいステップのタイトル部分をクリックします。
右側のサイドバーの「ステップ番号のカラー設定」でお好きな色を指定します。
シェイプを塗りつぶす
「スモール」スタイルの場合には、「ステップ番号のカラー設定」の上に「ステップ項目の設定」があります。
「シェイプを塗りつぶす」にチェックを入れると、その選択したステップだけ塗りつぶしたシェイプになります。
特定のSTEP番号のシェイプを塗りつぶしたサンプル
STEP2だけシェイプを赤色にして、塗りつぶす設定に変更したサンプルです。
設定したいステップのタイトル部分をクリックします。
「シェイプを塗りつぶす」にチェックを入れると、そのステップだけ塗りつぶせます。
まとめ
WordPressテーマ「SWELL」に用意されたSWELL専用ブロック「ステップブロック」をご紹介しました。
「ステップブロック」を使用すれば、ブロックエディタで料理の手順やインストールの手順、また契約の流れなど、一連の流れを綺麗に見やすく紹介することができます。
3種類のスタイルが用意されているので、記事の内容や雰囲気に合わせて使い分けることができます。
なおどれもシュッとしていておすすめです^^
最近ちょっとお気に入りの「ステップブロック」をご紹介しました。
綺麗にできるのでおすすめですよ^^
コメント