左向けに進むステップ画像3つセット

このような↓横並びの3つの画像(左側に矢印付き)のブロックを設置します。

コメント

▶︎

コメント

▶︎

コメント

(このページのURLをスマホで開くと、スマホでの見た目確認ができます。)


実際に設置するブロックはダミー画像です↓

コメント

▶︎

コメント

▶︎

コメント

設置方法

  1. 下のコードをコピーする
  2. このブロックを使いたい箇所に貼り付ける
  3. 画像を置き換え/コメントを書き換えまたは削除

下のコード↓の使い方はこちら▷

<!-- wp:loos/columns {"vAlign":"center","colPC":"5","colTab":"5","colMobile":"5","margin":{"x":"0rem","y":"0rem"}} -->
<div class="swell-block-columns" style="--clmn-w--pc:20%;--clmn-w--tab:20%;--clmn-w--mobile:20%;--swl-clmn-mrgn--x:0rem;--swl-clmn-mrgn--y:0rem" data-valign="center"><div class="swell-block-columns__inner"><!-- wp:loos/column {"colWidth":{"pc":"30%","tab":"30%","mobile":"30%"}} -->
<div class="swell-block-column swl-has-mb--s" style="--clmn-w--mobile:30%;--clmn-w--tab:30%;--clmn-w--pc:30%"><!-- wp:image {"id":451,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://office.erikarie.info/member/wp-content/uploads/2025/04/ダミー画像_横.png" alt="" class="wp-image-451"/><figcaption class="wp-element-caption">コメント</figcaption></figure>
<!-- /wp:image --></div>
<!-- /wp:loos/column -->

<!-- wp:loos/column {"colWidth":{"pc":"5%","tab":"5%","mobile":"5%"}} -->
<div class="swell-block-column swl-has-mb--s" style="--clmn-w--mobile:5%;--clmn-w--tab:5%;--clmn-w--pc:5%"><!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center"><span class="swl-fz u-fz-l">▶︎</span></p>
<!-- /wp:paragraph --></div>
<!-- /wp:loos/column -->

<!-- wp:loos/column {"colWidth":{"pc":"30%","tab":"30%","mobile":"30%"}} -->
<div class="swell-block-column swl-has-mb--s" style="--clmn-w--mobile:30%;--clmn-w--tab:30%;--clmn-w--pc:30%"><!-- wp:image {"id":451,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://office.erikarie.info/member/wp-content/uploads/2025/04/ダミー画像_横.png" alt="" class="wp-image-451"/><figcaption class="wp-element-caption">コメント</figcaption></figure>
<!-- /wp:image --></div>
<!-- /wp:loos/column -->

<!-- wp:loos/column {"colWidth":{"pc":"5%","tab":"5%","mobile":"5%"}} -->
<div class="swell-block-column swl-has-mb--s" style="--clmn-w--mobile:5%;--clmn-w--tab:5%;--clmn-w--pc:5%"><!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center"><span class="swl-fz u-fz-l">▶︎</span></p>
<!-- /wp:paragraph --></div>
<!-- /wp:loos/column -->

<!-- wp:loos/column {"colWidth":{"pc":"30%","tab":"30%","mobile":"30%"}} -->
<div class="swell-block-column swl-has-mb--s" style="--clmn-w--mobile:30%;--clmn-w--tab:30%;--clmn-w--pc:30%"><!-- wp:image {"id":451,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://office.erikarie.info/member/wp-content/uploads/2025/04/ダミー画像_横.png" alt="" class="wp-image-451"/><figcaption class="wp-element-caption">コメント</figcaption></figure>
<!-- /wp:image --></div>
<!-- /wp:loos/column --></div></div>
<!-- /wp:loos/columns -->

作ったブロックは、マイパターンに登録しておくことで、次回から簡単に使うことができるようになります✨
マイパターンの登録・使用・説明についてはこちら▶︎

夢も事業もHPも!小さく始めて大きく育てる部のメンバーサイトは、ずぼらイズWEBオフィス提供の「名刺型ホームページ」を制作された方専用のラーニングサイトです。

基本的に納品時の設定と同じ画面で動画を作っていますが、動画と実際の画面が違っているためによくわからない、操作がうまくできない、と言うような場合は公式ライン▷よりお知らせください。

目次