メニュー詳細ページを作る②【テンプレート】

<!-- wp:image {"align":"wide","id":78,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image alignwide size-large"><img src="https://web.erikarie.info/demo2/wp-content/uploads/2023/12/original-1024x683.png" alt="" class="wp-image-78"/></figure>
<!-- /wp:image -->

<!-- wp:heading {"textAlign":"center"} -->
<h2 class="wp-block-heading has-text-align-center">開催日程</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、こちらは書き換えてください。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"align":"center","className":"is-style-balloon_box2"} -->
<p class="has-text-align-center is-style-balloon_box2">お申し込みはこちら</p>
<!-- /wp:paragraph -->

<!-- wp:loos/button {"hrefUrl":"ここにある文字を消して公式ラインのURLを入力してください","isNewTab":true,"className":"is-style-btn_shiny"} -->
<div class="swell-block-button is-style-btn_shiny"><a href="ここにある文字を消して公式ラインのURLを入力してください" target="_blank" rel="noopener noreferrer" class="swell-block-button__link"><span>公式ラインでお申し込み</span></a></div>
<!-- /wp:loos/button -->

<!-- wp:heading {"textAlign":"center"} -->
<h2 class="wp-block-heading has-text-align-center">こんなお悩みありませんか？</h2>
<!-- /wp:heading -->

<!-- wp:media-text {"mediaId":78,"mediaLink":"https://web.erikarie.info/demo2/?attachment_id=78","mediaType":"image"} -->
<div class="wp-block-media-text is-stacked-on-mobile"><figure class="wp-block-media-text__media"><img src="https://web.erikarie.info/demo2/wp-content/uploads/2023/12/original-1024x683.png" alt="" class="wp-image-78 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:list {"className":"is-style-check_list -list-under-dashed"} -->
<ul class="is-style-check_list -list-under-dashed"><!-- wp:list-item -->
<li>箇条書きの項目</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>箇条書きの項目</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>箇条書きの項目</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>箇条書きの項目</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>箇条書きの項目</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>箇条書きの項目</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list --></div></div>
<!-- /wp:media-text -->

<!-- wp:heading {"textAlign":"center"} -->
<h2 class="wp-block-heading has-text-align-center">タイトル</h2>
<!-- /wp:heading -->

<!-- wp:media-text {"mediaId":78,"mediaLink":"https://web.erikarie.info/demo2/?attachment_id=78","mediaType":"image"} -->
<div class="wp-block-media-text is-stacked-on-mobile"><figure class="wp-block-media-text__media"><img src="https://web.erikarie.info/demo2/wp-content/uploads/2023/12/original-1024x683.png" alt="" class="wp-image-78 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph -->
<p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れ｜こちらは書き換えてください（200文字）</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:media-text -->

<!-- wp:heading {"textAlign":"center"} -->
<h2 class="wp-block-heading has-text-align-center">タイトル</h2>
<!-- /wp:heading -->

<!-- wp:media-text {"mediaId":78,"mediaLink":"https://web.erikarie.info/demo2/?attachment_id=78","mediaType":"image"} -->
<div class="wp-block-media-text is-stacked-on-mobile"><figure class="wp-block-media-text__media"><img src="https://web.erikarie.info/demo2/wp-content/uploads/2023/12/original-1024x683.png" alt="" class="wp-image-78 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph -->
<p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れ｜こちらは書き換えてください（200文字）</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:media-text -->

<!-- wp:heading {"textAlign":"center"} -->
<h2 class="wp-block-heading has-text-align-center">タイトル</h2>
<!-- /wp:heading -->

<!-- wp:media-text {"mediaId":78,"mediaLink":"https://web.erikarie.info/demo2/?attachment_id=78","mediaType":"image"} -->
<div class="wp-block-media-text is-stacked-on-mobile"><figure class="wp-block-media-text__media"><img src="https://web.erikarie.info/demo2/wp-content/uploads/2023/12/original-1024x683.png" alt="" class="wp-image-78 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph -->
<p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れ｜こちらは書き換えてください（200文字）</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:media-text -->

<!-- wp:heading {"textAlign":"center"} -->
<h2 class="wp-block-heading has-text-align-center">施術の流れ</h2>
<!-- /wp:heading -->

<!-- wp:loos/step -->
<div class="swell-block-step" data-num-style="circle"><!-- wp:loos/step-item {"stepLabel":"STEP"} -->
<div class="swell-block-step__item"><div class="swell-block-step__number u-bg-main"><span class="__label">STEP</span></div><div class="swell-block-step__title u-fz-l">お申し込み</div><div class="swell-block-step__body"><!-- wp:paragraph -->
<p>どうやってお申し込みするのか詳細</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:loos/step-item -->

<!-- wp:loos/step-item {"stepLabel":"STEP"} -->
<div class="swell-block-step__item"><div class="swell-block-step__number u-bg-main"><span class="__label">STEP</span></div><div class="swell-block-step__title u-fz-l">お支払い</div><div class="swell-block-step__body"><!-- wp:paragraph -->
<p>お支払い方法や注意点などあれば</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:loos/step-item -->

<!-- wp:loos/step-item {"stepLabel":"STEP"} -->
<div class="swell-block-step__item"><div class="swell-block-step__number u-bg-main"><span class="__label">STEP</span></div><div class="swell-block-step__title u-fz-l">当日</div><div class="swell-block-step__body"><!-- wp:paragraph -->
<p>ご予約時間にご来店ください/zoomにアクセスしてください、など</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:loos/step-item --></div>
<!-- /wp:loos/step -->

<!-- wp:heading {"textAlign":"center"} -->
<h2 class="wp-block-heading has-text-align-center">サービス詳細</h2>
<!-- /wp:heading -->

<!-- wp:table -->
<figure class="wp-block-table"><table><tbody><tr><td>サービス名</td><td></td></tr><tr><td>日時</td><td></td></tr><tr><td>場所</td><td></td></tr><tr><td></td><td></td></tr><tr><td>申込方法</td><td></td></tr></tbody></table></figure>
<!-- /wp:table -->

<!-- wp:paragraph {"align":"center","className":"is-style-balloon_box2"} -->
<p class="has-text-align-center is-style-balloon_box2">お申し込みはこちら</p>
<!-- /wp:paragraph -->

<!-- wp:loos/button {"hrefUrl":"ここにある文字を消して公式ラインのURLを入力してください","isNewTab":true,"className":"is-style-btn_shiny"} -->
<div class="swell-block-button is-style-btn_shiny"><a href="ここにある文字を消して公式ラインのURLを入力してください" target="_blank" rel="noopener noreferrer" class="swell-block-button__link"><span>公式ラインでお申し込み</span></a></div>
<!-- /wp:loos/button -->