【Gutenberg】ステップブロック

【Gutenberg】ステップブロック

利用流れなどに使えるステップブロックです。

ステップブロック

ステップブロック例

STEP1
記事編集画面を開く

新しい投稿もしくは既存の記事編集画面を開く

STEP2
ステップブロック追加
ブロック選択

ブロックメニューから「ステップ」を選択

STEP3
デザイン選択
ステップデザイン

スタイル&デザインオプションでデザインを設定する

ブロックの追加方法

ステップブロックは、通常のブロックメニューから追加できます。

ブロックメニュー

または「/step」とキーワードを入力することで追加することができます。

キーワードで追加

ブロックの特徴

オプション

ステップオプション

ステップのSTEP文字を変更したり、開始番号を指定するなどができます。

デザイン

ステップのデザインは4種類あり、デザインごとアイコンデザインを変更することができます。

共通デザインオプション

また各ステップごとに色を変更することができます。

ステップごとの色オプション

デフォルト

STEP1
記事編集画面を開く

新しい投稿もしくは既存の記事編集画面を開く

STEP2
ステップブロック追加

ブロックメニューから「ステップ」を選択

STEP3
デザイン選択

スタイル&デザインオプションでデザインを設定する

FLOW1
記事編集画面を開く

新しい投稿もしくは既存の記事編集画面を開く

FLOW2
ステップブロック追加

ブロックメニューから「ステップ」を選択

FLOW3
デザイン選択

スタイル&デザインオプションでデザインを設定する

STEP1
記事編集画面を開く

新しい投稿もしくは既存の記事編集画面を開く

STEP2
ステップブロック追加

ブロックメニューから「ステップ」を選択

STEP3
デザイン選択

スタイル&デザインオプションでデザインを設定する

BIG

STEP1
記事編集画面を開く

新しい投稿もしくは既存の記事編集画面を開く

STEP2
ステップブロック追加

ブロックメニューから「ステップ」を選択

STEP3
デザイン選択

スタイル&デザインオプションでデザインを設定する

STEP1
記事編集画面を開く

新しい投稿もしくは既存の記事編集画面を開く

STEP2
ステップブロック追加

ブロックメニューから「ステップ」を選択

STEP3
デザイン選択

スタイル&デザインオプションでデザインを設定する

外側

STEP1
記事編集画面を開く

新しい投稿もしくは既存の記事編集画面を開く

STEP2
ステップブロック追加

ブロックメニューから「ステップ」を選択

STEP3
デザイン選択

スタイル&デザインオプションでデザインを設定する

BOX

STEP1
記事編集画面を開く

新しい投稿もしくは既存の記事編集画面を開く

STEP2
ステップブロック追加

ブロックメニューから「ステップ」を選択

STEP3
デザイン選択

スタイル&デザインオプションでデザインを設定する

Writer Profile

donyのサムネイル

WEB関連の営業から制作まで幅広く経験したフロント・バックエンジニア。
今までのクライアントの要望や制作者としてのノウハウをまとめて「DG-STYLE」を開発しました。

Recommend Post

【Gutenberg】広告スクリプトブロックのサムネイル

【Gutenberg】広告スクリプトブロック

Googleアドセンスなど、Javascriptコードで追加する広告を設置できるブロックです。広告スクリプトブロック広告

2021-08-08
【Gutenberg】記事リストブロックのサムネイル

【Gutenberg】記事リストブロック

現在記事の関連記事や指定したカテゴリーorタグなどに属している記事を表示できるブロックです。記事リストブロック記事リスト

2021-07-25
【Gutenberg】目次ブロックのサムネイル

【Gutenberg】目次ブロック

記事内の見出しを自動で取得し目次を作成するブロックです。目次追加例ブロックの特徴目次デザイン目次のデザインは全部で3つあ

2021-05-16
サイトに「お問い合わせフォーム」を追加しよう!のサムネイル

サイトに「お問い合わせフォーム」を追加しよう!

DG-STYLEでは、テーマデフォルト機能として「お問い合わせフォーム」を追加することができます。サイトビルダーと同じ方

2021-03-01
【Gutenberg】サービスブロックのサムネイル

【Gutenberg】サービスブロック

サービスリストや社員紹介などで使える、写真付きカラムのブロックです。サービス追加ブロックの特徴カラム数は制限なしカラム追

2020-12-29
【Gutenberg】お知らせブロックのサムネイル

【Gutenberg】お知らせブロック

Informationページ内のお知らせや注意事項などを、アイコン付きで表示できるブロックです。お知らせ追加ブロックの特

2020-12-29
TOP