【SWELL】ステップブロックの設定と使い方

【SWELL】ステップブロックの設定と使い方

SWELLの「ステップ」ブロックの設定と使い方をまとめています。

目次

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

ステップブロックを使うと、下記の様な手順の流れを順序ごとに説明することができます。

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

記事編集画面でSWELL専用「ステップ」ブロックを追加します(/ステップ)。

ステップブロックを追加
STEP
3種類の中からスタイルを決める

ステップブロックを選択して、サイドバーから「スタイル」を変更します。

ステップブロックのスタイルを選択

ここでの設定はステップブロック全体に影響します。必要であれば、ステップに表示される文字列や形を変更して下さい。タイトルを見出しタグにすることもできます。

現在閲覧しているステップブロックのスタイルは「デフォルト」です。

STEP
必要であればステップ項目を編集する

ステップ項目を選択して、任意のタイトルを入力します。

ステップ項目の編集

ここでの設定は全体の設定を上書きします。

個別にステップ項目のテキストやカラーを変更したい時は、サイドバーから編集して下さい。

STEP
説明欄にブロックを追加して編集する

説明欄に任意のブロックを追加して編集します。

説明欄に任意のブロックを追加して編集

説明欄には画像ブロック等、好きなブロックを追加することができます。

STEP
ステップ項目を追加する

ステップ項目を追加したい時は、ステップブロックを選択して「+」をクリックします。

ステップ項目の追加

後は同様にステップ項目と説明欄を自由に編集して下さい。

ポイント
  • ステップブロックはステップ項目(タイトル)と説明欄の2つのエリアで構成されている
  • 説明欄には自由にブロックを追加・配置できる

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

背景の変更や枠線の追加

ステップブロックを目立たせたい時は、キャプションブロックやグループ化を使うと便利です。

ステップブロックの背景を変更したり、枠線を追加することができます。

キャプションボックスブロックと組み合わせる

キャプションボックスブロックと組み合わせると、下記の様なステップブロックを設置できます。

キャプションボックスブロックと組み合わせる
STEP
キャプションボックスブロックを追加する

記事編集画面でSWELL専用「キャプションボックス」ブロックを追加します。

キャプションボックスを追加

スタイル、カラー、アイコンはお好みでサイドバーから選択して下さい。

STEP
キャプションボックスブロックにステップブロックを追加する

キャプションボックスブロックの中に、「ステップ」ブロックを追加します。

キャプションブロックの中にステップブロックを追加

後はステップブロックを自由に編集して下さい。

ステップブロックをグループ化する

グループ化を使うと、下記の様なステップブロックを配置できます。

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

記事編集画面でSWELL専用「ステップ」ブロックを追加します。

ステップブロックを追加
STEP
ステップブロックをグループ化する

ステップブロックを選択して、ブロックメニューから「グループ化」を選択します。

ステップブロックをグループ化
STEP
グループを編集する

グループを選択して、サイドバーからボーダーやスタイルをお好みで編集します。

ステップブロックのグループを編集

グループ化することで、グループを段落ブロックと同じ様に編集できます。

最後に

ステップブロックは、手順の流れを説明する時に使うと便利です。

ただ、ステップブロック単体で使うと、(個人的には)境界が少し分かりにくい感じがするので、目立たせたい時は、キャプションボックスブロックと組み合わせたり、グループ化して使ってみて下さい。

シェアしてね!

この記事を書いた人

2024年9月4日、Googleのコアアップデート完了。
このサイトは回復の兆しなし。2023年末からずっと投稿しているパチンコ・パチスロ搭載楽曲一覧の記事でなんとかアクセスを保っているだけ。ジャンルごとにドメインを分けて雑記ブログをやめる。パーマリンクを分かりやすく変更する。アイキャッチ画像のサイズを大きくする。等、SEOで改善できる点はいくつか思いつくけど、恐らくそんな単純な問題じゃないと思う。個人でもユーザーに役立つ記事を書けば上位表示できた時代は完全に終わった気がする。

コメント

コメントする

目次