【SWELL】ステップブロックを横向き表示に変更するカスタマイズ方法

2025年3月22日2025年3月23日

ハシビィくん

SWELLのステップブロックを横並びで使いたいっす〜！

カピーさん

スマホで横並びは不向きだから、PCでの横並びにカスタマイズする方法を紹介していくぞ！

SWELLで用意されているステップブロックは基本縦並びの構成です。今回ご紹介するカスタマイズではPCでのステップブロックが横並びになります。

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

ステップブロックの横並びのイメージ

テキスト量多めバージョン

ステップブロックの横並びのイメージ

ステップブロックの横並びのイメージ（改行あり）

ステップブロックの横並びのイメージ

ステップブロックの横並びのイメージステップブロックの横並びのイメージステップブロックの横並びのイメージ

操作手順は以下の通りです。

CSSを貼り付ける箇所は、全ページに適用させたい場合は下記「追加CSS」もしくは小テーマの「style.css」に貼り付けて下さい。

特定のページのみで利用したい場合は、ページ下の「CSS用コード」に貼り付けが簡単です。

/* PCのステップを横並びに */
@media (min-width: 960px) {
    .swell-block-step.is-style-big {
        display: flex;
    }
}

/* ステップの三角の色 */
.is-style-big > .swell-block-step__item {
    --swl-step_arrow_color: var(--color_link);    
}

/* PCの三角の装飾の位置 */
@media (min-width: 960px) {
    .is-style-big > .swell-block-step__item:before {
        left: 100%;
        top: 50%;
        transform: translateY(-50%) rotate(-90deg);
    }
}

/* 枠の点線 */
.is-style-big>.swell-block-step__item {
    border-top: 1px dashed var(--swl-step_arrow_color);
}

上記コードは「STEP」という項目を削除している状態でのコードになります。「STEP」を使いたい場合は、追加でCSSで調整する必要があります。

このカスタマイズの欠点はテキスト量が多い場合には向いていないという点です。改行などがあるとテキスト部分のデザインが異なるので視認性を確保したい場合は、CSSで調整するかテキスト量を合わせる必要があります。