SWELL│ステップブロックを横に表現するカスタマイズ

2025.02.032026.10.13

SWELLのステップブロックは基本縦並びですが、

横にしたほうが見やすく、省スペースになることもあるのでカスタマイズしてみました。

※画面幅959px以下（スマホなど）では縦並びのままです。

実際のステップブロック

タイトル1

ここにテキストが入る

タイトル2

ここにテキストが入る

タイトル3

ここにテキストが入る

タイトル4

ここにテキストが入る

本記事ではそのカスタマイズを紹介します。

SWELLのステップブロックを横に表現するカスタマイズ

やり方は簡単でCSSを挿入するだけです。

SWELLのステップブロックのスタイルをビッグにする

SWELLのステップブロックのスタイルをビッグにします。

※ついでにSTEPの文字を削除しています。

CSSを挿入

対象のステップブロックを選び、「高度な設定」の「追加CSSクラス」にwaza-step-sideと入力してください。

以下のCSSは、waza-step-sideを付けたビッグスタイルのステップだけに適用します。

CSSがわからない人はご依頼（有償）ください。

下記のCSSを、外観 → カスタマイズ → 追加CSS、または子テーマのstyle.cssのどちらか一方に挿入しましょう。

作業前に、追加CSSや子テーマのstyle.cssの現在の内容をバックアップしておきましょう。

元に戻したい場合は、追加したCSSを削除してください。

.swell-block-step.waza-step-side.is-style-big > .swell-block-step__item {
    --swl-step_arrow_color: var(--color_link);
    border-top: 1px dashed var(--swl-step_arrow_color);
    min-width: 0;
    overflow-wrap: anywhere;
}
@media (min-width: 960px) {
    .swell-block-step.waza-step-side.is-style-big { display: flex; }
    .swell-block-step.waza-step-side.is-style-big > .swell-block-step__item { flex: 1 1 0; }
    .swell-block-step.waza-step-side.is-style-big > .swell-block-step__item::before {
        left: 100%; top: 50%; transform: translateY(-50%) rotate(-90deg);
    }
}

あとは見た目を確認しましょう。

画面幅960px以上では横並びに、959px以下では縦並びのままになっているかを確認しましょう。

タイトル1

ここにテキストが入る

タイトル2

ここにテキストが入る

タイトル3

ここにテキストが入る

タイトル4

ここにテキストが入る

以上です。

この記事で紹介しているコードは、GitHubのMOTOKI-LLC/WAZA-codeにもまとめています。