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

2023年12月5日2023年12月25日
このようなページを作ります。
コードを全部コピーする
固定ページ新規追加
コードエディターにする
貼り付ける
「コードエディターを終了」
好きなようにカスタマイズしてください
<!-- wp:heading -->
<h2 class="wp-block-heading">Aコース</h2>
<!-- /wp:heading -->

<!-- wp:media-text {"mediaId":30,"mediaLink":"https://office.erikarie.info/member/6ee079cd40fe21bce0297831157f34a2_s/","mediaType":"image","mediaWidth":40} -->
<div class="wp-block-media-text is-stacked-on-mobile" style="grid-template-columns:40% auto"><figure class="wp-block-media-text__media"><img src="https://office.erikarie.info/member/wp-content/uploads/2023/10/6ee079cd40fe21bce0297831157f34a2_s.jpg" alt="" class="wp-image-30 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph -->
<p>紹介文や説明文などを記入してください紹介文や説明文などを記入してください紹介文や説明文などを記入してください紹介文や説明文などを記入してください</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>0,000円（税込）〜</strong></p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>所要時間：00分</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>対象年齢：00歳〜</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>定員：00〜00人</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list --></div></div>
<!-- /wp:media-text -->

<!-- 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 --></div>
<!-- /wp:loos/step -->

<!-- wp:loos/button {"className":"is-style-btn_normal"} -->
<div class="swell-block-button is-style-btn_normal"><a href="" class="swell-block-button__link"><span>Aコースを予約する</span></a></div>
<!-- /wp:loos/button -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">概要</h3>
<!-- /wp:heading -->

<!-- wp:table -->
<figure class="wp-block-table"><table><tbody><tr><th><strong>料金</strong></th><td>0,000円（税込）〜<br>※材料費込み</td></tr><tr><th><strong>お支払い方法</strong></th><td>現金払いクレジット払い</td></tr><tr><th><strong>キャンセル・変更について</strong></th><td>紹介文や説明文などを記入してください紹介文や説明文などを記入してください</td></tr><tr><th><strong>所要時間</strong></th><td>00分</td></tr><tr><th><strong>対象年齢</strong></th><td>00歳〜</td></tr><tr><th><strong>定員</strong></th><td>00〜00人</td></tr><tr><th><strong>ご準備いただくもの</strong></th><td>お持ち帰り用の袋お持ち帰り用の袋</td></tr></tbody></table></figure>
<!-- /wp:table -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Bコース</h2>
<!-- /wp:heading -->

<!-- wp:media-text {"mediaId":30,"mediaLink":"https://office.erikarie.info/member/6ee079cd40fe21bce0297831157f34a2_s/","mediaType":"image","mediaWidth":40} -->
<div class="wp-block-media-text is-stacked-on-mobile" style="grid-template-columns:40% auto"><figure class="wp-block-media-text__media"><img src="https://office.erikarie.info/member/wp-content/uploads/2023/10/6ee079cd40fe21bce0297831157f34a2_s.jpg" alt="" class="wp-image-30 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph -->
<p>紹介文や説明文などを記入してください紹介文や説明文などを記入してください紹介文や説明文などを記入してください紹介文や説明文などを記入してください</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>0,000円（税込）〜</strong></p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>所要時間：00分</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>対象年齢：00歳〜</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>定員：00〜00人</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list --></div></div>
<!-- /wp:media-text -->

<!-- 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 --></div>
<!-- /wp:loos/step -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">概要</h3>
<!-- /wp:heading -->

<!-- wp:table -->
<figure class="wp-block-table"><table><tbody><tr><th><strong>料金</strong></th><td>0,000円（税込）〜<br>※材料費込み</td></tr><tr><th><strong>お支払い方法</strong></th><td>現金払いクレジット払い</td></tr><tr><th><strong>キャンセル・変更について</strong></th><td>紹介文や説明文などを記入してください紹介文や説明文などを記入してください</td></tr><tr><th><strong>所要時間</strong></th><td>00分</td></tr><tr><th><strong>対象年齢</strong></th><td>00歳〜</td></tr><tr><th><strong>定員</strong></th><td>00〜00人</td></tr><tr><th><strong>ご準備いただくもの</strong></th><td>お持ち帰り用の袋お持ち帰り用の袋</td></tr></tbody></table></figure>
<!-- /wp:table -->

<!-- wp:loos/button {"className":"is-style-btn_normal"} -->
<div class="swell-block-button is-style-btn_normal"><a href="" class="swell-block-button__link"><span>Bコースを予約する</span></a></div>
<!-- /wp:loos/button -->

<!-- wp:loos/full-wide -->
<div class="swell-block-fullWide pc-py-60 sp-py-40 alignfull" style="background-color:#f7f7f7"><div class="swell-block-fullWide__inner l-article"><!-- wp:heading {"className":"is-style-section_ttl"} -->
<h2 class="wp-block-heading is-style-section_ttl">よくある質問</h2>
<!-- /wp:heading -->

<!-- wp:loos/accordion -->
<div class="swell-block-accordion"><!-- wp:loos/accordion-item -->
<details class="swell-block-accordion__item" data-swl-acc="wrapper"><summary class="swell-block-accordion__title" data-swl-acc="header"><span class="swell-block-accordion__label">質問タイトル</span><span class="swell-block-accordion__icon c-switchIconBtn" data-swl-acc="icon" aria-hidden="true" data-opened="false"><i class="__icon--closed icon-caret-down"></i><i class="__icon--opened icon-caret-up"></i></span></summary><div class="swell-block-accordion__body" data-swl-acc="body"><!-- wp:paragraph -->
<p>回答</p>
<!-- /wp:paragraph --></div></details>
<!-- /wp:loos/accordion-item -->

<!-- wp:loos/accordion-item -->
<details class="swell-block-accordion__item" data-swl-acc="wrapper"><summary class="swell-block-accordion__title" data-swl-acc="header"><span class="swell-block-accordion__label">質問タイトル</span><span class="swell-block-accordion__icon c-switchIconBtn" data-swl-acc="icon" aria-hidden="true" data-opened="false"><i class="__icon--closed icon-caret-down"></i><i class="__icon--opened icon-caret-up"></i></span></summary><div class="swell-block-accordion__body" data-swl-acc="body"><!-- wp:paragraph -->
<p>回答</p>
<!-- /wp:paragraph --></div></details>
<!-- /wp:loos/accordion-item -->

<!-- wp:loos/accordion-item -->
<details class="swell-block-accordion__item" data-swl-acc="wrapper"><summary class="swell-block-accordion__title" data-swl-acc="header"><span class="swell-block-accordion__label">質問タイトル</span><span class="swell-block-accordion__icon c-switchIconBtn" data-swl-acc="icon" aria-hidden="true" data-opened="false"><i class="__icon--closed icon-caret-down"></i><i class="__icon--opened icon-caret-up"></i></span></summary><div class="swell-block-accordion__body" data-swl-acc="body"><!-- wp:paragraph -->
<p>回答</p>
<!-- /wp:paragraph --></div></details>
<!-- /wp:loos/accordion-item --></div>
<!-- /wp:loos/accordion --></div></div>
<!-- /wp:loos/full-wide -->
夢も事業もHPも！小さく始めて大きく育てる部のメンバーサイトは、ずぼらイズWEBオフィス提供の「名刺型ホームページ」を制作された方専用のラーニングサイトです。

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

関連記事
