WordPressサイトで流れ（フロー・ステップ）をプラグインを使わずにブロックエディタで作る方法をご紹介します。

流れ（フロー・ステップ）のサンプル

次のような流れ（フロー・ステップ）をプラグインを使わずに作ります。

スマートフォンでは以下のようになります。

ベースデザインは、記事制作時点でWordPressにプリインストールされているテーマ「Twenty Twenty-Five」です。

流れ（フロー・ステップ）の作り方

WordPressのブロックエディタと追加CSSで作ります。

ブロックエディタでフォーマットを作る

まずは流れ（フロー・ステップ）のフォーマットをブロックエディタで作ります。

固定ページを追加して、カラムブロックを選択します。

レイアウトは33 / 66 を選びます。

カラムブロックの左側の列に段落を挿入します。

段落にステップ数を入力し、その下に見出しを挿入して概要を入力します。

カラムの右側の列に段落を挿入します。

段落にそのステップの詳細を入力します。

カラム全体を選択して、右画の設定メニューよりブロック→追加CSSクラスにmy-flow-blockと入力します。

カラムのしたに段落を挿入し、「↓（下矢印）」と入力します。

下矢印の段落を選択して、右画の設定メニューよりブロック→追加CSSクラスにmy-next-flow-blockと入力します。

ステップ数分、カラムと矢印を複製します。

複製したステップにそれぞれ内容を入力し、順番を入れ替えます。

ここまでで固定ページをプレビューすると、次のようになります。

追加CSSで体裁を整える

流れ（フロー・ステップ）のフォーマットができたら、そのデザインを整える追加CSSを設定します。

次のCSSをWordPress子テーマのstyle.cssに追加します。WordPress子テーマの作り方はこちらの記事をご覧ください。

/* 各STEPの全体 */
.my-flow-block {
    background-color: #f1f5f7; /* 背景色 */
    padding: 10px;             /* 内側に余白 */
    border-radius: 10px;       /* 角丸 */
}

/* 各STEPの見出し列 */
.my-flow-block .wp-block-column:first-child {
    text-align: center;        /* テキストを中央寄せ */
    background-color: #2f8cff; /* 背景色 */
    color: #ffffff;            /* 文字色 */
    padding-top: 5%;           /* 内側上部に余白 */
    padding-bottom: 5%;        /* 内側下部に余白 */
    border-radius: 5px;        /* 角丸 */
}

/* 各STEPの子見出し */
.my-flow-block .wp-block-column:first-child p {
    font-size: 18px; /* 文字サイズ */
}

/* 各STEPの大見出し */
.my-flow-block .wp-block-column:first-child .wp-block-heading {
    font-weight: bold; /* 太字 */
}

/* 次のSTEPアイコン */
.my-next-flow-block {
    text-align: center;        /* テキストを中央寄せ */
    font-weight: 1000;         /* 太字 */
    color: #2f8cff;            /* 文字色 */
    background-color: #f1f5f7; /* 背景色 */
    width: fit-content;        /* 幅 */
    padding: 10px 20px;        /* 内側に余白 */
    border-radius: 100px;      /* 角丸 */
}

CSSを追加してページをプレビューすると、はじめにご紹介したような流れ（フロー・ステップ）が表示されます。

まとめ

WordPressサイトで流れ（フロー・ステップ）をプラグインを使わずにブロックエディタで作る方法をご紹介しました。

ワークフローなどをWebページに掲載する際、タ流れ（フロー・ステップ）形式だと伝わりやすいと思います。

カナメグローバルホールディングスではWebサイトの制作や保守を行っています。

WordPressサイトも対応していますので、ぜひお気軽にご相談ください。