目次
パーツ概要
企業のコーポレートサイトで、自社サービスの導入・ご利用までの流れを紹介するセクションで使うことを想定した横向きの「フロー」ブロックです。
SWELLの「ボックスメニュー」を使うと、上のような横並びの「アイコン」＋「テキスト」のボックスデザインを手軽に表現できます。PCのときは１列に３個表示し、スマホのときは１個にするといったカスタマイズも可能です。
各工程のタイトルは、太字にするかつ、説明テキストよりも大きく表示させたかったのでフォントサイズをLサイズに設定して表現しました。
導入の流れを紹介するコンポーネントなので、各ブロックに「STEP1〜3」もしくは「①〜③」といったバッジをつけたかったんですが、今回は一旦なしで作りました。別の記事で今度バッジをつけるカスタマイズも紹介したいと思います。
使用するSWELLブロック
・ボックスメニュー
コードエディターにコピペして使えるコード
<!-- wp:loos/box-menu {"colPC":"3","colTab":"1","colMobile":"1","className":""} -->
<div class="swell-block-box-menu is-style-default" data-has-gap="0" data-direction="vertical" style="--the-box-width--mb:100%;--the-box-width--tab:100%;--the-box-width--pc:33.33%"><div class="swell-block-box-menu__inner"><!-- wp:loos/box-menu-item {"iconName":"LsMail"} -->
<div class="swell-block-box-menu__item" data-has-gradient="0" data-icon-type="svg"><div class="swell-block-box-menu__link"><div class="swell-block-box-menu__figure"><svg height="1em" width="1em" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 48 48"><path d="M25.2 24.7 46 9.5V9c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v.5l20.8 15.1c.7.6 1.7.6 2.4.1z"></path><path d="M22.8 29.6 2 14.5V38c0 1.7 1.3 3 3 3h38c1.7 0 3-1.3 3-3V14.5L25.2 29.6c-.7.5-1.7.5-2.4 0z"></path></svg></div><span class="swell-block-box-menu__text"><strong><span class="swl-fz u-fz-l">①お問い合わせ</span></strong><br><br>説明テキストが入ります。説明テキストが入ります。説明テキストが入ります。テキストが...</span></div></div>
<!-- /wp:loos/box-menu-item -->
<!-- wp:loos/box-menu-item {"iconName":"LsChats"} -->
<div class="swell-block-box-menu__item" data-has-gradient="0" data-icon-type="svg"><div class="swell-block-box-menu__link"><div class="swell-block-box-menu__figure"><svg height="1em" width="1em" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 48 48"><path d="M19 2.3C9.1 2.3 1 9.7 1 18.7c0 3.5 1.2 6.7 3.3 9.4l-1.5 6.3c-.2.8.6 1.5 1.4 1.1l6-2.6c2.6 1.3 5.6 2.1 8.8 2.1 9.9 0 18-7.3 18-16.4 0-8.9-8.1-16.3-18-16.3z"></path><path d="M43.7 38.1c2.1-2.7 3.3-5.9 3.3-9.4 0-9-8.1-16.4-18-16.4s-18 7.3-18 16.4c0 9 8.1 16.4 18 16.4 3.2 0 6.2-.8 8.8-2.1l6 2.6c.8.3 1.6-.3 1.4-1.1l-1.5-6.4zM15 28.7c0-6.8 6.3-12.4 14-12.4s14 5.5 14 12.4-6.3 12.4-14 12.4-14-5.6-14-12.4z"></path></svg></div><span class="swell-block-box-menu__text"><strong><span class="swl-fz u-fz-l">②ヒアリング・ご契約</span></strong><br><br>説明テキストが入ります。説明テキストが入ります。説明テキストが入ります。テキストが...</span></div></div>
<!-- /wp:loos/box-menu-item -->
<!-- wp:loos/box-menu-item {"iconName":"LsMegaphone"} -->
<div class="swell-block-box-menu__item" data-has-gradient="0" data-icon-type="svg"><div class="swell-block-box-menu__link"><div class="swell-block-box-menu__figure"><svg height="1em" width="1em" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 48 48"><path d="M97.6 13.9c-.5-.7-.4-1.6.2-2l3.6-2.5c.6-.4 1.5-.2 1.9.5.5.7.4 1.6-.2 2l-3.6 2.5c-.6.4-1.5.2-1.9-.5zM100.7 22.4c-.1-.8.5-1.5 1.2-1.6l4.4-.4c.7-.1 1.4.6 1.4 1.4.1.8-.5 1.5-1.2 1.6l-4.4.4c-.7.1-1.4-.6-1.4-1.4zM90.6 8.1c-.7-.3-1.1-1.2-.8-1.8l1.8-4c.3-.6 1.2-.9 1.9-.6.7.3 1.1 1.2.8 1.8l-1.8 4c-.3.7-1.2.9-1.9.6zM40.9 28.7 24.2 4.9c-1.1-1.6-2.5-1.5-3-1.4-.7.2-2 .8-2.4 3.1-2.1 8-6.1 12.2-9.2 14.3l-6.4 4.5C1.7 26.4.8 28 .7 29.8c-.1 1.5.3 2.9 1.2 4.1 1.1 1.5 3 4.3 4 5.8.7 1 1.6 1.8 2.7 2.2.8.3 1.5.4 2.3.4 1.2 0 2.4-.4 3.4-1.1l3.9-2.8 4.4 6.2c.6.9 1.9 1.1 2.8.5L27 44c.9-.6 1.1-1.9.5-2.8l-4.2-6c3.2-1.6 7.8-2.8 14-2.2 2.4.4 3.4-.6 3.8-1.2.3-.3.9-1.5-.2-3.1zM21 32.1l-6.8-9.7c2.9-2.7 6.1-6.8 8-13.3l7 10 7 10c-6.7-.4-11.7 1.1-15.2 3zM42.7 12.2 38.6 15c-.7.5-1.6.3-2.1-.4s-.3-1.6.4-2.1L41 9.7c.7-.5 1.6-.3 2.1.4.5.6.3 1.6-.4 2.1zM33.9 3.7l-2.1 4.5c-.4.8-1.2 1.1-2 .7-.8-.4-1.1-1.2-.7-2l2.1-4.5c.4-.8 1.2-1.1 2-.7.8.4 1.1 1.3.7 2zM46.2 23.8l-5 .4c-.8.1-1.6-.5-1.6-1.4-.1-.8.5-1.6 1.4-1.6l5-.4c.8-.1 1.6.5 1.6 1.4 0 .8-.6 1.6-1.4 1.6z"></path></svg></div><span class="swell-block-box-menu__text"><strong><span class="swl-fz u-fz-l">③ご利用開始</span></strong><br><br>説明テキストが入ります。説明テキストが入ります。説明テキストが入ります。テキストが...</span></div></div>
<!-- /wp:loos/box-menu-item --></div></div>
<!-- /wp:loos/box-menu -->デフォルトのデザインに少し変更を加え調整するために、以下のCSSを「カスタムCSS & JS」＞「CSS用コード」入力欄にコピペするのもお忘れなく。
.swell-block-box-menu.is-style-default .swell-block-box-menu__item {
border: none;
}
.swell-block-box-menu__text {
line-height: 1.5;
}上記コードを追加することで、各ボックスのボーダーを非表示になり、文章の行間が広くなって読みやすくなります。
