【SWELL】ステップブロックの使い方!スタイルの種類やステップ設定なども徹底解説!

初心者きつね

よくある手順通りの進め方を紹介するブロックを使いたいんだけど、なんて名称なのか分からないよ。。

わい

あれは「ステップブロック」って言うよ。

今回は、SWELLテーマで利用できる「ステップブロック」について解説します。

ステップブロックとは、何かのステップや手順を解説するときに多用されるブロックのこと。

STEP
ここにテキストが入ります。

ここにテキストが入ります。

STEP
ここにテキストが入ります。

ここにテキストが入ります。

STEP
ここにテキストが入ります。

ここにテキストが入ります。

今回はこのステップブロックの基本的な導入の仕方と、スタイルなどの設定について解説していきます!

目次

ステップブロックの基本的な使い方

ステップブロックの基本的な使い方は以下の通りです。

STEP
ブロックエディターの右端の「+」を選択

編集画面左上の「+」から「ステップ」と検索してもOK!

STEP
「ステップ」を選択
STEP
選択できたら、完了!

「ステップ」を選択できたら、このブロックと同じような表示が出るはずです。後述するスタイルや設定などをいじって自分好みにカスタマイズしてみましょう!

また、ステップが足りない場合には、下に表示される「+」のボタンを押すことによってステップを追加できます。

ステップブロックのスタイル

ステップブロックには、以下の3つのスタイルがあります。

デフォルト

STEP
ここにテキストが入ります。

ここにテキストが入ります。

STEP
ここにテキストが入ります。

ここにテキストが入ります。

STEP
ここにテキストが入ります。

ここにテキストが入ります。

ビッグ

STEP
ここにテキストが入ります。

ここにテキストが入ります。

STEP
ここにテキストが入ります。

ここにテキストが入ります。

STEP
ここにテキストが入ります。

ここにテキストが入ります。

スモール

STEP
ここにテキストが入ります。

ここにテキストが入ります。

STEP
ここにテキストが入ります。

ここにテキストが入ります。

STEP
ここにテキストが入ります。

ここにテキストが入ります。

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

ステップブロックでは、ステップに関する様々な設定をすることができます。

「STEP」のテキストの変更

デフォルトで「STEP」と記載されている部分のテキストを好きなものに変更することができます。

例えば、「手順」としてみると、下のような表示になります。

手順
ここにテキストが入ります。

ここにテキストが入ります。

手順
ここにテキストが入ります。

ここにテキストが入ります。

手順
ここにテキストが入ります。

ここにテキストが入ります。

ステップの始まりの番号調整

「始まりの番号」というところの文字は、デフォルトでは0になっていますが、ここの数字を調整することによって好きな番号から始めることができます(0の場合は1から始まります)。

ステップの途中で注意書きを挟んだ時などに、利用できますね!

手順
ここにテキストが入ります。

ここにテキストが入ります。

手順
ここにテキストが入ります。

ここにテキストが入ります。

手順
ここにテキストが入ります。

ここにテキストが入ります。

ステップ番号の形

ステップ番号の形は、丸と四角から選択できるようになっています。

四角にしてみると、下のような表示になります。

手順
ここにテキストが入ります。

ここにテキストが入ります。

手順
ここにテキストが入ります。

ここにテキストが入ります。

手順
ここにテキストが入ります。

ここにテキストが入ります。

タイトルのHTMLタグ

手順のタイトルのHTMLタグは、h2〜h6やdivのうちから好きなものを選択できます。

h2〜h6の好きな見出しにすることもできますが、見出しの構造を理解しないでむやみに設定してしまうとSEOの評価が下がってしまうので

divに設定しておくことをお勧めします。

値段以上の価値を備えたテーマを利用したい人にとって、SWELLはお勧め

SWELLには、ステップブロック以外にも直感的な操作で実装できる豊富な機能が多くあります。

  • 直感的な操作で高い実装を実現したい
  • 値段以上の価値を備えたテーマを利用したい
  • 本当に成果が出るアフィリエイトブログを運用したい

と考える人には、SWELLはお勧めできると言えます。

まさに、「WordPressテーマ界でのニ◯リ」と言えるのではないでしょうか。笑

ここまで読んでSWELLが気になった人は、下のリンクからアクセスできますので

ぜひ利用してみてください!

このブログでは、Web制作に関する話題やコーディング、WordPressなどに役立つ情報を発信しているので

次回の記事もぜひ見てくださいね。

\ 最新情報をチェック /

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

わい
Web制作未経験から、HTML/CSS(Sass)/JavaScript(JQuery)/WordPressを習得し、学習開始半年で月収10万円を達成。制作実績15件超。
主にWeb制作に関する話題やコーディング、WordPressなどに役立つ情報を発信しています。

コメント

コメントする

CAPTCHA


目次