【募集中】WordPressテーマ『SWELL』で作ったコーポーレートサイトやブログを掲載させて頂ける方

【SWELL】ステップブロックの使い方【手順の解説に最適】

当ページのリンクには広告が含まれています。
悩む人

SWELLブロックで用意されている「ステップ」の使い方について教えてほしいです。

こういった悩みにお答えします。

本記事で解決できること

  • ステップブロックのステップ(親ブロック)の使い方
  • ステップブロックのステップ項目(子ブロック)の使い方

是非、最後までご覧ください。

News

以下にブロックエディタで使えるSWELL専用機能の記事をまとめていますので、良ければご覧ください。

あわせて読みたい
【SWELL】ブロックエディタの使い方【テーマ専用機能まとめ】 SWELLでのブロックエディタの使い方を知りたいですか?本記事では、ブロックツールバーで使えるSWELL専用機能やWordPress標準搭載のブロックをカスタマイズしたブロック、SWELL専用のカスタムブロックの使い方を解説しています。SWELLでのブロックエディタの使い方を知りたい方は是非ご覧ください。
本記事の内容

【SWELL】ステップブロックの使い方【手順の解説に最適】

ステップブロックを挿入

管理画面メニューから、「投稿」>「新規投稿を追加」を選択します。

(ブロック挿入ツールを切り替え)から、「ブロック」>「SWELLブロック」>「ステップ」を選択します。

タイトルとテキストを入力

全ブロックを挿入

テキストだけでなく全ブロックを挿入することもできます。

開くと全ブロックを見ることができます!
開いて全ブロックを見る

ステップ項目を追加

をクリックで「ステップ項目を追加」できます。

ステップ(親ブロック)で行える設定

  • スタイル
  • ステップ設定

※ 設定は、ステップ(親ブロック)を選択すると行えます。

スタイル

(設定)から、「ブロック」>「スタイル」を選択します。

デフォルト

STEP
Step Title.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

STEP
Step Title.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

ビッグ

STEP
Step Title.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

STEP
Step Title.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

スモール

STEP
Step Title.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

STEP
Step Title.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

ステップ設定

(設定)から、「ブロック」>「ステップ設定」を選択します。

以下の設定が行えます。

  • 「STEP」の文字
  • 始まりの番号
  • ステップ番号の形
  • タイトルのHTMLタグ

「STEP」の文字

「STEP」から「ステップ」へとテキストが変わっています。

始まりの番号

「STEP 1」ではなく「STEP 2」から始まっています。

ステップ番号の形

円形

四角形

タイトルのHTMLタグ

「div」から「h3」に変更します。

ステップ項目のタイトルを目次に見出しとして表示させることができます。

ステップ項目(子ブロック)で行える設定

※ 設定は、ステップ項目(子ブロック)を選択すると行えます。

  • STEPテキストの上書き設定
  • ステップ番号のカラー設定

STEPテキストの上書き設定

(設定)から、「ブロック」>「STEPテキストの上書き設定」を選択します。

以下の設定が行えます。 ※ 個別に設定を行うことができます。

  • 「STEP」部分のテキスト
  • テキストを非表示にする
  • 番号部分のテキスト
  • 番号を非表示にする

「STEP」部分のテキスト

「STEP 2」のみテキストが「ステップ」に変わっています。

テキストを非表示にする

「STEP 2」の「STEP」が非表示になっています。

番号部分のテキスト

「STEP 2」から「STEP Ⅱ」へと数字が変わっています。

番号を非表示にする

「STEP 2」の数字が非表示になっています。

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

以下から色を決めることができます。

  • 用意されているテーマ
  • RGB
  • HSL
  • Hex ※ 今回はこちらを使用します。

(設定)から、「ブロック」>「ステップ番号のカラー設定」を選択します。

「色」を選択します。

下記赤枠を選択します。

下記赤枠にカラーコードを入力することで色が変わります。

News

以下にブロックエディタで使えるSWELL専用機能の記事をまとめていますので、良ければご覧ください。

あわせて読みたい
【SWELL】ブロックエディタの使い方【テーマ専用機能まとめ】 SWELLでのブロックエディタの使い方を知りたいですか?本記事では、ブロックツールバーで使えるSWELL専用機能やWordPress標準搭載のブロックをカスタマイズしたブロック、SWELL専用のカスタムブロックの使い方を解説しています。SWELLでのブロックエディタの使い方を知りたい方は是非ご覧ください。

今回は以上です。

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

よかったらシェアしてね!
  • URLをコピーしました!
本記事の内容