【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 ※ 今回はこちらを使用します。

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

「色」を選択します。

下記赤枠を選択します。

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

以上で解説を終わります。

最後まで読んで頂きありがとうございました。

本記事が読者の疑問を解決する役に立つと幸いです。

また、色々と触ってみることで実装の幅を増やして頂ければと思います。

おわり。

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

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